ファビコンが表示・更新されないとき

著者

ファビコンが表示されない原因は、必ずしもファイル自体とは限りません。ブラウザ、CDN、サービスワーカー、検索エンジンが、それぞれ違う版を保持している可能性があります。順序立てて調べることで、複数の条件を同時に変えずに原因を絞れます。

ファビコン読み込みの各層を調べる虫眼鏡
URL、HTML、キャッシュ、クロールを別々に確認しましょう。

ファイルのリクエストから調べる

link要素が参照する正確なURLを開きます。認証なしで、適切な内容が、不要な連続リダイレクトなく返る必要があります。favicon.icoという名前でも、HTMLエラーページならアイコンとして読み込めません。

ネットワークパネルでiconまたはfaviconに絞り込みます。最終URL、ステータス、コンテンツタイプ、キャッシュから返されたかを記録してください。

ファビコン診断の順序
確認項目期待する結果修正方法
直接URL200で画像を返すパスやデプロイを修正
link要素head内に存在出力HTMLを修正
キャッシュ新しい応答を取得削除して再確認
クロール可否ファイルにアクセス可能ブロックを解除

実際に出力されたHTMLを確認

元テンプレートだけでなく、生成された文書を調べます。拡張機能、テーマ、コンポーネントが別のアイコン要素を後から追加し、ブラウザがそちらを選んでいる可能性があります。

深い階層のページからのパスと、ファイル名の大文字・小文字を確認します。大文字・小文字を区別するサーバーでは、Favicon.svgとfavicon.svgは別ファイルです。

キャッシュを層ごとに切り分ける

まず新しいプロファイルか、ネットワークキャッシュを無効にして試します。配信元には新画像があるのに公開ドメインでは古い場合、CDNをパージしてください。PWAをインストールしている場合はサービスワーカーとマニフェストも確認します。

次回の更新では、バージョン付きファイル名にすると変更を明確にできます。慣例として要求するクライアント向けに/favicon.icoも維持してください。

一次資料

よくある質問

古いファビコンが戻るのはなぜですか?

キャッシュ、サービスワーカー、重複したアイコン要素が古いファイルを返している可能性があります。削除する前に、実際に読み込まれたURLを確認してください。

バージョンのクエリパラメーターだけで十分ですか?

一部のキャッシュを回避できますが、新しいファイル名のほうが明確な場合があります。代替の/favicon.icoは維持してください。

Googleのファビコンはすぐ変わりますか?

いいえ。Googleがページとアイコンを再クロールして処理する必要があります。正確な所要時間は保証されていません。

実際に作ってみる

ファイル一式を数秒で無料生成。画像をアップロードする必要はありません。

公開ファビコンを診断

次に読むガイド・試すツール

LFFaviconのその他のツールと、よくある疑問に答えるガイドをご紹介します。

ツール

ガイド