React でファビコンが表示されない？その解決法
React は DOM ノードにレンダリングし、head には一切触れないため、ファビコンは静的な HTML ファイルに置かれます。タブが空白なら、そのファイルの link タグが誤っているか、アイコンが src からインポートされて固定パスに存在しなくなっています。
head はコンポーネントではなく静的ファイルです
ブラウザは head を解析する時点でファビコンをリクエストします。これは React がマウントされるよりずっと前です。そのため icon の link は HTML の骨組みに書かれている必要があります。Vite ではプロジェクトルートの index.html、Create React App では public/index.html です。
壊れる原因は主に二つです。Create React App では、%PUBLIC_URL% プレースホルダーを省いた href はローカルでは動作しても、ドメインルート以外では 404 になります。どの React プロジェクトでも、アイコンを src からインポートするとバンドラーに渡され、コンテンツハッシュ付きの名前に変更されるため、/favicon.ico では何も応答しなくなります。
原因を突き止める
- 1
/favicon.ico を直接開く
404 なら、そのパスでファイルが配信されていません。ビルドかパスの問題です。読み込めるならファイルは問題なく、link タグかキャッシュが原因です。
- 2
ビルド後の index.html を読む
ソースではなくビルド出力の中を見ます。icon の href が実在のパスに解決されているか、CRA なら %PUBLIC_URL% がそのまま残らず置換されているかを確認してください。
- 3
アイコンを src からインポートするのをやめる
public/ のファイルは名前を保ったまま固定パスで応答します。src/ からのインポートはハッシュ化されます。ファビコンは public/ に置かなければなりません。
React でファビコンが表示されない：よくある質問
React のファビコンが表示されないのはなぜですか？
ほとんどの場合、index.html の link タグがファイルの無い場所を指しているか、アイコンを src からインポートしてハッシュ付きのファイル名になったかのどちらかです。/favicon.ico を直接開いて、そのパスでファイルが配信されているかどうかを確認してください。
サブパスにデプロイしたらファビコンが 404 になったのはなぜですか？
href がサブディレクトリではなくドメインルートを基準に解決されたためです。Vite なら vite.config.js で base を設定し、Create React App なら homepage フィールドを設定してテンプレートで %PUBLIC_URL% を使い、ビルド後の index.html を確認してください。
React のコードでファビコンをインポートする必要はありますか？
いいえ。public/ のファイルはそのままビルド出力にコピーされ、モジュールグラフには含まれません。インポートすると二つ目のハッシュ付きコピーが生成され、固定の /favicon.ico パスが壊れてしまいます。