.ico file may contain multiple images but only one is displayed

[karlcow]

ICO file format has the possibility to have multiple frames (different images) in one unique file.

• Safari displays the first frame
• Firefox/Chrome displays the last frame

This can create compatibility issues. There's at least one website where the first frame is transparent, and the favicon.ico image is in the last frame.

[karlcow]

It is necessary to create a test favicon.ico image with different frames maybe a letter on each frame, so we can differentiate them.

[gsnedders]

Note that, e.g., https://learn.microsoft.com/en-gb/previous-versions/ms997538(v=msdn.10) calls them images within an ICO file (or within an icon resource, but where an ICO file contains a single icon resource). We probably want something more like "the last image in the image directory in an ICO file".

"Frames" to me is much more reminiscent of animation (though there's a related question here—what happens if you use an APNG as an icon? or put an APNG as the last image in an ICO file?).

[miketaylr]

Is WebKit willing to change its implementation to align with Gecko and Chromium? I guess we could spec out the Gecko and Chromium behavior either way...

[karlcow]

It would be to have a test suite of ICO files, with different characteristics. Anyone from Microsoft who would know such a test suite?
A kind of a technical spec for it

[karlcow]

It's slightly more complicated in Firefox.
https://searchfox.org/mozilla-central/source/toolkit/components/places/nsFaviconService.cpp#62-105

[karlcow]

@miketaylr do you know where is the algorithm for parsing favicon container in ICO for Chromium?

[karlcow]

So the Firefox Algorithm goes (if I understood, please fix it if there is a mistake)

1. Detect if animated or not
2. If not animated
   1. get the sizes of all images
   2. if not empty and more than one image with size
      1. keep only images which are squares
      2. check if the size is compatible with what Gecko wants which is one of these 192, 144, 96, 64, 48, 32, 16
      3. Check if some sizes are duplicated to keep only the non duped
3. Then pick the image with the largest side

There is an optimization done later on.

[miketaylr]

@miketaylr do you know where is the algorithm for parsing favicon container in ICO for Chromium?

https://source.chromium.org/chromium/chromium/src/+/main:ui/gfx/icon_util.h is probably a good place to start

(https://source.chromium.org/chromium/chromium/src/+/main:components/favicon/ is where the favicon component lives)