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
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?
I don't know how anyone could check, other than talking to someone rather directly involved with Search.
Make a website whose favicon variants (SVG, the different sizes in the ICO file, etc.) look visibly different, maybe also include some unique text on the page to find the page easily on Google Search, publish the link on websites that Google visits often or ask Google to index your page, and check what favicon ends up on Google Search.
In the favicons, ideally also include an identifier of the setup (combination of HTML code and favicon.ico sizes) that you're testing.
Yes there are reasons why I chose 48x48:
As a note, I am using 48x48 in my project.
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 hassizes="any"or not. So is it for making the HTML code future-proof? Why would the SVG favicon withoutsizes="any"not be chosen if Chromium browsers strictly followed the expected logic?@darrylnoakes
Google's article "Define a favicon to show in search results" says "While the minimum size requirement is 8x8px, we recommend using a favicon that's larger than 48x48px".
Old versions of Google Search used to recommend using any multiple of 48, including 48.
Make a website whose favicon variants (SVG, the different sizes in the ICO file, etc.) look visibly different, maybe also include some unique text on the page to find the page easily on Google Search, publish the link on websites that Google visits often or ask Google to index your page, and check what favicon ends up on Google Search.
In the favicons, ideally also include an identifier of the setup (combination of HTML code and favicon.ico sizes) that you're testing.
A general recommendation not only for this experiment: You can change the favicon contents, but don't change their URL frequently.