複数のFaviconリンクタグの順序：正しい並べ方ガイド

SVG favicon、2つのPNGフォールバック、そしてレガシーブラウザ向けのICOをアップロードしたのに、SafariのタブにはICOが表示され続ける——ファイルは問題ありません。原因はfavicon linkタグの順序です。

ブラウザは最初に見つけた<link>タグをそのまま採用するわけではありません。WHATWG HTML仕様によれば、ユーザーエージェントはsizes、media、type属性に基づいて最適なアイコンを選択します。複数のアイコンが同等にマッチした場合、ブラウザは最後に宣言されたものを使用することがあります。つまり、linkタグの順序は見た目の問題ではなく、実際に効くレバーなのです。

前提条件

サイトのHTML <head>にアクセスできること、そして少なくとも2つのfaviconファイル（SVG、PNG、またはICO）を用意していることが必要です。HTML linkタグの基本を理解していると役立ちます。復習にはfavicon HTMLコード例のチートシートをご覧ください。

ステップバイステップ：複数のfavicon linkタグを並べる

ステップ1：ブラウザの選択ルールを理解する

ブラウザは、宣言された各アイコンを現在のコンテキスト（表示密度、タブサイズ、ダークモード設定、サポート形式）に対してスコアリングします。最もマッチしたものが勝ちます。同点の場合は最後にマッチした宣言がデフォルトになります。順序が悪いスタックでは、モダンブラウザが鮮明なSVGをスキップしてぼやけたPNGを取得してしまうことがあります——ベクターを完全にサポートしていてもです。

ステップ2：最も具体的なものから最も一般的なものへ並べる

最も能力の高い形式を最初に、普遍的なフォールバックを最後に配置します：

&lt;link rel='icon' type='image/svg+xml' href='/icon.svg'&gt;
&lt;link rel='icon' type='image/png' sizes='32x32' href='/icon-32.png'&gt;
&lt;link rel='icon' type='image/png' sizes='16x16' href='/icon-16.png'&gt;
&lt;link rel='icon' href='/favicon.ico'&gt;

SVGを最初に置くのは、あらゆるピクセル密度にスケールするからです。PNGフォールバックはSVG faviconをサポートしないブラウザ向けに続きます。ICOは、形式を宣言しないレガシーシステム向けの普遍的なセーフティネットとして最後に置きます。

ステップ3：type属性を追加して曖昧さをなくす

typeがないと、ブラウザはICO形式（歴史的なデフォルト）を仮定し、PNGやSVGを完全にスキップする可能性があります。type='image/svg+xml'やtype='image/x-icon'を追加すると、ブラウザに何を期待すべきかを正確に伝え、互換性のないファイルをダウンロードせずにスキップできます。

ステップ4：sizesを使って実際のコンテキストに合わせる

sizes属性は、各アイコンが対象とするレンダリングコンテキストを記述します。16×16 PNGはブラウザタブに適しています。32×32 PNGはタスクバーや高DPIブックマークバーに合います。iOSホーム画面には、別途Apple Touch Iconを宣言します：

&lt;link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'&gt;

Apple Touch Iconは別の選択パスに従い、通常のfaviconとタブスロットを競合しません——そのため、メインのfaviconスタックの後に配置します。

ステップ5：ダークモードSVGを先頭に置く

ダークモードをサポートする場合、media属性を使って2つのSVGバリアントを宣言できます：

&lt;link rel='icon' type='image/svg+xml' href='/icon-light.svg' media='(prefers-color-scheme: light)'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/icon-dark.svg' media='(prefers-color-scheme: dark)'&gt;
&lt;link rel='icon' type='image/svg+xml' href='/icon.svg'&gt;

特定の環境では1つのメディアクエリだけがマッチするため、ブラウザはそれを選択します。フィルタなしのSVGは、メディアクエリをまったく尊重しないブラウザ向けの最終フォールバックとして機能します。

よくある落とし穴

ICOを最初に置く。モダンブラウザはICOタイプにマッチし、SVGを評価する前にそれを取得する可能性があります。ICOは常に最後に置きましょう。
type属性を省略する。ブラウザはデフォルトの仮定としてICOにフォールバックし、PNGやSVGを完全に隠してしまうことがあります。
rel='shortcut icon'を使う。これはレガシーIE時代の属性です。WHATWG仕様ではrel='icon'が標準と定義されています。ほとんどのブラウザは古い形式もまだ解析しますが、何も追加せず、エッジケースで選択を混乱させる可能性があります。
サイズをグループ化せずに混在させる。同じレンダリングスロットを対象とする場合、32×32 PNGの後に16×16 PNGを散らばめないでください。同じコンテキストにサービスするサイズはまとめてグループ化しましょう。
キャッシュバスティングを忘れる。ブラウザはfaviconを積極的にキャッシュします。タグを並べ替えてもアイコンが更新されない場合は、?v=2のようなバージョンクエリ文字列を追加します——完全なワークフローはfaviconキャッシュバスティングガイドをご覧ください。

まとめ

ブラウザはスタックから最適なアイコンを選び、同点の場合は最後の宣言が優先されるため、順序が重要です。最良の形式を最初に、フォールバックを後に置き、typeとsizes属性を追加してすべての曖昧さをなくしましょう。並べ替えてもアイコンが更新されない場合、次の容疑者は通常キャッシュです。Mzu favicondlを使ってクリーンで正しいサイズのアイコンパッケージを生成し、手動のリサイズ手順を完全にスキップしましょう。