Have you ever noticed some kind of icon in the browser URL box when you load certain web pages? These icons are called favicons, and they usually appear on the extreme left of the URL bar of your browser. Here, you can see a screenshot (given below) of the Google’s “g” favicon that I took from Mozilla Firefox. This one is an example for static favicon, but it is also possible to have an animated favicon. In this tutorial I’ll show you how you can enable an animated favicon in Blogger blogspot blogs.
Similar to desktop icons these favicons represent each website & it is the short code for favorites icon. However, as far as Blogger blogs are concerned, they all have a default favicon built onto them. The following procedure will explain how to change the default Blogger favicon with animated favicon. Remember to check the Blogger terms and conditions before you change the favicon.
First of all you have to open your Blogger dashboard then select a blog, of which the favicon has to be changed.
Now find out the following lines of code. ( Just press cntrl+f then search for it)
<head><b:include data='blog' name='all-head-content'/><title><data:blog.pageTitle/></title><b:skin><![CDATA[
Next step is to create your own favicon. For that you may use any image, and that has to be converted into .ico extension. Search Google, you’ll find some online favicon converters or creators. Remember to make the .ico file small, sharp and square shaped so that it is visible.
Once it is created, upload it to any photo-sharing website like imageshack.us or any hosts supporting icon files.
In between second and third line of the code shown above, add following line with necessary editing.
<link rel=”favicon url” href=”/favicon.ico” />
Replace favicon URL with your .ico file ( Something like this http://imageshack.us/…/.ico)
Now save your template. The above procedure could also be used for setting up a static favicon in a blogger blog.
Get Animated favicon .ico files for Blogger:
Iconj.com is a web portal specially built for publishing and hosting favicons in websites and blogs.
Open thier website and go to animated favicon gallery.
Now select your favorite favicon from the galley and click on HTML embed code. This opens a new windows where you can see 3 favicon linking options.
Choose HTML Embed Code (Hot Linking Code) and copy all the code from the display box.
Now in your Blogger template’s edit HTML locate the end of style tag ]]></b:skin>
Paste the above code just below that and save your template. That’s it, you’ve setup an animated favicon for your blog.