WordPressで設定したファビコンが表示されない時の対処方法

こんにちは、Yotsu（@Yotsublog）です。

WordPressでファビコンを設定したけど表示されていない…

ちゃんと設定できているか確認する方法を知りたい。

そんな疑問にお答えできる記事になっています。

WordPressでファビコンを設定したのに、ブラウザのタブに表示されない。

Google検索結果に、自分で設定したファビコンが表示されず、WordPressデフォルトのロゴマークが表示されている。

このような状況の時に、ファビコンがきちんと設定されているか確認する方法・Google検索結果にファビコンを反映させる方法をご紹介します。

※本記事では、ブラウザはchromeの使用を前提としています。

それではいきましょ〜！

ファビコンが反映されない理由・対処方法
ファビコンがGoogle検索結果に表示されない場合
ブログの顔になるファビコン！ちゃんと設定できているか確認しよう

ファビコンが反映されない理由・対処方法

ファビコンを設定したのに反映されない理由は、以下のいずれか可能性が高いです。

そもそも設定ミスをしている
ブラウザのキャッシュが残っている

設定ミスであればキャッシュの以前の問題なので、設定のチェックからしてみましょう。

ちゃんと設定できているかをツールで確認（Favicon Generator）

Favicon Generatorでは、ブログのURLを指定するだけで簡単に設定されているファビコンのチェックができるサイトです。

英語のサイトですが、ブラウザのタブやスマホのホーム画面に表示されるプレビューが表示されるので、英語が苦手でも大丈夫です。

チェックした結果、設定したファビコンのプレビューが表示されたら設定ミスではないと判断できます。

上記サイトにアクセスして確認しましょう。

『Check your favicon』で調べたいブログのプロトコル（httpかhttpsか）を選んで、テキスト入力欄にそれ以降のURLを入力してください。

当ブログだと「https://」・「yotsublog.com」です。（トップページのURL）

『Check Favicon』をクリックするとファビコン設定のチェックが始まり、10〜15秒で結果が出ます。

WordPress管理画面から設定できるファビコンは最低限の種類だけなので、かなりエラーが出ていますがブラウザ、スマホホーム画面、PCデスクトップでの表示に関しては以下のプレビューが表示されていれば問題ありません。

カエルファビコンがプレビューされているので、ちゃんと設定できていることが確認できました。

プレビューに設定したファビコンが表示されない場合は、設定がうまくいっていません。

以下でサイトアイコンの作成〜WordPressの設定方法を解説しているので、再度設定にトライしましょう。

>>サイトアイコン(ファビコン)作成〜WordPressに設定する方法

ブラウザのキャッシュを削除してファビコンを再確認

ファビコンを設定したのにブラウザに反映されない場合は、ブラウザが以前のファビコンデータをキャッシュしていることが原因として考えられます。

キャッシュを削除して、ブラウザを再起動してファビコンを確認してみてください。

chromeでは以下手順でキャッシュ削除ができます。

→ […]マークをクリック

→ [その他ツール(L)] → [閲覧履歴を消去(C)]

→ [キャッシュされた画像とファイル]にチェックを入れて、[データを削除]

Chromeを再起動して、ブログにファビコンが反映されていればOKです。

しかし、ファビコンの画像ファイルのキャッシュはかなり強力で、上記手順では消えない場合があります。

まだ反映されない場合は、PCに保存されているファビコンのキャッシュファイル自体を削除してしまう方法が確実です。

ファイル『Favicons』を削除しましょう。

格納場所はMacとWindowsそれぞれ以下の通りです。

Mac：/Users/ユーザー名/Library/Application Support/Google/Chrome/Default/Favicons
Windows：C:\Users\ユーザー名\AppData\Local\Google\Chrome\User Data\Default\Favicons

※他のファイルを削除してしまうとchromeが動作しなくなる可能性があるので、慎重に作業してください。

他のデバイスでファビコンを確認

他のデバイスで確認してみましょう。

自分のブログにアクセスしたことのない端末であれば、キャッシュの心配はないので一番手っ取り早い方法ですね。

昔使っていたスマホや家族のスマホ・パソコンを借りて見るのも良いですね。

ファビコンがGoogle検索結果に表示されない場合

ブラウザやホーム画面にはちゃんと反映されているのに、Google検索結果にだけファビコンが反映されないケースも存在します。

当ブログもファビコン設定から7日間、検索結果にカエルアイコンが表示されませんでした。。。

結論から言うと、問題のないファビコンを設定してからクローラーにクロールされる必要があります。

Google先生がファビコンに関するガイドラインを公表しているので、内容を１つずつ見ていきましょう。

Point1：ホームページのクロールができること

Google がファビコンのファイルとホームページをクロールできること（Google をブロックしないこと）。

Google先生は、ホームページをクロールする時にファビコンの有無や変更されているかを確認します。

つまり、検索結果へのファビコン表示にはブログがクロール・インデックスされることが大前提と言うことです。

noindexになってないかを確認しましょう。

WordPress管理画面 [設定] → [表示設定]の「検索エンジンがサイトをインデックスしないようにする」に、もしチェックが入っている場合はインデックスされないのですぐにチェックを解除してください。

サーチコンソールからインデックスをリクエストするのも効果アリです。

Point2：ファビコンは視覚的にわかりやすいこと

ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。

Google検索結果に表示されるファビコンは16 x 16ピクセルとかなり小さいです。

このサイズで『一目でサイトを見分けられる』ファビコン画像を選択しておけばOKです。

『ウェブサイトのブランド』を表すとGoogle先生が公言しているので、既存のファビコンの模倣などガイドラインの意図に反する画像は避けるようにしましょう。

Point3：画像サイズが48ピクセルの倍数になっていること

ファビコンのサイズが 48 ピクセルの倍数になっていること（例: ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。

WordPressでファビコン設定した場合、このガイドラインに関してはあまり気にしなくてOKです。

WordPressで推奨の512 x 512ピクセル以上の正方形の画像ファイルをファビコン設定すると、各サイズのファビコンを内部で自動生成してくれます。