This keeps happening every time a new site is added. Clearly, something's broken with the sprite sheet update process.
Inspecting the CSS for the site icons, it looks like this (using the SO icon as an example):
.favicon-stackoverflow {
background-position: 0 -5832px;
}
.favicon {
width: 16px;
height: 16px;
background-color: transparent;
background-repeat: no-repeat;
background-image: url(../../img/favicons-sprite16.png?v=57f32c762460);
}
The icons are loaded from a single sprite sheet, with each icon element having a distinct background-position
that determines which part of the sprite sheet is shown for each site. Apparently, the icons in the sheet are simply listed in alphabetical order, so when new sites are added, the positions of any icons for sites that come later in the alphabet will change. That involves changing both the sprite sheet itself and the background-position
in the CSS, and if these somehow get out of sync, the wrong icons will appear.
However, they really shouldn't be getting out of sync, since both the sprite sheet and the CSS file itself have cache breakers in their URLs. See that v=57f32c762460
in the quote above? That's the current sprite sheet version ID, while the CSS file it was quoted from currently has the version ID v=13c0344d1677
. What's supposed to happen, when a new site icon is added, is that both of these version IDs are changed. So now, when you load a new page, your browser will see that the CSS URL has changed, and will reload the new version from the SE servers. And then it will see that the sprite sheet URL in that CSS file has also changed, and will reload the sprite sheet, too.
But clearly this isn't always happening. Somehow, the two files are getting out of sync. It looks like either:
- the sprite sheet version isn't getting properly updated when new icons are added, causing the browser to use the new icon offsets with an old cached sprite sheet; or
- the CSS file version isn't getting updated, causing browsers that happen to have cached the CSS file but not the sprite sheet to use the old offsets with the new sprite sheet.
(The former seems more likely, but the latter is also a possibility. Of course, there could be other possible causes, too, such as the CDN serving stale files for some reason.)
To fix this, some SE developer need to take a close look at the new site deployment process, and figure out why it isn't correctly updating both of these cache breakers (or purging CDN caches, or whatever the actual issue is).
Or, as an alternative solution, SE could get rid of the sprite sheet entirely, and switch to embedding icons in CSS with data URIs. That would get rid of the synchronization issues, and perhaps even improve page loading times. It works for Wikipedia, there's no reason why it couldn't work here too.