Š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=”/favicon.ico” measurement=”any”>
<hyperlink rel=”icon” href=”/favicon.svg” sort=”picture/svg+xml”>
The attribute measurement is a typo there, and must be sizes. Like this:
<!– Correcxt –>
<hyperlink rel=”icon” href=”/favicon.ico” sizes=”any”>
<hyperlink rel=”icon” href=”/favicon.svg” sort=”picture/svg+xml”>
And with that, Chrome now not double downloaded each icons, and as an alternative 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 Net 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, be sure that to add the sizes=any attribute to the ICO <hyperlink> to forestall Chrome from downloading and utilizing the ICO icon as an alternative 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> components, one every for favicon.ico, favicon.svg, and apple-touch-icon.png).
That’s be aware about CSS-Methods is a bit beneficiant in that it’s solely right as a result of my incorrectness was identified forward of time. I believe the foundation of my typo was Andrey’s article, however that’s been mounted. Andrey’s article remains to be seemingly the perfect reference for essentially the most sensible favicon markup.
The submit Favicons: Tips on how to Make Certain Browsers Solely Obtain the SVG Model appeared first on CSS-Methods. You’ll be able to help CSS-Methods by being an MVP Supporter.
0
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!