I have the following in my HTML <head> tag:
<link rel="icon" href="/favicon.ico" sizes="16x16" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
Chrome on Windows 10 shows the SVG icon in preference to the ICO. I don't want this behaviour, as the SVG icon looks blurry at small sizes. My ".ico" file is pixel perfect at 16 x 16, which is the exact size of the icon in my Chrome tab. How can I make Chrome choose the ".ico" over the SVG?
If I remove the reference to the SVG, Chrome uses the ".ico", but I'd like browsers to be able to use the SVG on higher resolution screens.
I tried this:
<link rel="icon" href="/favicon.ico" sizes="16x16" />
<link rel="alternate icon" type="image/svg+xml" href="/favicon.svg" />
And I also tried removing the "sizes" attribute, but nothing I've done has made a difference.
I'm using Chrome 94.0.4606.61 (Official Build) (64-bit), but I need an answer that works more generally than just my browser.
It turns out that if I add a second 32x32 bitmap image to the "favicon.ico" file (".ico" format can contain multiple sizes in one file) and I change the sizes attribute as follows:
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32" />
Then Chrome chooses the ".ico" instead of the SVG and uses the 16x16 ".ico" image.