先週、クライアントのサイトを監査していたら、<head>内に6つもfaviconタグが埋め込まれているのに、Safariではどれも動作していないというケースに遭遇しました。2014年から2024年まで、5つの異なるStack Overflowの回答から断片的にコピペした結果です。本番サイトが実際にどう構造化しているかを見なければ、断片的なアドバイスをコピペするだけでは意味がありません。

この記事では、2026年のブラウザでも通用する正確なHTMLパターンを解説します。主要企業が実際に使っているコードを検証し、なぜそのrel属性を選んだのかを分析し、すぐに使えるクリーンなテンプレートを提供します。

本番サイトが実際に使っているパターン

まずはGitHubを見てみましょう。毎日何百万人もの開発者が利用するGitHubのfavicon設定は、実戦で鍛え抜かれています。ソースコードを覗くと、モダンブラウザ向けにSVGを優先し、古いブラウザ向けにPNGでフォールバックする、非常に意図的なパターンが見えてきます。

GitHubのアプローチはシンプルです。モダンブラウザには1つのSVG、レガシーサポートには1つのICO、iOS用にApple Touch Icon。もはや15種類ものPNGサイズを配信していません。Stripeもほぼ同様の手法を採用しており、両社ともSVGを最優先の情報源として扱っています。

GitHubのパターン：SVGファースト

GitHubはSVG内にメディアクエリを埋め込み、ダークモードに自動対応しています。つまり、1つのファイルでOSのテーマに適応し、JavaScriptは不要です。実際のパターンはこちら：

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

順序に注目してください。モダンブラウザは最初にマッチしたタグを優先するため、SVGを先に配置しています。ICOはTridentや旧Edgeなどの古いエンジン向けのフォールバックです。ICOにsizes='any'を指定することで、複数の解像度を含むことをパーサーに伝え、不要なDOM解析を防ぎます。

Stripeのパターン：明確な分離

Stripeは少し異なるアプローチを取っています。ダークモード用のSVGを、media属性を持つ別の<link>タグで完全に分離しています。これは、ロゴがダーク背景で単なる色の切り替えではなく、まったく異なるアートワークを必要とする場合に有効です。

<link rel='icon' href='/favicon-light.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon-dark.svg' type='image/svg+xml' media='(prefers-color-scheme: dark)'>

私はGitHubのアプローチのほうが好みです。1つのファイルを管理するほうが2つより簡単だからです。ただし、ブランドガイドラインでダークモード用に異なるシルエットが求められる場合は、Stripeのパターンが適しています。

ステップバイステップ：2026年対応のfaviconスタックを構築する

どのタグが必要か迷うのはもう終わりにしましょう。以下が、堅牢なfavicon設定を構築するための正確で順序立てたプロセスです。99%のデバイスをカバーする最小限のスタックに焦点を当てます。

ステップ1：ファイルを準備する

必要なファイルは正確に3つだけです。PWAを構築するのでなければ、大量のレガシーPNGフォルダを生成する必要はありません。元のSVGと、高解像度の512x512 PNGを用意してください。Mzu favicondlにアクセスして、そのPNGをマルチ解像度ICOとApple Touch Iconに自動変換しましょう。

ステップ2：HTMLタグを記述する

これらのタグは、<head>内のできるだけ上部、理想的には文字コード宣言の直後に配置してください。ブラウザはfaviconを優先的に解析するため、配置が遅れるとデフォルトのドキュメントアイコンが一瞬表示されることがあります。

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>

この3行のスタックがあれば、標準的なWebサイトには十分です。なぜrel='shortcut icon'がもはや使われないのかについては、link rel shortcut iconのレガシー問題に関する詳細記事をご覧ください。

ステップ3：DevToolsで検証する

Chrome DevToolsを開き、Applicationタブに移動します。ManifestとIconsのセクションを確認してください。SVGがリストに表示されない場合は、パスに問題があります。サブディレクトリでのルーティングバグを防ぐため、常にサイトルートからの絶対パス（/で始まる）を使用してください。

サンプルをコピーするときのよくある落とし穴

正しいHTMLを使っていても、問題は発生します。以下は、開発者がWeb上のfavicon link rel iconのサンプルをコピーする際に頻繁に遭遇する3つの問題です。

1. 競合するtype属性

ICOファイルにtype='image/png'を指定すると、Safariはそれを無視します。ブラウザはMIMEタイプのヒントを信頼します。間違っていると、タグは静かに無視されます。常にtype属性が実際のファイル形式と一致していることを確認してください。

2. タグの順序の誤り

一部の古いブラウザは最後に見つけたfaviconタグを採用します。モダンブラウザは通常、最初にレンダリングできるものを採用します。SVGの前に16x16 PNGを配置すると、Chromeは鮮明なベクターではなく、ぼやけたPNGをレンダリングする可能性があります。常に最高品質のソースを最初に配置してください。

3. サイズヒントの欠落

複数のPNGを配信する場合は、sizes属性を正確に宣言する必要があります。ブラウザはすべてのファイルをダウンロードして寸法を確認するわけではありません。sizesを省略すると、ブラウザは推測しますが、たいてい間違った推測をします。

必要なすべての解像度の完全な内訳については、faviconサイズガイドをご覧ください。ただし、正直なところ、SVGを配信しているのであれば、そのリストのほとんどは無視して構いません。

ミニマリストアプローチが最適

プロフェッショナルなfavicon設定のために、12ものHTMLタグは必要ありません。GitHubとStripeの例が証明しているように、クリーンでSVGファーストの戦略が完璧に機能します。3つのファイルを使い、3行のHTMLを記述し、ダークモードの実装をテストしてください。OSのテーマを切り替えてもSVGの色が変わらない場合は、SVGファイル自体にCSSメディアクエリを追加する必要があります。それはまた別の機会に取り上げますが、ここで構築したHTMLの基礎はしっかりしています。