Animated Favicon

[MathRivest]

Hey I was wondering about animated GIF favicon. I saw that before in modern browsers. I'll do some research and try to do a pull request

[audreyfeldroy]

@MathRivest That would be great -- I haven't gotten around to looking into animated favicons much but am very interested.

[Zegnat]

I believe non-modern browsers support it just as well. I seem to remember Dean Edwards having used his animated favicon at least for the last 5 years.

His method is interesting too:

Easy. Take an animated GIF and rename it [favicon.ico]. Told you it was easy.

The file is served by the server as image/x-icon, but once downloaded you can clearly see it isn’t an ICO at all:

$ file -bI favicon.ico
image/gif; charset=binary

[mathiasbynens]

@Zegnat In which IE versions does that work?

[Zegnat]

@mathiasbynens, I am really not sure as this is coming from memory. I requested someone with a Windows system to check out the site and they told me the latest IE stable (11.0.4 (v11.0.9600.16521)) does not animate the icon but does show the first frame. Graceful degradation there.

Maybe I am just romanticising my early days of web development when I was a big fan of Dean’s IE7.js.

On my system:

• Safari (7.0.2 (9537.74.9)) only shows the first frame.
• Chrome (33.0.1750.152) only shows the first frame.
• Opera Next (21.0.1432.31) only shows the first frame.
• Firefox (28.0) animates the favicon.

It could be Dean only targeted Firefox back then. Or maybe browsers moved away from supporting this. I’ll try to test older browsers soon-ish.

If others want to take a look in different browsers, the animation should happen after 15 seconds:

[Zegnat]

Here is Roy Schestowitz in 2005:

On browser compatibility: animated favicon.ico‘s are not treated at all by Internet Explorer. A static image will not be extracted from the animation either. Instead, the default .htm icon (as defined in Windows’ filetypes) will be placed under one’s Favourites — once added, that is.

It goes on to state Netscape and Opera do not support it, but I have seen pages saying Netscape is very much compatible ([1], [2]).

Apparently the way to go when it comes to adding animation and keeping compatibility alive is by providing it as a separate icon link:

<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" href="images/favicon-animation.gif" type="image/gif" />

This may fix problems with old versions of IE but has the problem that modern browsers support image/gif as an icon format and will opt to use the favicon-animation.gif file’s first frame.

Taking it all together I propose something like this:

---

Animated Favicons

• Only Firefox and Netscape support animated GIF images as Favicon.
• Old versions of Internet Explorer do not support animated GIF images and act as if no Favicon is present.
• Other modern browsers (including modern versions of IE) support GIF images as Favicon but will only display the first frame in case of an animated GIF.

If you want to use an animated Favicon:

1. Provide a static favicon.ico file for old versions of IE, and
2. make sure the first frame can stand on its own as an icon.

This can be done by having your static favicon.ico file in the root of your website and offering the animated GIF image through a link element:

<link rel="icon" href="/animated-favicon.gif" />

As per Mathias without the shortcut link type “Internet Explorer ≤ 8 ignores the declaration entirely” and “searches for a file called favicon.ico in the site root”. Taking care of backwards compatibility.

---

It would not be wrong to include such information in the cheat sheet – though I would not recommend using it – as several popular Favicon services (e.g. favicon.cc) advertise animation without informing their users about its drawbacks. This is especially annoying for those icons that spell a word or have the logo slowly come into view: these icons result in an empty first frame and thus empty icons in most browsers.

Further things that might need to be researched:

1. According to Wikipedia, Chrome and Opera also support animated GIF images. This has not worked for me. Second opinion?
2. Also according to Wikipedia, Firefox will support APNG icons. This may be a better format to recommend than GIF. But will need to test how other browsers react to it.