Favicons: So stellen Sie sicher, dass Browser nur die SVG -Version herunterladen

Kürzlich hat Šime Vidas einen Twitter -Thread über Favicon HTML hervorgehoben. Mein anfänglicher Favicon -Code enthielt einen Tippfehler:

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

Der richtige Code verwendet sizes anstelle der size :

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

Diese Korrektur verhindert, dass Chrome sowohl die ICO- als auch die SVG -Favicons herunterlädt und sicherstellt, dass nur das SVG (das bevorzugte Format) verwendet wird. Meine ICO-Datei ist 5,8 KB und repräsentiert einen nicht zu vernachlässigen Speichern pro Seite.

Šime erwähnte dies in Webplattform News Nr. 42 und stellte fest, dass SVG Favicons zwar von allen modernen Browsern mit Ausnahme von Safari unterstützt werden, die Erklärung sowohl ICO als auch SVG die sizes="any" Attribut auf dem ICO erfordert<link> Tag, um zu verhindern, dass Chrome den ICO priorisiert. (Weitere Informationen finden Sie unter Chrome Bug 1162276). Er zitierte CSS-Tricks als Beispiel für ein optimales Markup, obwohl dies erst nach der Identifizierung des Fehlers der Fall war. Der ursprüngliche Tippfehler stammt wahrscheinlich aus einem früheren Artikel (jetzt korrigiert), aber Andreys Artikel bleibt eine wertvolle Ressource für die praktische Favicon -Implementierung.

Das obige ist der detaillierte Inhalt vonFavicons: So stellen Sie sicher, dass Browser nur die SVG -Version herunterladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!