How can this Stack Exchange site have an animated favicon?

Solution 1:

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.

Solution 2:

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.

Solution 3:

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.

Solution 4:

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.