Blogspot Tutorial: Add a Cool Animated Favicon in Blogger

What is a favicon?

A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16x16 (or 32x32) pixel square icon associated with a particular website or webpage. (Wikipedia.Org)

How to install an animated favicon in a Blogger blog?

Go to Layout | Edit HTML and find </b:skin>. Paste the following code right after </b:skin> but before </head> tag. It should look like this:


<link href='URL of .ico file' rel='shortcut icon' type='image/x-icon'/>

<link href='URL of animated .gif file' rel='icon' type='image/gif'/>


Remember: I'm using two files (.ico & .gif) because old internet browsers like Internet Explorer cannot display an animated favicon so we need to add a .ico file for this purpose.

How to find and upload .gif and .ico files...

You can search on Google for keywords like "animated favicons" or "free .ico favicons" and then you can upload your files to Google Sites for free.

Add a Cool Animated Favicon in Blogger


  1. blogspot page cannot show my animated favicon, it can show static favicon only. any idea? help me please.

  2. Hi Christine Peter, the animated favicon is only supported by Firefox and Netscape. Other browsers will show a static icon.

  3. This is so cool. Thank you for helping me know how to add an animated icon in blog.


Note: All comments will be moderated.