How To Find Out Which Favicon A Browser Actually Uses

I have a new website with a set of favicon images auto generated from a source file using Real Favicon Generator, and there are: 9 Apple favicons 1 Android favicon 3 named favicon

Solution 1:

You can use the Compatibility test of RealFaviconGenerator. The test will ask you which icon you see. But there is a twist: the test is not really for the end-user, so you will have to right-click the image corresponding to the icon you see, inspect it, and look at the alt attribute of the img tag. But that will prevent you from playing with 20+ images to make them different. Much easier!

Full disclosure: I'm the author of RealFaviconGenerator.

Note: I would be interested in your investigations to fix the answer you mention (I'm his author).

Solution 2:

Using the Inspect Element, or just Inspect tool, available in Firefox and Chromium. The Network tab shows all http operations related to reload. Filtering by 'favicon' most likely peeks the correct operation, when the page is reloaded.

The fact that the browser downloads an image is a strong hint of what gets displayed. Yet, doubts can persist, e.g. which part of an .ICO. Unfortunately, the tab is a computed element not visible in the (computed) page source.

On Firefox, the iconuri is visible in the json code of exported bookmarks.