Favicons: How to Make Sure Browsers Only Download the SVG Version

Recently, Šime Vidas highlighted a Twitter thread discussing favicon HTML. My initial favicon code contained a typo:

<link href="/favicon.ico" rel="icon" size="any"><link href="/favicon.svg" rel="icon" type="image/svg xml">

The correct code uses sizes instead of size:

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

This correction prevents Chrome from downloading both the ICO and SVG favicons, ensuring only the SVG (the preferred format) is used. My ICO file is 5.8kb, representing a non-negligible saving per page load.

Šime mentioned this in Web Platform News #42, noting that while SVG favicons are supported by all modern browsers except Safari, declaring both ICO and SVG requires the sizes="any" attribute on the ICO <link> tag to prevent Chrome from prioritizing the ICO. (See Chrome bug 1162276 for details). He cited CSS-Tricks as an example of optimal markup, though this was only true after the error was identified. The original typo likely stemmed from a previous article (now corrected), but Andrey's article remains a valuable resource for practical favicon implementation.

The above is the detailed content of Favicons: How to Make Sure Browsers Only Download the SVG Version. For more information, please follow other related articles on the PHP Chinese website!