Image Image Image Image Image Image Image

Animated favicon for Blogger

Monday, June 29, 2009 Things 222
Post views: counter

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 .

You may even like these posts



0 comments: Animated favicon for Blogger