DEV Community

Discussion on: Definitive edition of "How to Favicon" in 2023

 
darrylnoakes profile image
Darryl Noakes • Edited

I used 32x32 because that was the size of my PNG favicon, and I was experimenting with that being included. No other reason.

16x16 + 32x32 + 48x48 is the second-most common combination of sizes in ICO favicons (stated in that study of thousands and thousands of favicons...).
I'd probably just put the resolution of the largest size in the ICO. Or 48x48 seems a reasonable value, just because.

Any reason you/@xcuses used 48x48?

On a slightly different line... I'm not sure what exactly Google uses to pick an icon for Google Search results, but the minimum is 48x48. I doubt specifying that size could bias Google toward the ICO instead of the SVG, but you never know. I don't know how anyone could check, other than talking to someone rather directly involved with Search.

Thread Thread
 
xcuses profile image
xcuses • Edited

Yes there are reasons why I chose 48x48:

  • afaik, some versions of the Chrome browser used to pick the most appropriate size. If the browser tab needs 32x32 (which is likely), depending on the device and Chrome version, the browser might pick a 32 ico instead of the svg
  • at the time of writing the suggested code, with an ico size of 16 or 32, my Chrome sometimes loaded both the ICO and SVG, or just the ICO. In the newest version on my desktop (114.0.5735.134), this doesn't happen with a size of 16 or 32 any more. Haven't checked on Android this time.
  • last not least, afaik, Google uses the .ico for the web search results, so a bigger .ico might scale better
Thread Thread
 
darrylnoakes profile image
Darryl Noakes

As a note, I am using 48x48 in my project.

Thread Thread
 
masakudamatsu profile image
Masa Kudamatsu

Hi @darrylnoakes and @xcuses ! Thanks a lot for your contributions. I'm currently rewriting the article to reflect what you have discovered. Writing forces me to think hard about the reason behind the HTML code, and now I'm not very sure why we need sizes="any" for the SVG favicon. Darryl's test suggests it doesn't really matter (at least for now) whether SVG favicon has sizes="any" or not. So is it for making the HTML code future-proof? Why would the SVG favicon without sizes="any" not be chosen if Chromium browsers strictly followed the expected logic?