トラブルシュート

ファビコンが更新されないときに共有前に確認するチェックリスト

「ファビコンを差し替えたのに更新されない」と感じたとき、原因は必ずしも一箇所ではありません。ブラウザ・CDN・HTMLの記述・共有サービスのキャッシュが複合している場合もあります。共有前に5分で完了できる確認項目を順番に並べたので、上から実施するだけで見落としを防げます。

よくある原因

ファビコンが更新されない場合、原因は大きく「HTML記述ミス」「ブラウザキャッシュ」「CDN/サーバーキャッシュ」の3つに分類されます。チェックリストを使う前に、この3層を意識しておくと原因特定が格段に早くなります。たとえばシークレットウィンドウで正しく表示されれば「ブラウザキャッシュ」が原因、シークレットでも古いままなら「CDN/サーバー側」が疑われます。

見落とされがちなのが、HTML内に複数のfaviconタグが並んでいるケースです。古いテンプレートと新しいテンプレートをコピー&ペーストで統合すると、`<link rel="shortcut icon">` と `<link rel="icon">` が混在し、ブラウザが古い方を優先してしまうことがあります。HTMLをテキストエディタで開き、`rel="icon"` を検索して重複タグがないか確認する作業をチェックリストの最初に組み込むと効果的です。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

チェック項目1:`<head>`内のfaviconタグのhrefが正しいパスを指しているか確認する。特に公開環境でのルートパス(`/favicon.png`)と開発環境での相対パス(`../favicon.png`)が混同されていないか注意。ブラウザのDevTools「ネットワーク」タブでfaviconへのリクエストが200を返しているか必ず目視確認する。

チェック項目2:hrefにキャッシュバスティング用のクエリパラメータが付いているか確認する。`?v=1` のような文字列を追加するだけでよい。また、ファイル自体がサーバーに正しくアップロードされているか、FTPクライアントやダッシュボードで最終更新日時を確認する。ギガサイト便でZIPを再アップロードした場合は、差し替え完了の通知を待ってからURLを開く。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

相手にチェックを依頼するときは「シークレットウィンドウで開いてください」と具体的に伝えます。「キャッシュを消してください」だけでは操作方法がわからない方も多いため、「Chromeの場合はCtrl+Shift+Nで新しいシークレットウィンドウが開き、そこにURLを貼り付けてください」と手順まで書き添えると返信の往復が減ります。

それでも古いファビコンが表示される場合は、スマホでも確認してもらいます。iOSのSafariは独自のキャッシュを持ち、PCブラウザとは別に管理されています。「設定」→「Safari」→「履歴とWebサイトデータを消去」の手順をテキストで共有し、消去後に再度アクセスしてもらうと原因がCDN側か端末側かを切り分けられます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

このチェックリストをNotionやGoogleドキュメントにコピーし、プロジェクトの「公開前チェック」テンプレートとして保存しておきます。ファビコン以外にもOGP画像・メタタイトル・モバイル表示など確認項目はまとめて管理すると、公開直前の抜け漏れを体系的に防げます。

定期的に更新するサイトであれば、差し替えるたびにバージョンパラメータのインクリメントを忘れないよう、コメントでバージョン履歴をHTMLに残す方法も有効です。例:`<!-- favicon v3: 2026-06-25 ロゴ刷新 -->` のようにコメントを添えておくと、次に担当者が変わったときも経緯がわかります。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

チェックリストをすべて確認したのにまだ古いファビコンが表示されます。次に何をすべきですか?

CDNのキャッシュが残っている可能性が高いです。Cloudflareを使っている場合はダッシュボードの「キャッシュのパージ」でファビコンのURLを指定して手動削除してください。それでも改善しない場合はブラウザのアドレスバーに直接ファビコンURLを入力し、表示される画像が新しいものか確認します。

ファビコンのチェックはいつ実施すればよいですか?

ファビコンを変更したタイミングと、公開URLを相手に送る直前の2回実施するのが理想です。変更直後はサーバー反映のタイムラグがあるため、5分ほど待ってからシークレットウィンドウで確認すると正確な状態を把握できます。

複数のブラウザで確認が必要ですか?

最低限ChromeとSafariの2種類で確認することを推奨します。両ブラウザでファビコンのキャッシュ管理方法が異なるため、Chromeで正しく表示されてもSafariで古いままのケースが実際に起こります。特にiOSのSafariは挙動が独特なので必ず確認してください。

関連記事

トラブルシュート

ファビコンが更新されないときの原因と直し方

ファビコンが更新されない現象に悩むWeb制作者・デザイナー向けに、ブラウザキャッシュ・CDNキャッシュ・HTML記述ミスの3層を切り分けて解決する手順をまとめた記事。

5分で読める
トラブルシュート

CSSだけキャッシュが残るときの原因と直し方

HTMLは更新されたのにCSSだけキャッシュが残ってデザインが古いままになる問題に悩む担当者向けに、CDN・ブラウザ・プロキシの各レイヤーでキャッシュを消す手順を解説します。

5分で読める
「トラブルシュート」の記事をもっと見る →