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

SEO対策実例・コラム
コンテンツSEO・コンテンツマーケティング
2020.06.15
2020.06.25
GoogleのPC検索結果でも表示されるようになったファビコンの設定方法

※2020年1月以降ファビコンは検索結果から消えています。「ユーザーからのフィードバック取り入れて変更を試しており、時間をかけてデザインの調整を繰り返す」ということですが、2020年6月現在、検索結果にファビコンは表示されていません。

2019年の5月よりモバイル版の検索結果ではファビコンが表示されるようになっていたのですが、つい先日(2019年8月下旬)よりPCの検索結果でもファビコンが表示されるようになりました。私のPCでも表示されており違和感を感じていましたので、同じ違和感を感じられた方もいらっしゃったのではないかと思います。テスト中ということで、PC検索結果でファビコンが出るときと出ないときがある状態です。

ファビコンってなに?

まずファビコンとは何か、という点から説明します。

ファビコンという名称は略称となっておりまして、正式には「favorite icon(フェイバリット・アイコン)」となり、それを略してfavicon(ファビコン)と呼ばれています。元々はwebサイトをお気に入りに登録した際に出てくるアイコン、という意味で、現在ではそれを略してファビコンという名前で呼んでいるというわけです。
普段はどこに表示されているかと言うと、ブラウザでWebサイトを見ているとタブに表示されているアイコンのことになります。

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

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

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

ブラウザで大量のタブを開く人は、ほとんどファビコンしか見えない状態かと思いますので、ないと困る存在とも言えます。ファビコンを普段から注意して見ているという人は少ないと思いますが、ユーザーは無意識のうちにファビコンを視認し、このマークはこのサイト、という認識を無意識のうちに行っているのです。

また、ファビコンはブックマークの際にも表示されます。ブックマーク欄をよく確認すると、ブックマークの左端の部分にサイトごとのファビコンが表示されています。ブックマークの内容を把握するために、無意識にファビコンを見てサイトの中身を見分けている、という方もいらっしゃるのではないでしょうか。

ファビコン

ファビコンの必要性

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

また、ファビコンにはもう一つ、サイトのブランディングという効果があることも忘れてはいけません。このサイトはこんな情報を取り扱っているんだな、ということが一目でわかるファビコンや、社名やサイト名がわかりやすいファビコンは、検索でサイトを見つけた人に第一印象でわかりやすさを伝えるという目的を持っています。そのサイトの専門分野がある場合、ファビコンで情報の信ぴょう性を測るユーザーもいるので、ファビコンはそういったユーザーをサイトに誘導してくれるという役割も持っています。

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

また、ファビコンは人の視覚に訴えるシンボルのような存在です。そのため、できるだけシンプルで、見た目にもインパクトのあるデザインのものにすることが大切です。

私たちはファビコンを普段から集中的に見ている、というわけではありません。しかし、webページを閲覧した際や、そのページをブックマークに入れた際に、特徴的な画像をファビコンに設定しておくことで、間接的にページビューの増加に良い影響を与えることがあります。

ファビコンの設定方法

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

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

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

なるべくファビコンのデザインはシンプルに、なおかつサイトの特徴を表しているデザインのものを選ぶと良いでしょう。サイトのテーマに関連するアイテムや、会社のロゴマークを使う場合は、一目見てぱっとわかるような簡潔な画像かどうかをチェックしてから使うのがおすすめです。

また、サイズは大きなものを設定するか、いくつかの種類のものをまとめてアップロードしておくのがおすすめです。

詳しくは後述しますが、ブラウザの種類やスマホからのアクセスによって、ファビコンの表示される大きさが変わってくることがあります。どのようなサイズで表示されたとしても、ファビコンがきれいに見えるようあらかじめ大きいサイズのものをアップロードしておくか、.icoという拡張子で大きさがちがうものを複数アップロードしておくと、環境が変わったときにファビコンが崩れて見える、という事態を防ぐことができます。

拡張子「ico」で保存

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

なぜかというと、ファビコンは一般的に「16px × 16px」という形状で表示されることが多いですが、サイトによって「24px × 24px」であったり、「32px × 32px」であったりと、表示されるサイズにばらつきがあるためです。「.ico」という拡張子で保存すると、複数のサイズの画像を一つにまとめることができます。この拡張子で保存しておくことで、HTMLにファビコンの設定をするときに画像のサイズ指定をするという手間を省くことができます。

また、ファビコンの拡張子は、ファビコン用の画像変換サイトでも作ることができます。pngやgifで作成されたファビコン用のロゴをサイトで変換するだけで、簡単にファビコン用のアイコンを作成することができるので便利です。

・有効なファビコンのファイル形式についてはこちら: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

ファビコンは、そのサイトの性質や特徴を表すシンボルマークです。そのため、ファビコンを設定するということは、そのマークを使って自分のサイトをブランディングする、という意味があります。そのため、一目でわかり、見分けがつきやすいマークをファビコンとして設定するのが良いでしょう。

また、先述のGoogleガイドラインの条件を全て満たしていても、ファビコンが必ず表示されるとは限らないようです。ファビコンを設定しても反映されない、という場合は、画像を変更してみたり、上げなおしたりしてクローラーが読み取りやすいようにしてあげましょう。

ページに設定する

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

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

<link rel="shortcut icon" href="images/favicon.ico">

Googleのガイドラインでも、上記の記述を求めていますので、ルートディレクトリに画像を保存した場合も念の為書いておくことをお勧め致します。

また、サイト構築にワードプレス(バージョン4.3以降)を使用している場合、「サイトアイコン」という機能を使うことで簡単にファビコンを設定することができます。

「管理画面」
 「外観」→「カスタマイズ」→「サイト基本情報」

とアクセスすると、「サイトアイコン」と表示されている項目があります。ここに任意の画像をアップロードすることで、簡単にサイトにファビコンを設定することができます。

こちらの方法でファビコンを設定する場合、.ico形式である必要はありません。png形式のファイルを選択してアップロードするだけで大丈夫です。

また、アップロードできるサイズは512px × 512pxです。通常のファビコンと比較するとかなり大きなサイズの画像なので、ファビコンをワードプレスから設定する際は気を付けましょう。

まとめ

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

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

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

コラム

ピックアップコラム

最新コラム

人気コラム

過去の記事

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

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

03-5829-9912

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