ファビコンが表示されない — トラブルシューティング ガイド
ファビコンをアップロードしましたが、タブにはまだ一般的な地球儀または古いロゴが表示されています。このガイドでは、最も一般的な原因 (キャッシュ、間違ったパス、ファイルの欠落、<link> タグの競合) を確認すべき順序で説明します。
ブラウザーは、他のほとんどのアセットよりも積極的にファビコンをキャッシュします。ハードリフレッシュ (Ctrl+Shift+R または Cmd+Shift+R) により、多くの誤ったアラームが修正されます。これが失敗した場合は、バージョン クエリ文字列 /favicon.ico?v=2 を 1 回追加します。
ブラウザが要求した URL にファイルが存在することを確認します。新しいタブで /favicon.ico を直接開きます。 404 は、ファイルが想定されている場所にデプロイされていないことを意味します。これは、index.html のみを提供する SPA ビルドによく見られます。
<link rel="icon"> href パスを確認してください。絶対パス (/favicon.ico) はすべてのページで機能します。相対パス (favicon.ico) は、/blog/post のようなネストされたルートで壊れます。
CDN を使用する場合は、デプロイ後にファビコン パスをパージします。一部の CDN は、最初のリクエスト中にファイルが見つからなかった場合、/favicon.ico の 404 応答をキャッシュします。
複数の <link rel="icon"> タグは、古いブラウザを混乱させる可能性があります。最初に favicon.ico を配置し、次に明示的なタイプとサイズの属性を持つ PNG/SVG バリアントを配置します。
WordPress、Shopify、および静的ホストはそれぞれ独自のタグを挿入します。ページのソースを表示し、rel="icon" を検索します。タグの重複またはオーバーライドが原因となることがよくあります。
HTTPS 混合コンテンツ警告により、安全なページ上の HTTP ファビコン URL がブロックされます。すべてのアイコンを HTTPS 経由で提供します。
ローカル開発の場合、一部のブラウザーは、localhost のサイト データをクリアするまでファビコンの更新を拒否します。
使い方
- 1
ファイルの URL を確認する
新しいタブで /favicon.ico を開きます — 404 ではなく 200 を期待してください。
- 2
<head> タグを検査する
ソースを表示します。正規の favicon.ico リンクが 1 つあり、タイプミスがないことを確認します。
- 3
バストキャッシュを1回
?v=2 を href に追加し、デプロイしてハードリフレッシュし、必要に応じてクエリを削除します。
今すぐ試す
ライブファビコンをテストする
ライブ favicon テスターよくある質問
私のファビコンはローカルでは機能するのに実稼働環境では機能しないのはなぜですか?+
実稼働ビルドは、多くの場合、サブディレクトリまたは CDN プレフィックスに出力されます。デプロイされたパスが <link> href と一致し、ファイルがビルド出力に含まれていることを確認します。
Google が検索結果のファビコンを更新するまでどれくらいかかりますか?+
Google が再クロールしてから数日から数週間かかる場合があります。アイコンが少なくとも 48×48 の正方形であり、安定した URL でパブリックにアクセスできることを確認してください。
広告ブロックまたはプライバシーモードではファビコンが非表示になりますか?+
ファーストパーティのアイコンではほとんどありません。サードパーティのファビコン プロキシはブロックできます。ドメイン上の自己ホスト型アイコンは影響を受けません。
ブラウザのファビコンキャッシュを削除したほうがよいでしょうか?+
ブラウザ設定でドメインのサイト データをクリアするか、キャッシュを無効にしてプライベート ウィンドウでテストします。