82

Yesterday I was browsing on https://stackexchange.com and noticed that the list of all Stack Exchange has an animated favicon:

enter image description here

How is this possible? I thought favicons were static ICO files, incapable of animation?

  • 5
    A .ico can be animated. I remember having animated icons in the late 90s/early 2000s and using as the favicon without issues. Is that something that has changed? – Alvaro Montoro Sep 22 at 17:47
  • 2
    Which browser/OS? I cannot reproduce it. I tried on Safari and Firefox running on macOS Mojave. – Nimesh Neema Oct 4 at 4:41
  • @NimeshNeema that's Firefox on macOS, but it's tied to a private userscript. See my answer below for a public script which displays this behaviour (until it's fixed with a pending pull request). – Glorfindel Oct 5 at 11:00
87

This is the infamous bug 111373 which earned the right to vote last year, and which I expect to be buying drinks for in a couple more.

  • 11
    +1 I thought you were joking, but you weren't – Jeutnarg Sep 23 at 16:49
  • 1
    Indeed, I've seriously watched this bug grow up for the past 10+ years. The handling of it is an utter embarrassment to Mozilla. – R.. Sep 23 at 17:01
  • 3
    Bug 111373 Opened 18 years ago Updated 7 months ago – Julien Colomb Oct 2 at 8:48
  • 2
    The best part is how they expanded the bug by allowing javascript to animate favicons without using animated gifs (I think that's actually what's going on in OP's question here) and then used the fact that they'd expanded the bug to try to justify the original bug as not-a-bug rather than fixing both. – R.. Oct 2 at 11:52
  • Bug is good for job market. – caot Oct 4 at 18:24
67

It turns out that animated favicons are actually possible, and some websites have them: see How to disable animated favicons?.

But this particular instance wasn't caused by the Stack Exchange website; it turned out that I have a userscript for that page in Violentmonkey, which (in the background) performs HTTP calls to the Help Center of each website in the list. Somehow (I don't know the exact details) the favicons of those websites get loaded as well and are applied to the Firefox tab, causing an animation. The last call is to Stack Overflow so that icon remains as a final state.

If you want to experience it yourself, you can install of the most popular userscripts for Stack Exchange: Global Flag Summary – it displays this behaviour as well. I'm not exactly sure in which setups (userscript manager/browser/operating system) this works, but I'm running Violentmonkey v2.11.2 in Firefox 69.0.1 on macOS 10.14.6.

  • 9
    I've just submitted a pull request to fix this issue for the Global Flag Summary user script. For other scripts that may suffer from similar bugs, the general fix is to use DOMParser to safely parse HTML from pages loaded in the background, rather than injecting it into an element created in the context of the current page's DOM. – Ilmari Karonen Sep 23 at 9:54
  • 3
    @IlmariKaronen Seems more like a feature than a bug to me, at least in this case :-) – TylerH Sep 23 at 16:05
  • @IlmariKaronen: thanks for that reference; I have a few more that cause the favicon to change on pages and it's confusing as hell. – Martijn Pieters Oct 6 at 10:46
  • and for those scripts that use jQuery to parse an HTML pages from an AJAX call: jQuery(htmlstring) creates a <div> and adds the HTML with .innerHTML, and so alters the favicon (on Firefox at least). Replacing this with (new DOMParser().parseFromString(htmlstring, 'text/html')) resolves each of the favicon-updating issues I found. – Martijn Pieters Oct 6 at 11:20
23

Favicons can be animated with javascript.

My favorite example: http://www.p01.org/defender_of_the_favicon/

This is a playable game which uses the 16x16px favicon as its display.

  • 1
    Remarkable! I can't get it to fire reliably, but still super cool. – feelinferrety Oct 3 at 4:25
11

For most browsers, favicons are static image files, but websites can take advantage of JavaScript to modify the current favicon shown, effectively animating it. Firefox also allows GIF type favicons and plays the animation accordingly.

See this Stack Overflow thread for various implementations of animated favicons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.