7

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!

Community
  • 1
  • 1
Martin
  • 22,212
  • 11
  • 70
  • 132
  • Possible duplicate of [Get website's favicon with JS](http://stackoverflow.com/questions/2057636/get-websites-favicon-with-js) – AGE Nov 23 '15 at 14:50
  • @AGE the referenced page is useful but that question leans towards getting a single favicon result, which is not based on the browser used to read the page. (for example using the google link which seemed the most useful, it consistently returned favicons that differ from what is actually displayed in my browser). – Martin Nov 23 '15 at 15:01
  • Does it seem viable for you then to extend this functionality to look into multiple favicons? I am personally not familiar with doing this, but worst case scenario (if all else fails) you could jump on http://chat.stackoverflow.com/ and ask around. – AGE Nov 23 '15 at 15:04
  • @AGE I mean the favicon addresses returned are all collected by automated process, as in my edited question above - but the automated process does not give the same result as my browser. My question is more browser specific. – Martin Nov 23 '15 at 15:05

2 Answers2

5

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

philippe_b
  • 38,730
  • 7
  • 57
  • 59
  • I did use the favicon compatibility tester out of general helpfulness and curiosity -- the icon Firefox uses on my system (Windows 7, FF 42.0 ) is 96x96 PNG , although I found that out by trial and error before doing the compatibility test. I think my only solution is to ask for this ability as an upgrade or an additional plugin to firefox to display the favicon data from the Firefox meta. Cheers – Martin Nov 24 '15 at 17:03
  • @Martin Interesting. I get the 32x32 PNG icon on Win 10 + FF 42.0. I'm editing my answer in the other question to reflect this. – philippe_b Nov 24 '15 at 17:11
  • That is genuinely interesting..... I wonder why they reduce the size for later versions of windows? hah, perhaps it'll be 64x64 sized on Windows 8? – Martin Nov 24 '15 at 17:20
  • I'm quite sure this is pure luck. FF doesn't implement the `size` attribute, so the choice might be due to some weird side effect. – philippe_b Nov 24 '15 at 20:21
  • this is the sort of thing that an ability to view the defined choice can be very useful. Alas I'm not signed up to anything where I can put that as an issue to work on for future versions or plugins. . . . yet. Also which was the "other" question? :) – Martin Nov 24 '15 at 20:27
5

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.

Ale
  • 887
  • 10
  • 14