よくある原因
最も多いのはブラウザのキャッシュです。ファビコンはHTMLより長いTTLでキャッシュされることが多く、強制リロード（Ctrl+Shift+R / Cmd+Shift+R）をしても消えない場合があります。特にChromeはファビコン専用のキャッシュを持つため、DevToolsの「キャッシュを無効にする」を有効にした状態でリロードしないと古い画像が残ります。
次に多い原因はHTML側の記述漏れです。`<link rel="icon" href="/favicon.png?v=2">` のようにクエリパラメータでバージョンを付与していない場合、ブラウザはURLが変わっていないと判断して再取得しません。またfaviconのMIMEタイプを `image/png` ではなく `image/x-icon` のまま残していると、PNG画像を置いても一部ブラウザが読み込みを拒否するケースがあります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
まずHTMLの`<head>`内にある`<link rel="icon">`タグを確認し、hrefのパスが実際にアップロードしたファイルと一致しているかチェックします。パスが相対指定の場合、公開後のディレクトリ構造が開発環境と異なると404になり、ブラウザが古いキャッシュを表示し続けます。ネットワークタブで `/favicon.ico` や `/favicon.png` へのリクエストが200を返しているか必ず確認してください。
Cloudflareなど前段にCDNがある場合、オリジンを更新してもエッジキャッシュが残ります。Cloudflareであれば「キャッシュのパージ」→「カスタムURLのパージ」からファビコンのURLを直接指定して削除できます。ギガサイト便などのURL共有サービスを使っている場合も同様に、ファイルを差し替えた後にサービス側のキャッシュ更新が完了するまで数分かかることがあります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
閲覧者側で古いファビコンが残っている場合、まずシークレットウィンドウ（プライベートブラウジング）で同じURLを開いてもらいます。シークレットモードではキャッシュが空の状態で起動するため、正しいファビコンが表示されれば「閲覧者のブラウザキャッシュが原因」と確定できます。
Chromeの場合、アドレスバーに `chrome://favicon2/?pageUrl=対象URL` と入力するとキャッシュされているファビコンを確認できます。古い画像が表示されたら `chrome://settings/clearBrowserData` でキャッシュのみを消去してもらうよう依頼してください。Safariは「環境設定」→「詳細」→「メニューバーに開発メニューを表示」を有効にし、「開発」→「キャッシュを空にする」で解決できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
ファビコンを更新するたびにhrefへバージョン番号を付与するルールを決めておきます。例として `<link rel="icon" href="/favicon.png?v=20260625">` のように日付を使うと管理しやすく、デプロイ日が一目でわかります。CI/CDパイプラインがある場合はビルド時にバージョン番号を自動注入するスクリプトを組み込むと人為ミスを防げます。
共有URL（ギガサイト便など）でHTMLを配布している場合は、ファイルを差し替えた直後にモバイルとPCの両方で新しいタブを開いて確認する習慣をつけてください。確認用のチェックリストを社内Wikiやノーションに貼っておき、レビュー前に必ず実行する運用にすると、「クライアントに送った後で気づいた」というミスが減ります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
強制リロードしてもファビコンが変わらないのはなぜですか？
Chromeはファビコン専用のキャッシュを持っており、通常の強制リロードでは消去されません。DevToolsを開いた状態で「ネットワーク」タブの「キャッシュを無効にする」にチェックを入れてからリロードすると確実に再取得されます。
ファビコンのファイル名を変えずにバージョン管理する方法はありますか？
`<link rel="icon" href="/favicon.png?v=2">` のようにクエリパラメータを付けるのが最も手軽です。ファイル名は変わらないためサーバー設定の変更が不要で、パラメータを変えるだけでブラウザに再取得させられます。
PCでは正しいファビコンが出るのにスマホでは古いままです。どう対処しますか？
スマホのSafariはホーム画面追加用アイコン（apple-touch-icon）を別途キャッシュしています。`<link rel="apple-touch-icon" href="/apple-touch-icon.png?v=2">` にもバージョンパラメータを付け、スマホ側でSafariの履歴とWebサイトデータを削除してから再確認してください。