83
18
Yesterday I was browsing on https://stackexchange.com and noticed that the list of all Stack Exchange has an animated favicon:
How is this possible? I thought favicons were static ICO files, incapable of animation?
Glorfindel
Posted 2019-09-20T12:01:26.593
Reputation: 2 942
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.
Glorfindel
Posted 2019-09-20T12:01:26.593
Reputation: 2 942
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 – 2019-09-23T09:54:55.6333@IlmariKaronen Seems more like a feature than a bug to me, at least in this case :-) – TylerH – 2019-09-23T16:05:42.897
@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 – 2019-10-06T10:46:18.367
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.
92
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.
R.. GitHub STOP HELPING ICE
Posted 2019-09-20T12:01:26.593
Reputation: 1 783
12+1 I thought you were joking, but you weren't – Jeutnarg – 2019-09-23T16:49:44.923
1Indeed, I've seriously watched this bug grow up for the past 10+ years. The handling of it is an utter embarrassment to Mozilla. – R.. GitHub STOP HELPING ICE – 2019-09-23T17:01:33.087
3Bug 111373 Opened 18 years ago Updated 7 months ago – Julien Colomb – 2019-10-02T08:48:18.407
2The 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.. GitHub STOP HELPING ICE – 2019-10-02T11:52:05.283
Bug is good for job market. – caot – 2019-10-04T18:24:27.723
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.
Mnebuerquo
Posted 2019-09-20T12:01:26.593
Reputation: 541
1Remarkable! I can't get it to fire reliably, but still super cool. – feelinferrety – 2019-10-03T04:25:07.680
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.
FThompson
Posted 2019-09-20T12:01:26.593
Reputation: 365
5A .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 – 2019-09-22T17:47:49.190
2Which browser/OS? I cannot reproduce it. I tried on Safari and Firefox running on macOS Mojave. – Nimesh Neema – 2019-10-04T04:41:34.817
@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 – 2019-10-05T11:00:07.580