GoogleのPC検索結果でも表示されるようになったファビコンの設定方法

SEOトレンドレポート
SEO対策実例・コラム
2019.08.30
2019.10.17
GoogleのPC検索結果でも表示されるようになったファビコンの設定方法

今年の5月よりモバイル版の検索結果ではファビコンが表示されるようになっていたのですが、つい先日(8月下旬)よりPCの検索結果でもファビコンが表示されるようになりました。私のPCでも表示されており違和感を感じていましたので、同じ違和感を感じられた方もいらっしゃったのではないかと思います。テスト中ということで、PC検索結果でファビコンが出るときと出ないときがある状態です。
(昨日(8/29)まで表示されていましたが、記事を作成し始めたらファビコンが表示されなくなってしまいましたので、キャプチャ画像は後日追加しておきます。。。)
本日(10/17)、私のPCの検索結果にファビコンが復活しましたので、こちらに載せておきます!!

GoogleのPC検索にもファビコンが出ました

ファビコンってなに?

ファビコンですが略称となっておりまして、正式には「favorite icon(フェイバリット・アイコン)」となり、それを略してfavicon(ファビコン)と呼ばれています。
普段はどこに表示されているかと言うと、ブラウザでWebサイトを見ているとタブに表示されているアイコンのことになります。

弊社の場合、背景色が水色で白抜き文字で「ペ」と書かれたファビコンが表示されているのが見えるかと思います。

株式会社ペコプラのファビコン(favicon)

設定されていないサイトもありますが、現在ではほとんどのサイトがファビコンを設定しており、Googleが今年に入ってモバイル検索に表示させ、まだテスト段階ではありますが、今PC検索での表示を試しているという状態です。

ブラウザで大量のタブを開く人は、ほとんどファビコンしか見えない状態かと思いますので、ないと困る存在とも言えます。

複数のタブを開いた際にファビコンだけがタブに表示されている状態

ファビコンの必要性

ファビコンですが、Webサイトを運営するにあたり設定しなくても問題なくWebサイトは公開できますし、ファビコンがあるサイトの方が検索結果で上位にくるということもないので、そういう意味では設定する必要はないのですが、
ファビコンは大抵の場合、その企業のロゴマークなどが設定されていることが多く、ファビコンでそのページの信頼度を無意識下で判定しているという部分もありますため、設定しておくことでユーザーの利便性向上につながります。

例えば、SEOに関する情報を探しているときにそのページのファビコンがGoogleのものだと情報の信憑性が高いとユーザーは判断しやすくなるため、なるべく設定しておくことをお勧め致します。

ファビコンの設定方法

それでは、実際にファビコンを設定する方法について説明していきます。

ファビコンにしたい画像を用意

まず、最初にファビコンにしたい画像を用意します。企業サイトであれば、企業のロゴマークなどを用意することがほとんどです。
個人のブログなどであれば、ブログのロゴマークなど設定していると思うので、そちらを使うといいと思います。

拡張子「ico」で保存

ファビコンはjpgやpngなど一般的な画像形式でも表示されますが、一部ブラウザではjpgだと表示されないなどあるため、ファビコンに関しては「ico」という拡張子で保存することが一般的となっています。

・有効なファビコンのファイル形式についてはこちら:https://en.wikipedia.org/wiki/Favicon#File_format_support

ファビコンのサイズ

実際にブラウザタブや検索結果に表示されるサイズは16ピクセル×16ピクセルとなりますが、Googleのガイドラインでは48ピクセルの倍数であることが条件となっておりますため、48×48ピクセルや96×96ピクセルなどで保存する必要があります。

その他の注意点として、以下の点が挙げられています。

  • クローラーがクロールできること
  • ファビコンがウェブサイトのブランドを視覚的に表したものとなっており、ひと目でサイトを見分けられるようになっていること
  • ファビコンのURLが固定されていること
  • わいせつな表現やヘイト表現に関するシンボルではないこと
・Googleのファビコンに関するガイドライン:https://support.google.com/webmasters/answer/9290858?hl=ja

ページに設定する

ファビコンの画像ファイルですが、一般的にはルートディレクトリに保存されることが多いです。
理由としてはルートディレクトリに「favicon.ico」というファイル名で保存しておくだけで、各種ブラウザはその画像をファビコンとして認識し、ブラウザのタブなどに表示してくれるためです。

ルートディレクトリ以外に保存したい場合は、ソースの中にファビコンファイルの場所を記述する必要があります。
以下はimagesフォルダに保存した場合の記述方法となります。

<link rel="shortcut icon" href="images/favicon.ico">
Googleのガイドラインでも、上記の記述を求めていますので、ルートディレクトリに画像を保存した場合も念の為書いておくことをお勧め致します。

まとめ

今回は、Googleが積極的に検索結果に採用を開始しているファビコンについて説明させていただきました。
Googleのガイドラインでもありますが、ファビコンは「ブランドを視覚的に表したもの」ですので、ユーザーにファビコンを見ただけでどこのサイトかわかっていただけるように、わかりやすく小さい画像でも視認しやすいデザインを選択してください。

また、そのファビコンを見たらどのサイトかというのをユーザーがすぐに判断できるようになってもらうため、頻繁にデザインを変えることがなくてもいいように最初から長期利用することを想定してデザインを決めましょう。
これからPCの検索結果にも常時出てくる可能性がございますので、まだ設定されていないというWeb担当者の方は、この機会に是非設定してみてください。

SEOやWEB制作に関する情報を検索

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。

お電話でのお問い合わせはこちら

03-5829-9912

受付時間:平日10:00~19:00(土・日・祝日を除く)