August 01, 2008
By no means is this anything new. I received quite a view question regarding the animated favicon that I decided to write a blog entry about it.
What is a favicon anyways?
A favicon (short for favorites icon), also known as a website icon, page icon or urlicon, is an icon associated with a particular website or webpage. A web designer can create such icons in several ways and many recent web browsers can then make use of them. Browsers that support them may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.
First off, be aware of the fact that not all browser support animated favicons. Some don't display it at all others only display the first frame of an animated favicon.
Following the basic steps of integrating an animated favicon:
- 1. Create or get an animated GIF animation.
- 2. Optimize it for 16x16 pixel (optional)
- 3. Name your animated GIF file favicon.gif
- 4. Duplicate your favicon.gif and rename the duplicate to favicon.ico
- 5. Upload the favicon.gif and favicon.ico to the web root of your web server
- 6. Integrate the following code necessary for your favicon to work and paste it between the
tags of your web page
<link rel="icon" href="/favicon.gif" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
That pretty much sums it up. I hope this will help you in getting your own animated favicon on the web.








