設定したファビコンがなぜか表示されない！原因別の解決法を解説

favicon（ファビコン）はサイトのブランドイメージにもなる大事な要素です。サイト訪問者がブックマークや履歴からサイトを見つけやすくなるだけでなく、タブやウィンドウで開いたページを一目で識別できるようにする役割も担っています。

ちゃんとfaviconを設定したのになぜか表示されていないことがあります。

この記事では、faviconが表示されないときの原因と対処法を解説します。

faviconが表示されない症状

まずは、faviconが表示されない症状は以下のパターンがあります。

• ブラウザのタブにすら表示されていない
• ブラウザのタブには表示されているのに、検索の時には表示されない
• ブラウザのタブには表示されているのに、検索の時にWordPressのアイコンになっている

これらそれぞれ解決方法を説明します

ブラウザのタブにすら表示されていない

これはそもそもfaviconの設定方法が間違っている可能性が高いです。

リンクのパス・ファイル名が間違っている

faviconは、ルートディレクトリにfavicon.icoを設置するか、headタグに

<link rel="apple-touch-icon" sizes="180x180" href="https://example.com/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://example.com/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://example.com/favicon/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" sizes="16x16" href="https://example.com/favicon.ico">

このようにlinkタグを設置することで表示させることができます。

apple-touch-iconやfavicon-32x32など、appleやandroidのブックマーク用で用意するのが良いとされています。

favicon.icoはルートディレクトリに設置するのが良いとされています。.htaccessなどでリダイレクトさせても問題なく表示されます。

これらの設定をして、ファイルの設置箇所と設定したパスが間違っていないことを確認してください。

画像の生成はファビコンジェネレーターがおすすめです。png画像を用意するだけで必要なサイズ・拡張子のファイルを生成することができます。

ブラウザのタブには表示されているのに、検索の時には表示されない

この原因は、ファイルの設置箇所ではない場合が多く、変更して即座に反映されるわけではない問題が原因の可能性が高いので、以下の対処法を全て試した上で数日（だいたい1週間前後）待機してください。

ico拡張子のfaviconを設置する

タブのfaviconはpngで設置して、linkタグでパスを指定するものでも正常に表示されますが、検索エンジンはicoを推奨している場合があります。

favicon.icoを設置し、正しくlinkタグでパスを指定してください。

検索エンジンがページをキャッシュしている

Googleなどの検索エンジンは一度クロールしたページをキャッシュし、定期的に再クロールしてタイトルやディスクリプションなどを更新しています。

ページが更新されていない場合や検索エンジンからクリックされていない場合など、さまざまな要因で検索エンジンが、faviconを認識しないままキャッシュしている可能性があります。

Google Search ConsoleからサイトのページをURL検査をおこない、改めてインデックス登録をリクエストすると改善される可能性があります。

robots.txtがfavicon.icoファイルのクロールをブロックしている

あまりない例ですが、独自に作ったサイトやプラグインによって、たまに起こる症状です。

特にfaviconを専用フォルダーに保存している場合などに起こりやすいと考えられます。

これが原因かどうかは、先ほど同様、Search Consoleで確認することが可能です。サイトのページではなく、favicon.icoを設置している場所のURL検査をおこなってください。

もしrobots.txtによってブロックされていますと表示された場合は、robots.txtに以下の行を追加してください。

User-Agent: Googlebot
Disallow: ...
....
Allow: /faviconの階層/

ここで注意なのが、記述場所は`User-Agent: Googlebot`の下で、`Disallow: なんちゃら`と書いてある部分のさらに下に記述する必要があります。

この設定をした状態でしばらく待ってからもう一度Search ConsoleでURL検査をおこなってみてください。

ブラウザのタブには表示されているのに、検索時にWordPressのアイコンになっている

これはテーマでfaviconを用意した場合に発生しやすい症状です。この症状も、変更して即座に反映されるわけではない問題が原因の可能性が高いので、以下の対処法を全て試した上で数日（だいたい1週間前後）待機してください。

WordPressの機能を使ってみる

管理画面の「外観」→「サイト基本情報」→「サイトアイコンを選択」からアイコンの画像を選択することで解決する場合が多いです。

ただし、テーマによってはアイコンをいじれないことや、管理画面のみfaviconを変更したい場合など特殊な場合で使用することができない可能性があります。

検索エンジンがWordPressのfaviconをキャッシュしている

検索エンジンがfavicon自体をキャッシュしている可能性です。

GETパラメーターをlinkタグのパスの後ろに記載すると解決する可能性があります。

<link rel="apple-touch-icon" sizes="180x180" href="https://example.com/wp-content/themes/zatyBlog2021/favicon/apple-touch-icon.png?ver.001>
<link rel="icon" type="image/png" sizes="32x32" href="https://example.com/wp-content/themes/zatyBlog2021/favicon/favicon-32x32.png?ver.001">
<link rel="icon" type="image/png" sizes="16x16" href="https://example.com/wp-content/themes/zatyBlog2021/favicon/favicon-16x16.png?ver.001">
<link rel="shortcut icon" type="image/x-icon" sizes="16x16" href="https://example.com/wp-content/themes/zatyBlog2021/favicon.ico?ver.001">

上記のコードのhrefの部分をご覧いただけると分かる通り、パスの後ろに`?ver.001`を追記しました。

これでページをクロールした際に新しいfaviconだと判断され、faviconを再設置してもらえるようになります。

ルートディレクトリのfavicon.icoのリダイレクト問題

WordPressは、/favicon.icoにアクセスすると/wp-includes/images/w-logo-blue-white-bg.pngにリダイレクトする設定になっている場合があります。

このリダイレクト先をテーマのfavicon.icoが保存されている階層に変更することで改善する場合があります。

まずは、/favicon.icoとURLを打った時にWordPressアイコンにリダイレクトされているか確認してください。

されていた場合は、.htaccessを以下のように追記してください。

# faviconのリダイレクト処理
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^favicon\.ico$ /wp-content/themes/{テーマ名}/{faviconが入っているディレクトリ}/favicon.ico [R=301,L]
</IfModule>

このリダイレクトの記述はWordPressの記述されている項目より前に追記する必要があるので、注意してください。

ほとんどの場合は.htaccessの一番初めに追記すれば問題ありません。

これでもう一度、/favicon.icoにアクセスしてみてください。ブラウザがリダイレクト処理をキャッシュしている場合があるので、プライベートウィンドウで再アクセスすることをお勧めします。

まとめ

今回はfaviconが表示されないときの解決策を症状別に解説しました。

今回の記事は必要な階層に書き換えた上でコードを編集する必要があるので、.htaccessの設定や、robots.txtの設定など、初心者には分かりにくい部分も多いと思います。

特に、.htaccessは設定方法を間違えるとサイトのパフォーマンスが落ちたり、SEO効果が下がったり、最悪の場合サイトが表示されなくなる可能性もあります。バックアップをとり、十分理解した上で作業することをオススメします。