How to make Chrome use favicon.ico at 16x16 instead of SVG?-CodePudding

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

CodePudding user response：

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.