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

<!-- Warning! Typo! -->
<hyperlink rel="icon" href="https://css-tricks.com/favicon.ico" dimension="any">
<hyperlink rel="icon" href="https://css-tricks.com/favicon.svg" kind="picture/svg+xml">

The attribute dimension is a typo there, and needs to be sizes. Like this:

<!-- Correcxt -->
<hyperlink rel="icon" href="https://css-tricks.com/favicon.ico" >
<hyperlink rel="icon" href="https://css-tricks.com/favicon.svg" kind="picture/svg+xml">

And with that, Chrome not double downloaded each icons, and as a substitute makes use of the SVG alone (because it ought to). Simply one thing to be careful for. My ICO file is 5.8kb, so now that’s 5.8kb saved on each single uncached web page load, which feels non-trivial to me.

Šime famous this in Internet Platform Information #42:

SVG favicons are supported in all fashionable browsers besides Safari. In case your web site declares each an ICO (fallback) and SVG icon, ensure to add the sizes=any attribute to the ICO <hyperlink> to prevent Chrome from downloading and utilizing the ICO icon as a substitute of the SVG icon (see Chrome bug 1162276 for more information). CSS-Methods is an instance of an internet site that has the optimum icon markup in its <head> (three <hyperlink> parts, one every for favicon.ico, favicon.svg, and apple-touch-icon.png).

That’s word about CSS-Methods is a bit beneficiant in that it’s solely appropriate as a result of my incorrectness was identified forward of time. I believe the basis of my typo was Andrey’s article, however that’s been fixed. Andrey’s article continues to be possible the perfect reference for probably the most sensible favicon markup.

#Favicons #Browsers #Obtain #SVG #Model

Leave a Reply

Your email address will not be published. Required fields are marked *