Search code examples
htmlfirefoxbrowserfavicon

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 favicons
  • 1 Safari pinned SVG
  • 1 json manifest
  • 1 set of Microsoft tile image/colour

Obviously most of these can be placed for their respective vendors - Apple, Microsoft tiles, etc.

I have an issue in that running the website on Firefox, I want the favicon it uses to change but I do not know which one it actually uses?

I have read this question but the stated answer on here is incorrect and

Firefox and Safari will use the favicon that comes last.

is no longer true.

Obviously it's a time consuming repetition to go through ~15 images to find the one that gets changed on one browser, and I actually found that Firefox 42 selects the 96x96 dimension favicon, rather than the last one presented.

Question:

Is there a way [aside from trial and error] to load a page and then find a declaration in the browser defining which image from the HTML head is used as the page favicon in that browser?

Additional Information:

There is an incomplete reference list here. However, this misses out various versions and various OS, and I can only assume these details where found from trial and error.

While this is useful, the various links and solutions on that question give a single URL result for an automated process, such as 

http://www.google.com/s2/favicons?domain=www.domain.com

Which works fine in returning a valid favicon but it does not return the favicon that my browser uses when I tested it.

Other links from that question are similar, most only returned a 16x16 favicon and many clearly did not return the image used. Some probably didn't return the image used... it is hard to differentiate 16x16px sometimes!

Solution

  • 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).