favicon が表示されない・更新されない？9つの原因と対処法
favicon を壊す9つの原因と、それぞれの正確な対処法。10回中9回はキャッシュが原因なので、そこから始めて表を上から下へたどっていきましょう。
<link rel="icon" href="/favicon.ico?v=2" sizes="any">URLを変えることこそが、ブラウザに新しいファイルを取りに行かせる方法です。ICOをその場で編集するだけでは足りません。
原因と対処法
| 原因 | なぜ壊れるか | 対処法 |
|---|---|---|
| 1. ブラウザまたはCDNのキャッシュ | ブラウザは favicon をほぼどのアセットよりも強くキャッシュし、前面にCDNがあるとさらにもう一層加わります。 | ハードリフレッシュ（Cmd+Shift+R / Ctrl+F5）し、URL自体が変わるようバージョンのクエリ文字列を付け足します。 |
| 2. ファイルパスの誤り | 相対パスは、ルートではなく現在のページを基準に解決されます。 | 先頭にスラッシュを付けて /favicon.ico とし、そのURLで実際にファイルが読み込まれることを新しいタブで確認します。 |
| 3. link タグの欠落・不正 | アイコンの link がない、rel="icon" のタイプミス、あるいは <head> の外に置かれたタグは、いずれもブラウザがファイルを見つけるのを妨げます。 | 共有レイアウトのマークアップを検証します。 |
| 4. フォーマットまたはサイズの誤り | 小さすぎる favicon、誤ったMIMEタイプ、破損した .ico は、静かにレンダリングに失敗することがあります。 | サポートされているサイズとフォーマットで書き出し直し、正しいコンテンツタイプで配信します。ICO と PNG を比較し、必要な favicon サイズを確認しましょう。 |
| 5. apple-touch-icon が更新されない | iOS は favicon.ico を無視し、apple-touch-icon を使います。それが欠けていたり古かったりすると、ホーム画面に誤ったものが表示されます。 | apple-touch-icon の link を修正してから、ページをホーム画面から削除して再追加します。 |
| 6. マニフェストのアイコンの問題 | Android およびインストール済みPWAでは、アイコンは manifest.json から来ます。そこでのパスの誤りやサイズの誤りは、ホーム画面とスプラッシュのアイコンを壊します。 | manifest.json 内のアイコンのパスとサイズを修正し、アプリを再インストールします。 |
| 7. ビルド出力がタグを取り除く | 一部のフレームワークはドキュメントのheadを書き換えるため、手書きの link タグがビルドを生き延びません。 | お使いのスタックのガイドに従ってください：Next.js、React、WordPress、または Shopify。 |
| 8. テーマやCMSが独自のアイコンを注入する | テーマが独自のサイトアイコンを設定し、マークアップで追加したものを上書きすることがあります。 | テンプレートではなく、プラットフォーム自身のサイトアイコン設定からアイコンを設定します。 |
| 9. ビルドキャッシュが古いファイルを配信する | ビルドやプラットフォームのキャッシュが、再デプロイ後も古いアイコンを配り続けます。 | ビルド／プラットフォームのキャッシュをパージし、再デプロイして、もう一度確認します。 |
次に見るべき場所
フォーマットやサイズが怪しい？用語集で ICO と PNG を比較し、必要な favicon サイズを確認しましょう。iOS の問題？apple-touch-icon の項目を読んでください。マニフェストの問題？manifest.json とは何かを読みましょう。
原因7〜9はプラットフォーム固有のものです。一部のフレームワークやCMSは、素のHTMLとは異なるやり方で favicon を上書きしたりキャッシュしたりします。ビルド出力がタグを取り除いたり、テーマが独自のアイコンを注入したり、ビルドキャッシュが古いファイルを配信したりします。Next.js、React、WordPress、Shopify のガイドが、それぞれ固有のバージョンを扱っています。
キャッシュされた favicon を消す方法
- 1
バージョンのクエリ文字列を付け足す
link の href を /favicon.ico?v=2 に変えて、ブラウザに新しいファイルを取りに行かせます。
- 2
ページをハードリフレッシュする
Cmd+Shift+R（macOS）または Ctrl+F5（Windows）でキャッシュをバイパスします。
- 3
CDNのキャッシュをパージする
サイトの前面にCDNがある場合は、favicon のパスを無効化して、エッジノードが新しいファイルを配信するようにします。
キャッシュを消しても、まだ同じ？
| 見えている状態 | たいていの意味 | 次の一手 |
|---|---|---|
| 404：favicon が見つからない | ブラウザが /favicon.ico を要求したのに、サーバーにそこには何もありませんでした。フレームワークのビルドが出力にファイルをコピーしなかった直後によくあります。 | /favicon.ico を直接開きます。404 になるなら、ファイルがデプロイされていません。これはキャッシュではなくビルドかパスの問題なので、キャッシュをいじっても決して解決しません。 |
| 直接URLでも古いアイコンが読み込まれる | /favicon.ico を開くと古い画像が表示される、つまりファイルそのものが古いのです。いくらハードリフレッシュしても動きません。 | ビルドステップかCDNが古いファイルを配っています。プラットフォーム／CDNのキャッシュをパージし、再デプロイしてから、タブを確認する前に直接URLを開き直します。 |
| URLでは正しいファイル、タブでは誤ったアイコン | 直接URLは正しいのに、タブはまだ誤っている。2つ目の link タグ（テーマ、プラグイン、またはフレームワークのデフォルト）が、あなたのものを上回っています。 | ソースを表示して rel="icon" タグを数えます。ブラウザは理解できる最後のものを採用するので、3つ目を足すのではなく、負けているものを取り除きます。 |
| あるブラウザでは正常、別のブラウザでは欠落 | 各ブラウザ、そして各Chromeプロファイルは、それぞれ独自の favicon ストアを持ち、一部は古いエントリを何日も保持します。 | サイトのせいだと決める前に、新しいプライベートウィンドウかクリーンなプロファイルで確認します。 |
その表を上から下へたどってください。各行が1つのレイヤーを除外するので、キャッシュについて推測するのをやめ、サーバーが実際に返しているものを読み始められます。
失敗するケースが気にするサイズ
スキャンで対処を確認する
推測は時間がかかります。公開中のサイトを取得し、見つかったすべての favicon タグを列挙し、欠落や破損しているものにフラグを立てる自動スキャンを実行して、対処が本当に反映されたことを確かめましょう。
ブラウザやデバイスをまたいで手動でもテストしたいですか？favicon のテストと確認の方法をご覧ください。
よくある質問
なぜ favicon が表示されないのですか？
最も一般的な原因は、ブラウザの強力なキャッシュ、誤ったまたは相対的なファイルパス、そして <head> 内の <link> タグの欠落や不正です。ハードリフレッシュし、/favicon.ico が直接解決されることを確認し、タグをチェックしましょう。
favicon を強制的に更新するには？
アイコンのURLにバージョンのクエリ文字列を付け足します。例：/favicon.ico?v=2。これでブラウザはそれを新しいファイルとして扱います。そのあとハードリフレッシュするか、サイトのキャッシュを消します。
なぜ favicon がデスクトップでは表示されるのに iPhone では表示されないのですか？
iOS は favicon.ico ではなく apple-touch-icon を使います。その 180×180 の PNG の link が欠けていると、iOS はスクリーンショットにフォールバックします。apple-touch-icon の link を追加し、ページをホーム画面に再追加しましょう。
Google 検索で favicon が更新されるまでどれくらいかかりますか？
Google はサイトを再クロールするときに favicon を更新し、それには数日から数週間かかることがあります。アイコンが少なくとも 48×48 であること、有効な rel=icon タグで参照されていること、そして Googlebot が到達できることを確認しましょう。
なぜ favicon が見つからない、または 404 が返るのですか？
ブラウザがパスでアイコンを要求したのに、サーバーにそこには何もありませんでした。/favicon.ico を新しいタブで直接開きます：404 になるなら、そのURLにファイルが一度もデプロイされていません。たいていはフレームワークのビルドが出力にコピーしなかったか、link タグのパスが誤っています。キャッシュではなく、ファイルが着地する場所を直しましょう。
favicon が欠けています。ファイルは実際にはどこにあるべきですか？
定番のタブアイコンには、/favicon.ico が解決されるよう、サイトのルートに実ファイルを置きます。フレームワークによって、そこへの届き方が変わります：Next.js は app/favicon.ico を読み、Vite やほとんどのSPAは public/ をルートにコピーし、WordPress や Shopify はファイルではなくサイトアイコン設定を通じて配信します。ビルドが一度もファイルを書き込まなかった場所をタグが指していると、ソースが正しく見えてもアイコンは「欠けている」ことになります。
キャッシュを消してみましたが、まだ同じです。どうすれば？
キャッシュを消すのをやめて、サーバーが返すものを読みましょう。/favicon.ico を直接開きます：404 ならビルドかパスの問題、古い画像なら古いビルドかCDNのファイル、そしてタブでは誤ったアイコンだが正しいファイルなら、2つ目の link タグが勝っているということです。結果ごとに別々の対処を指し示します。上のエスカレーション表をご覧ください。