The Mystery of the Changing Favicon

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:

Turns out that was exactly the case. When multiple icons are embedded in an .ico file, Firefox will choose the last one.

The .ico file 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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.