How to Create Animated Favicon

Blogging Tips August 8th, 2009

Have you ever visited a blog or website with animated favicon? Although not many people are using animated icon but it is cool to know this feature as our blogging experience. When someone visited your blog, it will display an animated icon next to the address bar of their browser. Creating an animated favicon is as easy as paste one lines of code into the head section of your html page. Below is a simple instruction on how to create and put the animated icon into your blog.

Step 1

Create an animated image in .gif extension from here or find an animated icon on the web such as below animated icon.

Step 2

Put the favicon.ico file into the root folder of your blog directory. Insert the following HTML tag into the HEAD section of your page you want it to appear.
<link rel="icon" href="favicon.ico">
Your icon will appear eventually.

Step 3

In order to make the icon animated, you need to create a GIF file which support animated picture and then you can put the following code
<link rel=”icon” href=”animated_favicon.gif” type=”image/gif” >
Refresh your browser and the animated icon will show.

Conclusion

This is simple steps to generate animated favicon for your blog which can make your blog more interactive. Although sometimes it may be looks annoying but for blogger who have unique preference, this could be a good tips for them to create their own animated logo icon