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

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

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

画像パスを確認する

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

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

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

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

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

キャッシュを削除する

画像を変更したのに反映されない場合は、ブラウザやCDNのキャッシュが残っていることが考えられます。あまり知られていませんが、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を設定する方法とサイトアイコンの推奨サイズ」にまとめています。