Favicons：SVGバージョンのみをダウンロードするブラウザを確認する方法

最近、šimeVidasはFavicon HTMLについて議論するTwitterスレッドを強調しました。私の最初のFaviconコードにはタイプミスが含まれていました。

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

正しいコードは、 sizeの代わりにsizesを使用します。

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

この修正により、ChromeはICOとSVGファビコンの両方をダウンロードすることを防ぎ、SVG（優先形式）のみが使用されるようにします。私のICOファイルは5.8kbで、ページの負荷あたりの無視できない保存を表しています。

シャイムはこれをWebプラットフォームニュース＃42で述べました。SVGファビコンはSafariを除くすべての最新のブラウザによってサポートされているが、ICOとSVGの両方を宣言するにはICOのsizes="any"属性が必要であると宣言する<link>ChromeがICOの優先順位付けを防ぐためのタグ。 （詳細については、Chrome Bug 1162276を参照してください）。彼はCSS-Tricksを最適なマークアップの例として引用しましたが、これはエラーが特定された後にのみ当てはまりました。元のタイプミスは、以前の記事（現在は修正された）から生じた可能性がありますが、Andreyの記事は実用的なFavicon実装のための貴重なリソースのままです。

以上がFavicons：SVGバージョンのみをダウンロードするブラウザを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。