search

audreyfeldroy / favicon-cheat-sheet

Obsessive cheat sheet to favicon sizes/types. Please contribute! (Note: this may be in flux as I learn new things about favicon best practices.)
MIT License
9.85k stars 413 forks source link

Animated Favicon #1

Open MathRivest opened 10 years ago

MathRivest commented 10 years ago

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 commented 10 years ago

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

Zegnat commented 10 years ago

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 commented 10 years ago

@Zegnat In which IE versions does that work?

Zegnat commented 10 years ago

@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:

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:

Frames of Dean’s GIF-icon.

Zegnat commented 10 years ago

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

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.