ファビコンの欠落や破損は、Stack Overflowで最もよくある質問の1つであり、 答えはほぼ常に10の原因のどれかです。このチェックリストを上から順に 確認すれば必ず見つかります。
1. ブラウザキャッシュ（原因第1位）
ブラウザはファビコンを通常のページよりはるかに強力にキャッシュします。 問題を修正した後でも、古い（壊れた）アイコンが数日残ることがあります。 この順番でテストしてください。
- ハードリフレッシュ： Ctrl/Cmd + Shift + R
- シークレット/プライベートウィンドウ — そこで表示されるなら、単なるキャッシュの問題です
- ファイルに直接アクセス：
https://yourdomain.com/favicon.icoを開きます。 画像が表示されればファイルは正常で、キャッシュかlinkの問題です。 - ファビコンキャッシュをクリア：Chromeで
chrome://favicon/を開く方法は もはや機能しないため、シークレットウィンドウか別のブラウザを使いましょう。
2. 誤ったファイルパス
<link> のhrefは、ファイルが実際にある場所を指していなければなりません。 先頭のスラッシュ（/favicon.ico）はサイトルートを意味します。 サイトがサブフォルダから配信されているなら、パスもそれを反映する必要があります。
<!-- ❌ wrong if file is in /assets/ -->
<link rel="icon" href="favicon.ico">
<!-- ✅ absolute path from site root -->
<link rel="icon" href="/favicon.ico">
<!-- ✅ or the real location -->
<link rel="icon" href="/assets/favicon.ico">3. <link> タグの欠落
一部のブラウザは /favicon.ico に自動でフォールバックしますが、 それに依存すべきではありません。アイコンは必ず <head> 内で 明示的に宣言しましょう。
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />4. 誤ったMIMEタイプ
サーバーが .ico を image/png として配信している（またはその逆）と、 一部のブラウザは描画を拒否します。.ico は image/x-icon またはimage/vnd.microsoft.icon、PNGは image/png であるべきです。
5. ファイルがデプロイされていない
自明なようですが、ファイルが実際に本番環境に届いているか確認しましょう。 新しいタブでファイルのURLを開きます。404ならそこにありません。 再ビルドして再デプロイし、ビルドパイプラインがファビコンを出力ディレクトリに コピーしているか確認してください。
6. 正方形でないソース画像
ファビコンは正方形でなければなりません。ソース画像が1:1でないと、 ブラウザは引き伸ばされたり空白のアイコンを表示することがあります。 先にクロップしてください。Favicon.oneジェネレーターは 正方形の出力を強制します。
7. フレームワーク固有の落とし穴
Next.js App Router
自動検出のためにアイコンファイルは app/ に置きます （public/ ではありません）。Next.jsファビコンガイドをご覧ください。
Next.js Pages Router
ファイルは public/ に、タグは pages/_document.tsx に置きます。
Webpack / Vite
favicon.ico が public/ または static/ ディレクトリに あり、HTMLテンプレートで参照されていることを確認してください。
8. HTTPS / 混在コンテンツ
サイトがHTTPSなのにファビコンがHTTPで参照されていると、ブラウザは 混在コンテンツとしてブロックします。常にHTTPS URLか相対パスを使いましょう。
9. サービスワーカーが古いバージョンをキャッシュ
サービスワーカーを使うPWAの場合、古いファビコンを参照するキャッシュ済みHTMLを 配信している可能性があります。サービスワーカーを更新して再登録してください。
10. SVGファビコンがサポートされていない
SVGファビコンはすべてのブラウザでサポートされているわけではありません （特に古いAndroidのChrome）。SVGには必ずPNG/ICOフォールバックを併用してください。
それでも解決しない？Favicon Checkerを実行
Favicon Checker にURLを貼り付ければ、 どのアイコンとタグが欠落または破損しているかを正確に教えてくれます。 推測は不要です。
壊れたファビコンを置き換えるきれいなパッケージが必要ですか？Favicon.one で無料で生成できます。