05 February 2009

4 How do I add Animated Favicon to my Blog

        Did you ever wonder about the little tiny animated favicons displayed at the address bar of the browser? With help of animated gif image format we can easily implement animated Favicon.
While dealing with animated Favicons You should keep the following useful things in mind.

  • Only animated gif image format can be used as animated favicon. No other formats will do the trick.
  • Currently, Only Firefox and Opera support animated Favicons(animated gif Favicons). Even though Google chrome renders gif images, it will display only first frame of the gif, Hence there will not be any animation effect.
  • IE, still most popular browser, who introduced the concept of Favicons, still having support only for .ico format even with its recent version IE8 and hence it will not render animated favicons at all.
  • Favicon should be a distinguishing feature of your site, so I suggest selecting a unique Favicon.
  • Preferably Favicon should be in square shape.
  • Preferable size of Favicon is either 16x16 or 32x32

See How my animated Favicon displayed by Google Chrome

I will suggest, add an image with .ico format as your Favicon, and then override that Favicon with the animated .GIF image. By doing so, you will be able to display your Favicon in the browsers which are currently not capable of rendering animated gif as favicon, and you can show your animated favicon in the browsers which is supporting it.

Adding Favicon to your blog by editing blogger Layout

From the blogger Dash board-->Layout-->edit HTML
<title><data:blog.pageTitle/></title> Find this code in the edit HTML page (refer screenshot). Just below this code add the code snippet given below.

<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>

On adding this script, please replace the 'URL of your icon file' with the correct URL of your Favicon.
Once you have this script ready, save the template and check your blog, your Favicon should be loading fine. When you refresh your blog, you should see your nice little animated Favicon just before the blog address.



4 comments:

Feeds Comments
niesh™ said...

Thank you so so much. It's work. :)

shn said...

greatttt idea...thanks....

Anonymous said...

thanks sir. check my blog for proof :D
http://oginscorner.blogspot.com

SQL learning said...

i have seen many websites with that kind of animated favicon. Thank you for telling us how to do that!

Please give your valuable comments.