How to create an animated favicon

What is a favicon?

A favicon (short for “favorites icon”), also known as a page icon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many graphical web browsers —such as recent versions of Internet Explorer, Firefox, Mozilla, Opera, Safari, iCab, AOL Explorer, Epiphany, Konqueror, and Flock—can then make use of them. Browsers that support favicons 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.

Guidelines

The following are guidelines for displaying a favicon on your website:

• The link elements must be inside the head element (between the opening and closing head tag) in the HTML.
• The image can usually be in any image format supported by the web browser, the major exception being IE, which only supports ico.
• The .ico file format will be read correctly by all browsers that can display favicons.
• Use the appropriate color depths (ICO: 16X16;4, 8, 24 bpp—i.e. 16, 256 and 16 million colors GIF: use 16×16 in 256 colors PNG: use 16×16 in either 256 colors or 24-bit).
• I have found that you do not have to place html on your website.  You can just place a favicon.ico in the root directory of your website, but it may take longer to show up in some browers.
  • http://pipa.ws
  • http://www.pod1.com/
  • http://schestowitz.com/

Creating an animated favicon

Animated favcons are easy to create.  After following the guidelines from above, you just need to create an animated gif and rename it: favicon.ico.  It is currently not supported in Internet Explorer.

Examples of sites that have animated favicons: