How to Make Sure Browsers Only Download the SVG Version

November 5th, 2021

Šime Vidas DM’d me the other day about this thread from subzey on Twitter. My HTML for favicons was like this:

<!-- Warning! Typo! -->
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

The attribute size is a typo there, and should be sizes. Like this:

<!-- Correct -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

And with that, Chrome no longer double downloaded both icons, and instead uses the SVG alone (as it should). Just something to watch out for. My ICO file is 5.8kb, so now that’s 5.8kb saved on every single uncached page load, which feels non-trivial to me.

Šime noted this in Web Platform News #42:

SVG favicons are supported in all modern browsers except Safari. If your website declares both an ICO (fallback) and SVG icon, make sure to add the sizes=any attribute to the ICO <link> to prevent Chrome from downloading and using the ICO icon instead of the SVG icon (see Chrome bug 1162276 for more info).

The original post Favicons: How to Make Sure Browsers Only Download the SVG Version.