ブラウザや検索結果でfaviconが出ない？
主な原因と確認すべきポイントと対処法について

最近ではfaviconの重要性が高まってきています。
というのも、Googleの検索結果にfaviconが表示されるようになったというのが非常に大きい要因です。

まだテスト段階などもあってか時折変わっていたりなどする事もあるのですが、Google広告でも「広告主適格性確認プログラム」というのをクリアして、ロゴをアップロードすれば広告にもfaviconが表示される現状ですので、おそらく方向性としてはfaviconが検索結果に表示されるというのはそのまま引き継がれていくのではないかと思います。

広告では審査や色々なものがありますが、いわゆる自然検索結果にはそういった審査などは一切必要なく、設定しているか否かで決まるため、表示されないのは大きな機会損失になってしまいます。

とはいえ、faviconを設定してるのに表示されない…というのは意外とちょくちょく起こりうることで、またその原因も小さなものやなかなか気付きにくいものなどあったりします。

たまに自分もドツボにはまりそうな事もあるため自分メモ＆クライアント様にもこれ確認しておいてというメモ的なことも踏まえてまとめておきたいと思います。

「何が」表示されないのかを正確に把握する

faviconが表示されない！と問い合わせやご相談を受けても、実際にfaviconが表示される箇所というのは多岐に渡ります。

• ブラウザのタブ上のfavicon
• お気に入りに入れた時のfavicon
• Googleなどの検索結果
• スマホのホーム画面のショートカット
• ブラウザのピン止めなど

faviconが影響を与える箇所というのは実は意外と多かったりします。
そのため、faviconが表示されない！と思っても、どの事を言っているのかがわからないと原因を調べるのにも時間がかかってしまいますから、しっかり何が表示されないかを把握しておくようにしましょう。

とはいえ、実際にfaviconが表示される・されないのケースで、大きく分ければ下記の2つのケースに大別できます。

• ブラウザのタブやお気に入り、スマホのホーム画面など
• Googleなどの検索結果

この2つで大きく原因なども変わる事も多いので、それぞれケースバイケースで原因となる代表例なども合わせてみておきましょう。

Favicon Checkerを使って把握しておく

faviconは実は外部ツールのチェックサイトを使うことで、簡易的に今の自分たちのサイトのfaviconがどういう状況かというのを判断することができます。

英語にはなりますが「Favicon Checker」というサイトを使う事で、どういう状況かを確認できますので、ブラウザ上での見え方、iPhoneやAndroidのホーム画面に追加した時にどう見えるかなど、確認しておきましょう。

ブラウザ上やホーム画面に表示されない原因

ということで、まずはブラウザやお気に入りなどいわゆる一般的なサイト閲覧などでfaviconが表示されないケースを見ていきましょう。

そもそも画像のURL・パスが間違ってる

実は意外と一番多いです。
faviconのコードは結構コピペして使い回す事が多いですが、サイトによって画像の呼び出しのパスが違ってるにもかかわらず、前のまま呼び出していた。といったケースが意外とあります。

家電系で動かないという問い合わせで実はコンセント入ってないといったケースが非常に多いのと同じように、当たり前と思ってたところが実は違ってたというのはよくあるケースです。

コピペで最後まで出来ていなかったというケースや、画像のパスが間違ってたなどないか改めて確認しましょう。

必ずアップ後に画像のパスを叩いて確認するのがオススメ

自分は必ず実行しているのですが、意外としていない方も多くて驚くのですが、faviconの設定などあまり表向きに気付かないものなどは、サイト作成が完成しテストアップをした頃に、ソース上からURLを引っ張りだして、全て実際に表示されるかの確認をするようにしましょう。

もしくは、Web Site Explorerなどのツールを使って、画像の呼び出しなどにエラーがないか、チェックするのも1つの手かもしれません。

キャッシュが残っている

これもサイト制作ではあるあるの1つですが、キャッシュが残っていたりするとそのせいでなかなか更新されず、faviconが表示されない！と思ってしまうケースがあります。

キャッシュが残っているということであれば、実際には自分以外の多くの人には見えているというケースも多いので、そこまで気にする必要はないかもしれませんが、キャッシュをクリアして確認するか、別ブラウザやシークレットモードなどでアクセスして確認してみましょう。

特にfaviconの画像を変更した場合では、こういったキャッシュが残っていて前の画像が表示されるというケースが起きやすいので、ブラウザを2種類使ったりなどして確認するようにしましょう。

また、キャッシュをクリアする際、ブラウザによってはfaviconのキャッシュは通常のキャッシュ削除では削除されず別のディレクトリにキャッシュデータが保存されているというケースもあります。

ico形式とサイズなども要確認

今のfaviconでは設定次第ではpng画像やjpg画像などでも対応できるようになってはいますが、もともとのファビコン画像は.icoという拡張子で保存されることが基本でした。

そのため基本は.icoなどで作る事が望ましいですし、またサイズなどもシチュエーションなどによってそれぞれ適切なサイズというのが決まっていたりします。

そのため、今のファビコン画像を作る場合は、マルチアイコン化して作るというのが一般的になっていますので、もしjpgやpngでファビコン画像を作っているなら、変換ツールなどを使えばすぐ対応できますので、.icoでマルチアイコン対応されたファビコン画像に作り変えておきましょう。

テスト環境などでBasic認証をかけている

これはスマホのホーム画面にショートカットを追加した時にfaviconが表示されない場合、これが原因ということが非常に多いです。

ドツボにはまる原因の1つでもあるのがこれだったりします。
公開前のテストなどでBasic認証をかけておくというのはよくあるケースなのですが、当然そのBasic認証をクリアしないと各ファイルにアクセスすることができません。

よくあるケースとしては、自分はブラウザでは既にBasic認証のIDやPASSを入力して認証をクリアにしているので、ブラウザ上で、画像のURLを叩いてアクセスしたらファビコン画像が表示される。

なのに、スマホのホーム画面に追加したら見れない…なぜ？というドツボにはまるのですが、ブラウザ上ではBasic認証を突破していて、スマホのホーム画面では画像ファイルがBasic認証がかかっていてアクセスできず表示されないという結果に過ぎないわけです。

そしてこれ、画面表示の際にBasic認証のIDとPASSを入れていたとしてもNGになるケースもあるので、余計にここでドツボにはまってしまう方も多いです。

ただこのケースは一度テストでBasic認証を外すと通常通り見る事ができるようになるので、一度そういうテストをして問題ないか確認してみましょう。

Googleの検索結果にfaviconが表示されない原因

ブラウザ上などと違って、Googleの検索結果に表示されないというケースで悩む方は多いです。どちらかというとこちらの方がアクセス数などに大きく影響を及ぼす可能性もあるので、なるべく早く解決したい事象かもしれませんので、よくある可能性をまとめておきます。

そもそも画像のURL・パスが間違ってる

これは通常のブラウザ上で表示されないというケースと同じですね。
画像のパスやURLが間違っていれば、当然ながら表示したくてもできないので念のため最初に確認しておきましょう。

サイトを作ったばかり、画像をアップしたばかりの段階

ブラウザ上のfaviconと違い、Googleの検索結果に表示されるには、様々な段階を踏まなければなりません。

簡単に言えば、Googleのbotがサイトにアクセスしてきて、それを認識してGoogle内のデータベースに保存して、それを検索結果に表示するといったステップを踏まなければなりません。

アップしたばかりであれば、当然そもそもGoogleのrobotもまだ認識すらしていない状況になりますので、検索結果に反映されるという事はありません。

サイトを作ってすぐや画像を差し替えてすぐという状況であれば、まずはGoogleの検索用ロボットにアクセスしてもらって、認識してもらうところを急ぎましょう。

Google Favicon ユーザー エージェントによるページのクロールをリクエストするには、サイトのホームページのインデックス登録をリクエストします。更新が検索結果に反映されるまで、数日かかることがあります。

ガイドラインにも、こう書かれてありますから、サーチコンソールからサイトのトップページ（ホームページ）のインデックス登録を速やかにリクエストしましょう。

画像変更でなかなか反映されない場合は、URLを変えるのもあり

新しく作った場合とは違い、画像を差し替えたりした場合、Googleのbotになかなか新しい画像を認知してくれず、ずっと古い画像のまま表示されてしまうというケースが時折あります。

そうなってしまうと、あくまでもGoogleのbot側の問題でこちらで何かできる事というのがなくなってしまい、祈る以外に無くなってしまうのですが、そうはいっても早く差し替えたいという場合は、画像のURLなどを変更すれば、新しい画像として認識しやすくなります。

Googleのガイドラインには、

ファビコンの URL は固定されている必要があります（URL は頻繁に変更しないでください）。

検索結果に表示されるファビコンを定義する

という記載があって変えても大丈夫なのか？という声が聞こえてくるかもしれませんが、基本的なURLは固定にしていて、1回だけの変更であればなんら問題ないと言えますので、頻繁に何度もURLをコロコロ変えるとかでなければ気にしなくても大丈夫です。

Googleのガイドラインに違反している可能性

検索結果にfaviconを表示するかしないかは、当然ながらGoogle側が判断します。そのためのルール的なものをGoogleはしっかりと公開していますので、一度目を通しておきましょう。「検索結果に表示されるファビコンを定義する」

当然ながらこのガイドラインに違反するものがあれば、表示されないという可能性が高まりますので、確認しておきましょう。

faviconのサイズについて

ガイドライン上には、

ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。

検索結果に表示されるファビコンを定義する

という記述が明確にされています。
ただ、実際に確認してみると48ピクセルの倍数になっていない画像でも表示されているものは多数あります。

とはいえ、ガイドラインにこう書いている以上は、やはり48ピクセルの倍数を用意しておく方が良いと言えますが、.icoファイルは16×16や32×32なども必要になるので、上述した通り、マルチアイコン化した「favicon.ico」を作成して用意しておくことがオススメです。

Metaタグの影響によるもの

画像関連のサイトだったり、サイトの運営上のポリシーで、画像を検索結果に表示しないという設定をするケースもあるかもしれません。

Googleに画像を検索結果に表示しないで欲しいタグとして、下記のメタタグが用意されています。

<meta name="robots" content="noimageindex">

このタグがあれば明確にfaviconが表示されないかどうかはまだ試してないのでわからないのですが、このメタタグが入っていればGoogleは指示に従って検索結果に表示しないとなりますので、faviconの画像も検索結果に表示しないというケースになってしまう可能性があり入っているかチェックしておきましょう。

【余談】robots.txtの除外はfaviconに影響しない（らしい）

robots.txtではGoogleのロボットを色々制御できますが、ガイドラインを見ている限りでは、

Google Favicon は、ウェブサイトで定義されたファビコンをダウンロードするためのユーザー エージェントです。アクセス頻度の少ないクローラーであり、インデックス登録の際に収集されたシグナルに基づいて、またはユーザーのリクエストによりトリガーされて、サイトのホームページにアクセスします。Google Favicon ユーザー エージェントによるページのクロールをリクエストするには、サイトのホームページのインデックス登録をリクエストします。更新が検索結果に反映されるまで、数日かかることがあります。

ユーザーがクロールをリクエストした場合、Google Favicon クローラーは robots.txt のルールを無視します。

検索結果に表示されるファビコンを定義する

と書かれてあります。
そのため、robot.txtでGooglebotを制御してもFavicon用のクローラーには影響しないということが書かれてあります。

これがどうこう影響する人なんて全ウェブサイトの中でも極々僅かどころかいるか？という位ですが知識として、あ、これは関係ないんだなと知っておくとfaviconが出ない原因追及の際には助かるかもしれません。

まとめ

faviconが表示されないというのは、昔と違って特に検索結果に表示される今では需要になってきました。

それに伴い作り方やサイトに貼るタグなどにも注意を払わなければなりませんが、それでもなぜか表示されない…というケースは時折出てきます。

実は画像がアップされてなかった、ファイルのパスが違ってたといった基礎的なところから、Googleのロボットがまだクロールに来てなかったり、Basic認証の影響だったり、キャッシュだったりと原因は多岐にも渡りやすくなっています。

「faviconが表示されない」だけでは色々な可能性が考えられるので、どのケースなのかを明確にして1つ1つ原因を調べて表示されるようにしていきましょう。