Alvaro Montoro recently had a weird issue where the favicon shown in Firefox differed from that in other browers, even though it was the same favicon.ico file.
It was puzzling: the favicon worked differently depending on the browser. Chrome and Safari showed the correct favicon (with the corporate logo) while Firefox showed a completely different logo (with some letters.) And we double-checked that the file was the same, not an old cached version. It was the exact same file… but it was different.
As I hinted on Twitter:
Could it be that this is an ico file that contains multiple icons (which here get represented as layers in the image editor)?
— Bramus (@bramus) January 25, 2022
Turns out that was exactly the case. When multiple icons are embedded in an .ico file, Firefox will choose the last one.
The
.icofile had multiple layers (or icons) in it. The top layer (first icon) was the one that Chrome and Safari displayed, and the bottom layer (last icon) was the one that Firefox was displaying.
The Mystery of the Changing Favicon →
~
When it comes to favicons, the HTML spec currently reads:
If there are multiple equally appropriate icons, user agents must use the last one declared in tree order at the time that the user agent collected the list of icons.
No word on resources with multiple embedded icons though … so currently either behavior can be right. I’ve filed an issue at the WHATWG, asking to clarify the spec text on this.
whatwg/html Issue #7584: Icon sources with multiple embedded icons →