June 29, 2009

Animated favicon for Blogger

Have you noticed the animated T icon on this site ??? .These icons are called favicons and are present on the extreme left of the URL bar of your browser . Here you can see a screen shot of the Google's "g" favicon that I took from Mozilla Firefox. This one is an example for static favicon .











Similar to desktop icons these favicons represent each websites & it is the short code for favorites icon . But as far as Blogger blogs are concerned, they 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 the blog who's favicon is to be changed .



Go to the Blogger templates ' Layout and select edit HTML .







Create a back up copy of your blog by clicking download full template.



Now find out the following lines of code . ( Just press cntrl+f then search for it)







<data:blog.pagetitle/>





Next step is to create your own favicon .For that you may use any image and that is to be converted into .ico extension . But remember to make it 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.







Replace favicon URL with your .ico file ( May be like this http://imageshack.us/.../.ico)



Now save your template . The above procedure could be used for creating a static favicon in Blogger .



Animated favicon for Blogger :

Iconj is a web portal specially built for publishing and hosting favicons in websites and blogs.



Go to Iconj's animated favicon gallery here

Now select your favorite faviconn 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 templates ' edit HTML locate the end of style tag ]]>




Paste the above code just below that and save your template .

Refresh your browser window to check out the new animated Blogger favicon .




Bookmark this post:
Hotklix Hotklix StumpleUpon DiggIt! Del.icio.us BlinklistGoogle Yahoo Furl Technorati Simpy Spurl Reddit I'm reading: Animated favicon for Blogger ~ Twitter FaceBook

Related Posts :



0 comments:

Post a Comment