ファビコンが表示されない・反映されない原因と対処法【完全チェックリスト】

「ファビコンが表示されない」——原因は5つのカテゴリに分かれる

ファビコンを設定したのにブラウザのタブに表示されない。あるいは、ブラウザでは見えるのにGoogle検索結果に反映されない。こうしたトラブルは、Web制作で非常によくある問題です。

原因は多岐にわたりますが、大きく分けると次の5カテゴリに整理できます。

1. ブラウザキャッシュの問題
2. ファイルパス・URLの指定ミス
3. ファイル形式・画像データの問題
4. サーバー・CDN・アクセス制限の問題
5. CMS固有の問題

さらに、Google検索結果への反映はブラウザ表示とは別の仕組みで動いているため、独立した確認ポイントがあります。

この記事では、各カテゴリごとに原因と対処法をチェックリスト形式でまとめました。上から順にチェックしていけば、ほとんどのケースで原因を特定できるはずです。

1. ブラウザキャッシュが原因のケース

ファビコンが表示されないとき、最初に疑うべきはブラウザキャッシュです。ファビコンはブラウザが積極的にキャッシュするため、ファイルを差し替えただけでは反映されないことがよくあります。

スーパーリロードを試す

通常のリロード（F5）ではキャッシュが使われ続けることがあります。スーパーリロードでキャッシュを無視して再読み込みしましょう。

シークレットモード（プライベートブラウズ）で確認する

スーパーリロードでも変わらない場合は、シークレットモードで開いてみてください。キャッシュが一切ない状態でアクセスするため、「そもそもファビコンが正しく配信されているか」を切り分けられます。

• シークレットモードで表示される → キャッシュが原因
• シークレットモードでも表示されない → ファイルやパスに問題がある

ファビコン専用キャッシュを削除する（Chrome）

Chromeは通常のキャッシュクリアとは別に、ファビコン専用のデータベースを持っています。スーパーリロードでもシークレットモードでもなぜか古いアイコンが残る場合は、この専用キャッシュが原因です。

削除手順：

1. Chromeを完全に終了する
2. 以下のファイルを削除する

# Windows
%LOCALAPPDATA%\Google\Chrome\User Data\Default\Favicons
%LOCALAPPDATA%\Google\Chrome\User Data\Default\Favicons-journal

# Mac
~/Library/Application Support/Google/Chrome/Default/Favicons
~/Library/Application Support/Google/Chrome/Default/Favicons-journal

3. Chromeを再起動してアクセスする

この方法はかなり強力で、他の手段で解決しなかった頑固なキャッシュ問題に効きます。

Chromeのブックマークバーでファビコンがぼやける

Chromeのブックマークバーは32x32pxでファビコンを表示します。16x16pxの単一サイズICOしか用意していない場合、Chromeが16px画像を拡大するためぼやけて表示されることがあります。これは「表示されない」ではなく「画質が荒い」問題です。

対処法は、16x16、32x32、48x48を含むマルチサイズICOに差し替えることです。

関連記事ファビコンがぼやける・画質が荒い原因と対処法｜くっきり表示させる完全チェックリストファビコンがぼやける・画質が荒い7つの原因と対処法をチェックリスト形式で解説。Retina対応、マルチサイズICO、リサイズ品質、SVGファビコンによる根本解決まで。

Safari固有のキャッシュ問題

Safariはファビコンのキャッシュ管理がChromeと異なり、通常のキャッシュクリアでは解消しないことがあります。

macOS Safari： ~/Library/Safari/Favicon Cache/ フォルダを手動で削除してSafariを再起動します。

iOS Safari： 個別のファビコンキャッシュ削除はできません。「設定 > Safari > 履歴とWebサイトデータを消去」で全キャッシュを削除する必要があります。

iPhoneのホーム画面アイコンやSafariお気に入りでの表示問題は、Apple Touch Iconの設定に関係しています。

関連記事Apple Touch Icon完全ガイド｜iPhone・Safariでのファビコン設定と表示の仕組みApple Touch Iconの設定方法を徹底解説。iPhoneホーム画面やSafariお気に入りでの表示、推奨サイズ180x180px、HTMLの書き方、Safariキャッシュ問題の対処法まで。

全ユーザーに新しいファビコンを見せるには（キャッシュバスター）

スーパーリロードやキャッシュ削除はあくまで自分のブラウザの問題を解決する手段です。すでにサイトを訪れたことがある一般ユーザー全員に新しいファビコンを反映させるには、HTML側でファビコンのURLを変える必要があります。

<!-- ファイル名を変更する -->
<link rel="icon" href="/favicon-v2.ico">

<!-- またはクエリパラメータを付ける（キャッシュバスター） -->
<link rel="icon" href="/favicon.ico?v=2">

URLが変わることでブラウザは「新しいリソース」と認識し、キャッシュを使わずに再取得します。ファビコンをリニューアルした際は、この方法がもっとも確実です。

2. ファイルパス・URLの指定ミス

キャッシュが原因でないなら、次に確認すべきはファビコンファイルのパスが正しいかどうかです。地味ですが、パス指定のミスは非常に多い原因です。

DevToolsのNetworkタブで確認する

ブラウザのDevTools（開発者ツール）を開き、Networkタブでファビコンのリクエストを確認するのが最も確実です。

1. F12（Mac: Cmd + Option + I）でDevToolsを開く
2. Networkタブを選択
3. ページをリロードする
4. フィルターに「favicon」と入力
5. リクエストのステータスを確認

ステータスが 200 なのにファビコンが表示されない場合は、ファイル自体は正しく配信されています。キャッシュの問題（第1章）か、ファイル形式の問題（第3章）を確認してください。

相対パスと絶対パスの違い

<!-- 相対パス（サブディレクトリでは壊れることがある） -->
<link rel="icon" href="favicon.ico">

<!-- ルート相対パス（推奨） -->
<link rel="icon" href="/favicon.ico">

<!-- 絶対パス（CDN配信時など） -->
<link rel="icon" href="https://example.com/favicon.ico">

href="favicon.ico" のような相対パスだと、https://example.com/blog/article/ のようなサブディレクトリページで https://example.com/blog/article/favicon.ico を探しに行ってしまいます。先頭に / を付けたルート相対パスを使いましょう。

/favicon.ico の自動検出に頼りすぎない

ルートに favicon.ico を置けばHTMLに書かなくても読み込まれる仕様がありますが、これは万能ではありません。

• SPAフレームワーク（React、Vue、Next.js等）では、ビルド時にpublicフォルダの扱いが異なる
• CDN経由だとルートのパスが変わることがある
• 明示的に <link rel="icon"> を書いた方が確実

正しい設定方法の詳細は以下の記事でまとめています。

関連記事ファビコンの設定方法｜HTML・WordPress・各CMS別に完全解説【コピペOK】ファビコン（favicon）をWebサイトに設定する方法をHTML直書き・WordPress・Shopify・Wixなど環境別に解説。コピペ可能なHTMLコード付き。

3. ファイル形式・画像データの問題

パスは正しいのに表示されない場合、ファビコンファイルそのものに問題がある可能性があります。

拡張子を変えただけの「偽ICO」に注意

よくあるのが、PNGやJPEG画像の拡張子を .ico に変えただけのケースです。ファイルの中身はPNGのままなので、ICO形式を期待するブラウザやツールで正しく読み込めないことがあります。

ICOファイルは独自のバイナリ構造（ICONDIRヘッダー + ICONDIRENTRYテーブル + 画像データ）を持つ専用フォーマットです。拡張子を変えるだけではICO形式にはなりません。

正しいICOファイルを作るには、専用の変換ツールを使ってください。当サイトの画像→ファビコン変換ツールなら、PNG画像をアップロードするだけで正規のICOファイルを生成できます。

画像が壊れていないか確認する

ファビコン画像をブラウザで直接開いてみましょう。https://example.com/favicon.ico にアクセスして画像が表示されれば、ファイル自体は正常です。

表示されない・エラーになる場合は、以下を確認してください。

• 画像編集ソフトで正しく書き出されているか
• アップロード時にファイルが破損していないか（再アップロードで解決することも）
• ファイルサイズが0バイトになっていないか

MIMEタイプが正しいか

サーバーが返すContent-Typeヘッダーが適切でないと、ブラウザがファビコンとして認識しない場合があります。

ICOファイルのMIMEタイプは image/x-icon と image/vnd.microsoft.icon の2種類があり、どちらも正常です。image/vnd.microsoft.icon はIANA（インターネット番号割当機関）に正式登録されたMIMEタイプで、Vercelなどのモダンなホスティングではこちらが返されることが多いです。image/x-icon は歴史的に広く使われてきた慣習的なMIMEタイプです。

以下の手順でChromeのDevToolsから確認できます。

Content-Typeの確認手順（Chrome）：

1. 確認したいサイトを本番URLで開く（localhost ではなく https://example.com）
2. F12（Mac: Cmd + Option + I）を押してDevToolsを開く
3. 上部の 「Network」タブ をクリック
4. 「Disable cache」にチェックを入れる（キャッシュが原因でリクエストが出ないことがある）
5. ページをリロード（Ctrl + R / Cmd + R）して通信を記録する
6. フィルター欄に favicon と入力してファビコンのリクエストを絞り込む（見つからない場合は「Img」フィルターボタンで画像リクエストだけに絞る）
7. 表示されたファビコンのリクエスト行をクリック
8. 右側に開くパネルで 「Headers」タブ を選択
9. 「Response Headers」セクション の中にある content-type の値を確認

content-type が image/x-icon や image/png になっていれば正常です。

Apacheの場合は .htaccess に以下を追加します：

AddType image/x-icon .ico
AddType image/png .png
AddType image/svg+xml .svg

Nginxの場合は mime.types に含まれていることを確認してください（通常はデフォルトで設定済みです）。

HTMLのtype属性と実際の形式を一致させる

<!-- PNGファイルなのにtype="image/x-icon"と書くと問題になることがある -->
<link rel="icon" type="image/x-icon" href="/favicon.png">

<!-- 正しい指定 -->
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="icon" type="image/x-icon" href="/favicon.ico">

type属性を省略しても多くのブラウザは自動判定してくれますが、明示しておく方が安全です。

なお、現在はPNGやICOに加えてSVG形式のファビコンも約90%のブラウザで対応しています。SVGはベクター形式で画質劣化がなく、ダークモード自動対応もできるため、モダンな選択肢として検討する価値があります。ただし、SVGファビコンを使う場合は type="image/svg+xml" の指定を忘れないようにしましょう。

ダークモードで「見えなくなっている」ケース

ファビコンが「表示されない」のではなく、ブラウザのダークテーマに同化して見えなくなっていることもあります。たとえば透過背景に黒いロゴのファビコンは、タブが暗い色のときに完全に溶け込んでしまいます。

対策としては以下が有効です。

• ファビコンに背景色を敷く（透過をやめる）
• ロゴの外側に白いフチ（ストローク）を付ける
• SVG形式で @media (prefers-color-scheme: dark) を使い、ダークモード時に色を自動切替する

SVGでのダークモード対応についてはSVGファビコン完全ガイドで詳しく解説しています。透過ファビコン全般の注意点は透過背景の作り方も参考にしてみてください。

各ファイル形式の詳しい違いやブラウザ対応状況は以下を参照してください。

関連記事ファビコンの拡張子・ファイル形式ガイド｜ICO・PNG・SVGどれを使うべき？ファビコン（favicon）に使える拡張子・ファイル形式を徹底比較。ICO・PNG・SVG・GIF・WebPのブラウザ対応状況、HTMLの書き方、2026年の推奨構成まで実務目線で解説。

4. サーバー・CDN・アクセス制限の問題

ファイルもパスも正しいのに表示されない場合、サーバーやネットワーク側に原因があるかもしれません。

Cloudflare等のCDNキャッシュ

CDNを使っている場合、オリジンサーバーのファイルを更新してもCDN側にキャッシュが残っている可能性があります。

対処法：

• Cloudflare：ダッシュボードの「Caching」→「Purge Everything」、またはファビコンURLを個別にパージ
• AWS CloudFront：Invalidationを作成
• Vercel/Netlify：再デプロイで自動的にキャッシュが更新される

robots.txt でファビコンへのアクセスをブロックしていないか

robots.txt でファビコンのパスをブロックすると、Googleがファビコンをクロールできず、検索結果に表示されなくなります。

# NG: ファビコンもブロックしてしまう
User-agent: *
Disallow: /

# OK: ファビコンは許可
User-agent: *
Disallow: /admin/
Allow: /favicon.ico

なお、ブラウザでの表示にはrobots.txtは関係ありません。影響があるのはGoogleの検索結果のみです。

Basic認証がかかっている

開発中やステージング環境でBasic認証をかけていると、ファビコンへのHTTPリクエストも認証が必要になり、ブラウザがアイコンを取得できないことがあります。

特にスマホのホーム画面に追加した場合、認証情報が引き継がれないのでアイコンが表示されません。

ステージング環境でファビコンの動作確認ができないのは、ある程度仕方のないことです。本番公開時にBasic認証を外せば正常に表示されるので、ステージングで表示されないこと自体を心配する必要はありません。

Content Security Policy（CSP）による制限

厳格なCSPヘッダーを設定している場合、ファビコンの読み込みがブロックされることがあります。DevToolsのConsoleタブにCSP関連のエラーが出ていないか確認してください。

# CSPでimg-srcを制限している場合、ファビコンのドメインも許可する
Content-Security-Policy: img-src 'self' https://cdn.example.com;

.htaccessでのリダイレクトや制限

Apacheを使っている場合、.htaccess の設定が原因でファビコンへのアクセスがリダイレクトされたり、ブロックされたりすることがあります。

DevToolsのNetworkタブでファビコンのリクエストが301や403を返していないか確認しましょう。

5. CMS固有の問題

CMS（WordPress、Shopify、Wixなど）を使っている場合、CMS特有の仕組みが原因で表示されないことがあります。

WordPress

WordPressでファビコンが反映されない場合、以下を順にチェックしてください。

1. カスタマイザーの設定を確認：「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」で画像が設定されているか
2. 画像サイズ：WordPressは512×512px以上の正方形画像を推奨。小さすぎると警告が出たり正しく表示されない
3. キャッシュ系プラグイン：WP Super Cache、W3 Total Cache、LiteSpeed Cacheなどのプラグインがキャッシュを保持している可能性がある。プラグインのキャッシュを手動でクリアする
4. テーマ側の設定：一部のテーマは独自のファビコン設定を持っている。テーマ設定がカスタマイザーより優先されていないか確認
5. CDNプラグイン：Jetpack等のCDNプラグインがファビコンのURLを書き換えている場合がある

WordPressでの設定方法の詳細は別記事で解説しています。

関連記事WordPressのファビコン設定方法｜初心者でも5分で完了する全手順【2026年版】WordPressでファビコン（favicon）を設定する方法を3パターン解説。カスタマイザー、テーマ設定、コード直書き。反映されないときの対処法も。

Shopify

Shopifyでは管理画面の「オンラインストア」→「テーマ」→「カスタマイズ」→「テーマ設定」→「ファビコン」から設定します。

よくある問題点：

• CDNキャッシュが強力：Shopifyは独自のCDNを使用しており、ファビコンの変更が反映されるまで時間がかかることがある。ブラウザのキャッシュクリアに加え、時間を置いて確認する
• 画像形式：PNG形式、32×32px以上を推奨。ICO形式は非推奨
• テーマのコード：theme.liquid で {{ settings.favicon }} が正しく参照されているか確認

Shopifyの設定手順は以下で詳しく解説しています。

関連記事Shopifyでファビコンを設定する方法｜管理画面からの手順・推奨サイズを解説Shopifyストアにファビコン（favicon）を設定する手順を画面付きで解説。推奨画像サイズ、反映されない場合の対処法、ブランディング効果も紹介。

Wix

Wixでは「設定」→「ファビコンの管理」から画像をアップロードします。反映されない場合は以下を確認してください。

• Wix側のキャッシュ：公開後数分〜数十分は反映に時間がかかることがある
• 画像サイズ：16×16pxの画像をアップロードするのが確実
• ブラウザキャッシュ：スーパーリロードで確認

静的サイトジェネレーター（Next.js、Gatsby、Hugo等）

静的サイトジェネレーターでは、ファビコンの配置場所がフレームワークごとに異なります。

ビルド後に _next/ や dist/ 配下にファビコンがコピーされていることを確認しましょう。

Google検索結果にファビコンが反映されない場合

ブラウザのタブには表示されているのに、Google検索結果にファビコンが出ないというケースも多くあります。これはブラウザ表示とは仕組みが異なり、Google独自のクローリングとインデックスのプロセスを経る必要があるためです。

反映には数日〜数週間かかる

Google検索結果へのファビコン反映は即時ではありません。数日から数週間、場合によっては1ヶ月程度かかることもあります。設定直後に反映されないのは正常な挙動です。

Googleの公式要件を満たしているか確認

Google検索セントラルのドキュメントによると、検索結果にファビコンを表示するには以下の要件を満たす必要があります。

特に注意が必要なのはサイズ要件です。16×16pxのファビコンしか用意していない場合、ブラウザのタブには表示されてもGoogle検索結果には表示されません。48px以上のファビコンを用意してください。

Google Search Consoleでインデックス状況を確認する

1. Google Search Consoleにアクセス
2. 「URL検査」ツールにサイトのトップページURLを入力
3. インデックスの状態を確認
4. 必要に応じて「インデックス登録をリクエスト」を実行

metaタグで画像のインデックスを拒否していないか

<!-- この設定があるとGoogleがファビコンをインデックスしない可能性がある -->
<meta name="robots" content="noimageindex">

noimageindex は画像のインデックスを拒否するメタタグです。これが設定されているとファビコンにも影響する可能性があるため、必要でなければ削除してください。

ファビコンを変更したのに検索結果が更新されない

ファビコンを新しいデザインに差し替えたのに、Google検索結果では古いアイコンのまま——という場合は、ファビコンファイルのURLを変更するのが効果的です。

<!-- ファイル名を変更する -->
<link rel="icon" href="/favicon-v2.ico">

<!-- またはクエリパラメータを追加する -->
<link rel="icon" href="/favicon.ico?v=2">

URLが変わることでGoogleが「新しいファビコン」と認識し、再取得してくれます。その後、Search Consoleで再クロールをリクエストすると反映が早まります。

DevToolsを使ったデバッグ手順

原因の切り分けに最も役立つのが、ブラウザのDevTools（開発者ツール）です。体系的なデバッグ手順をまとめます。

ステップ1：Networkタブでリクエストを確認

1. DevToolsを開く（F12 / Cmd + Option + I）
2. Networkタブを選択
3. ページをリロード
4. フィルターに favicon と入力
5. 以下を確認：
   • Status：200以外なら問題がある（404、403、301等）
   • Type：image/x-icon や image/png が返っているか
   • Size：0バイトや異常に小さくないか
   • Preview：正しい画像が表示されるか

ステップ2：Elementsタブでlinkタグを確認

1. Elementsタブを選択
2. <head> タグを展開
3. Ctrl + F（Mac: Cmd + F）で icon を検索
4. <link rel="icon"> タグが存在するか、href属性が正しいか確認

ステップ3：Consoleタブでエラーを確認

Consoleタブに以下のようなエラーが出ていないか確認します。

Failed to load resource: the server responded with a status of 404
GET https://example.com/favicon.ico net::ERR_ABORTED 404
Refused to load the image 'https://...' because it violates the Content Security Policy

404エラーならパスの問題、CSP関連のエラーならセキュリティヘッダーの問題です。

当サイトの分析ツールで確認

手軽に確認したい場合は、当サイトのファビコン分析ツールにURLを入力するだけで、設定状況を一覧できます。

よくある質問（FAQ）

Q. ファビコンを設定したのにChromeだけ表示されません

Chromeはファビコンのキャッシュが特に強力です。スーパーリロード（Ctrl + Shift + R）を試し、それでもダメならChromeのファビコン専用キャッシュファイル（Favicons / Favicons-journal）を削除してください。詳しい手順はこの記事のブラウザキャッシュが原因のケースを参照してください。

Q. localhostでは表示されるのに本番環境では表示されません

ローカルと本番でファイルパスが異なっていないか確認してください。特に、ビルドツール（webpack、Vite等）を通すとパスが変わることがあります。また、本番環境のCDNキャッシュや、HTTPSとHTTPの混在（Mixed Content）も原因になりえます。

Q. スマホのホーム画面にアイコンが表示されません

スマホのホーム画面アイコンにはファビコン（rel="icon"）ではなく、Apple Touch Icon（rel="apple-touch-icon"）やWeb App Manifest（manifest.json）の設定が必要です。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Q. ファビコンのサイズは何pxが正しいですか？

用途によって異なりますが、最低限 16×16px（ブラウザタブ） と 32×32px（ブックマーク等） が必要です。Google検索結果用には 48×48px以上 が必要です。Apple Touch Iconには 180×180px を用意します。

サイズの詳細はファビコンのサイズ完全ガイドで解説しています。

Q. WordPressでファビコンを変更したのに古いままです

WordPress側のキャッシュ（キャッシュ系プラグイン）と、ブラウザキャッシュの両方をクリアしてください。プラグインのキャッシュクリアは管理画面の設定から実行できます。Cloudflare等のCDNを使っている場合はCDN側のパージも必要です。

Q. Google検索結果のファビコンが地球儀アイコンのままです

ファビコンの設定が正しくても、Googleの検索結果に反映されるまでに数日〜数週間かかります。ファビコンのサイズが48px以上あること、robots.txtでブロックしていないこと、Googlebotがアクセスできることを確認した上で、Search Consoleからインデックス登録をリクエストして待ちましょう。

まとめ：ファビコンが表示されないときのチェックリスト

最後に、この記事で解説したチェック項目を一覧表にまとめます。上から順に確認していってください。

ファビコンの作成や確認には、当サイトのツールもぜひ活用してください。

• 画像→ファビコン変換ツール — 正しいICO形式のファビコンを作成
• ファビコン分析ツール — URLを入力するだけで設定状況をチェック
• アプリアイコン一括生成 — 全サイズのアイコンをまとめて生成

Google検索結果へのファビコン表示について、要件・設定・確認手順を体系的にまとめた記事もあります。

関連記事Google検索結果にファビコンを表示させる方法｜要件・設定・確認手順までGoogle検索結果にファビコンを正しく表示させるための要件、推奨サイズ、設定方法、Search Consoleでの確認手順を解説。表示されない場合の原因と対処法も。

ファビコンが「表示はされるがぼやけている」場合は、サイズやリサイズ品質の問題かもしれません。

関連記事ファビコンがぼやける・画質が荒い原因と対処法｜くっきり表示させる完全チェックリストファビコンがぼやける・画質が荒い7つの原因と対処法をチェックリスト形式で解説。Retina対応、マルチサイズICO、リサイズ品質、SVGファビコンによる根本解決まで。

ファビコンの基本から学びたい方は以下も参考にしてみてください。

関連記事ファビコンの設定方法｜HTML・WordPress・各CMS別に完全解説【コピペOK】ファビコン（favicon）をWebサイトに設定する方法をHTML直書き・WordPress・Shopify・Wixなど環境別に解説。コピペ可能なHTMLコード付き。