faviconが表示されない・反映されないときの原因と対処法

簡単に設定できるファビコンですが、思わぬところで表示されず悩んでしまうこともあります。設定したのにブラウザのタブや検索結果に表示されない、変更したのに古いアイコンのままになる、といったトラブルはよく起こります。

ここでは私が修正して解決できた内容についていくつかご紹介しますので、確認してみてください。

画像パスを確認する

まず見直したいのは、ファビコン画像が実際に置かれている場所と、HTMLのhref属性に指定したURLが一致しているかどうかです。

パスが一文字でも異なると画像は読み込まれず、ファビコンは表示されません。設定しているURLでブラウザに画像が表示されるか確認してみてください。

BASIC認証がかかっていないか確認する

公開前の確認環境をクライアントや第三者に見てもらう際に指摘されたことがあります。

サイト全体にBASIC認証をかけている場合、ファビコンが表示されないことがあります。BASIC認証を解除する、またはサイト公開後に改めて確認してみてください。

キャッシュを削除する

画像を変更したのに反映されない場合は、ブラウザやCDNのキャッシュが残っていることが考えられます。

シークレットウィンドウでも表示されなかった

以前サイトを作っていたとき、途中からファビコンを追加したのに、いつまでたってもタブに表示されないことがありました。パスを見直しても間違いはなく、再読み込みしても変わりません。キャッシュを疑ってシークレットウィンドウで開いてみましたが、それでも表示されませんでした。

ところが別のブラウザで開くと、ファビコンはちゃんと表示されました。サイトの設定は正しく、ふだん使っているブラウザに「ファビコンがない」状態が残っていただけでした。

この時は、Chromeを使用していたのですが、こちらを完全に終了して（タブを閉じるのではなく、アプリを終了して）開き直すことでファビコンが表示されました。

シークレットウィンドウでもキャッシュが残る理由

シークレットウィンドウで使われないのは、ページや画像の通常のキャッシュです。ファビコンはそれとは別の場所に保存されているため、シークレットウィンドウでも前の状態が出てくることがあります。

Chromeでは、ファビコンは閲覧履歴と一緒に専用のデータベースに保存されます。シークレットウィンドウでは新しく保存しませんが、ふだんのウィンドウで保存したファビコンは読み込むことがあります。そのため、「ファビコンなし」の古い状態がシークレットウィンドウでも出てきます。

Safariでは、ファビコンは「Favicon Cache」という専用の場所に保存され、プライベートウィンドウでもこれが使われます。Safariはこのキャッシュがなかなか更新されないことで知られていて、反映まで数日かかることもあります。

サーバー側のキャッシュが原因のこともある

サーバーのキャッシュ機能やWordPressのキャッシュ系プラグインで、ページを一時保存して返していることもあります。この場合は、ファビコンのタグを追加しても、サーバーがタグのない古いページを返し続けます。どのブラウザで見ても、シークレットウィンドウでも表示されません。

確認には、ブラウザの開発者ツールを使います。ネットワークタブを開いてページを再読み込みし、一番上に表示されるページ本体（種類が「document」の行）を選びます。レスポンスヘッダーに x-nginx-cache や x-cache、cf-cache-status のような項目があり、値が HIT なら、サーバーに保存されたページが返されています。MISS なら新しく作られたページなので、サーバー側のキャッシュは原因ではありません。項目名はサーバーによって違い、表示されない場合もあります。

なお、Chromeではファビコンはブラウザ本体が読み込むため、favicon.ico はネットワークタブに表示されません。favicon.ico の応答を見たいときは、ファイルのURLを直接開いてから確認してください。

確認と対処の手順

1. ページのソースを開き、<link rel="icon"> のタグが入っているか確認する
2. ファビコンのURL（https://example.com/favicon.ico など）を直接開いて、画像が表示されるか確認する
3. 別のブラウザやスマホで開いてみる
4. 別のブラウザでは表示される場合は、ブラウザを一度完全に終了して開き直す（Macなら ⌘Q）
5. それでも直らなければ、閲覧履歴データの削除で期間を「全期間」にして、「閲覧履歴」と「キャッシュされた画像とファイル」を削除する
6. どのブラウザでも表示されない場合は、サーバーやプラグインのキャッシュを削除する

別のブラウザで表示されれば、サイトの設定は問題ありません。時間がたてば反映されるので、急がない場合はそのまま待っても大丈夫です。

Slackのように、URLを貼るとファビコンやタイトルを自動で表示するチャットツールも、ファビコンを独自に保存しています。古いアイコンが出続ける場合は、そのツール側でキャッシュを削除してみてください。

検索結果に表示されない場合

サイト側の設定に問題がなければ、Googleのガイドラインを見直します。ファビコンは48pxの倍数のサイズにし、最低でも48px以上を用意することが推奨されています。あわせてGooglebot-Imageによるファビコンファイルへのクロールと、Googlebotによるトップページへのクロールが許可されている必要があります。

参考：検索結果に表示されるファビコンを定義する – Google Developers

設定に問題がなくても、必ずしも表示されるとは限らないようです。反映までに時間がかかる場合もあり、設定に問題がなければ時間が解決してくれることもあります。数日から数週間ほど様子を見るのも一つの方法です。

変更したファビコンの一部だけ反映されない

favicon.icoのみ変更してapple-touch-icon.pngを変更し忘れている、といったケースはよくあります。ブラウザタブでは新しい画像が表示されるのに、検索結果やスマホのホーム画面では古いアイコンのまま、という場合は、ファビコンとして機能しているファイルすべてが更新されているか確認してみてください。

私は以前このサイトのファビコンを変更しました。
変更前はWordPressの管理画面からファビコンの設定をしていましたが、ブラウザタブのファビコンが表示されなかったため、HTMLファイルでのファビコン設定に切り替えました。その際にファビコンも少し変更を加えたため、異なるファビコンが表示されるはずです。

しかし変更後、ブラウザタブでは変更した画像が表示されるのですが、検索結果やスマホのホーム画面などでは旧ファビコンが表示されてしまいました。

この時は変更時に favicon.ico のみ変更し、apple-touch-icon の画像を変更していなかったのです。apple-touch-icon.png の画像を変更したら、無事どこでも同じファビコンが表示されるようになりました。

うまく表示されない時は、ファビコンとして当てはまるファイルが全て変更されているかの確認も必要です。

WordPress管理画面から設定している場合

管理画面のサイトアイコン設定のみでは、テーマやキャッシュ環境によって反映されないことがあります。設定手順や注意点は「WordPressでfaviconを設定する方法とサイトアイコンの推奨サイズ」にまとめています。