Šime Vidas hat mir neulich über diesen Thread von subzey auf Twitter eine DM geschickt. Mein HTML für Favicons sah so aus
<!-- Warning! Typo! -->
<link rel="icon" href="/favicon.ico" size="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Das Attribut size ist dort ein Tippfehler und sollte sizes heißen. So:
<!-- Correct -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Und damit lädt Chrome nicht mehr beide Icons doppelt herunter, sondern verwendet stattdessen nur das SVG (wie es sein sollte). Etwas, worauf man achten sollte. Meine ICO-Datei ist 5,8 KB groß, also sind das jetzt 5,8 KB, die bei jedem einzelnen nicht zwischengespeicherten Seitenaufruf gespart werden, was sich für mich nicht unerheblich anfühlt.
Šime hat dies in Web Platform News #42 bemerkt
SVG-Favicons werden in allen modernen Browsern außer Safari unterstützt. Wenn Ihre Website sowohl ein ICO (Fallback) als auch ein SVG-Icon deklariert, stellen Sie sicher, dass Sie dem ICO <link> das Attribut sizes=any hinzufügen, um zu verhindern, dass Chrome das ICO-Icon herunterlädt und anstelle des SVG-Icons verwendet (weitere Informationen finden Sie im Chrome-Bug 1162276). CSS-Tricks ist ein Beispiel für eine Website, die das optimale Icon-Markup in seinem <head> hat (drei <link>-Elemente, eines jeweils für favicon.ico, favicon.svg und apple-touch-icon.png).
Der Hinweis zu CSS-Tricks ist etwas großzügig, da er nur deshalb korrekt ist, weil meine Falschaussage im Voraus beanstandet wurde. Ich glaube, die Wurzel meines Tippfehlers war Andreys Artikel, aber das wurde behoben. Andreys Artikel ist wahrscheinlich immer noch die beste Referenz für das praktischste Favicon-Markup.
In letzter Zeit benutze ich Real Favicon Generator und ich habe gesehen, dass sie für
<link rel="icon">ein PNG-Icon anstelle eines SVG verwenden; ich schätze, das ist für die Kompatibilität mit Browsern?