SEO | Google先生がファビコン表示に力を入れ始めている

Search Engine Optimization

Googleでのファビコンの見え方

Googleの検索結果とiPhone,iPadにちょうどいいサイズのファビコンについて解説しています。注:2020年03月時点の記事です。

公式な情報ではないので、参考程度にご覧ください。

-
記事公開日:
記事更新日:2020年03月27日

Google社がファビコンに力を入れているのでSEO的に対応が必要かもしれない

「ファビコンってそんなに重要か?めんどくさっ」と思って放置していたのですが、Google先生がファビコン表示に力を入れ始めているようなので、
重い腰を上げて作ることにしました。

2019年頃~2020年3月現在、Google検索結果のPC版とスマートフォン版の両方で、ファビコンが表示されたりされなかったりA/Bテストが継続中です。

2020年3月7日のGoogle検索PC版の結果

当サイトはPCユーザーからのアクセスが大半なので、
スマホ版Googleはあまり気にしていなかったのですが、

2020年3月5日時点のGoogleスマホ検索結果のファビコン例
ファビコンを設定していない状態での
スマートフォンGoogle検索結果(2020年3月5日時点)

…ファビコンが無いと非公式サイトに見えますね。

スマートフォンはさておきPC版のGoogle検索結果でもファビコンが表示されるようになるのであれば、BtoBの中小企業にとってかなりインパクトが大きい変更になります。 16x16ピクセルでハッキリ見える正方形の企業ロゴを持っている会社はそうそうないですからね…。Googleさんもこの辺を認識しているからか長期にわたってA/Bテストされています。 もしこの変更が確定されるのだとしたら、SEO(小手先のSEOではなく正しい意味での最適化)的に重要度は高いです。

ホームページに限っていえば、必要なファビコンは2種類

※WindowsメトロUIやMacのTouch Bar等はホームページ閲覧やSEOには影響しないので当サイトでは除外して説明しています。

面倒なら64x64の「/favicon.ico」だけ作れば良い。
HTMLの<head>内に必要なタグは<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">だけで、他のファビコンに関する記述は不要です。

64x64を超えるとMicrosoft Edgeでファビコンが表示されない、 48x48だとiPhoneのChromeブックマーク画面で画像がボケる、 64px以下のファビコンはiPadのSafariブックマーク画面で表示されない。 等の問題があるので、
ico形式は64x64だけ作ればOKです。

逆にいうとico形式には1つのファイルに複数の画像サイズを含めることができますが、64x64サイズだけのico形式を作らないと様々なトラブルに巻き込まれる事になります。 注意点として、16x16に変換されると見た目の印象が大分変わりますので、あまり細かいデザインは避けた方が良いです。

ファビコンが16ピクセルに変換されると大分印象が変わる例

Googleさんの公式情報にもGoogle では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください。 と記載されています。(2020年3月8日時点)

iPhoneとiPadは120x120の「/apple-touch-icon.png」があれば尚良し。

ホームページはアプリではないので、別にホーム画面に追加されなくてもいいのですが、 標準ブラウザのSafariブックマーク画面で64x64だと画像が若干ボヤけるので、 気になる方は120x120の画像を用意しておくと良いでしょう。(透過PNGは「ホーム画面に追加」された場合は黒背景になりますので背景色は指定しておいた方が良いです) ちなみにiOSのSafariはバックグラウンドで自動的に「/apple-touch-icon.png」にアクセスして来るので、 HTML側に特別な記述をする必要はありません。

favicon.icoとapple-touch-icon.pngはドキュメントルート直下に配置します。

重要事項1: Google検索では一般的すぎるファビコンはデフォルトに変換される

簡単な図形のファビコンで作成していたサイトがあったのですが、待てども暮らせどもGoogle検索結果にファビコンが表示されず、Googleデフォルトの地球儀アイコンのままという事がありました。

Google検索結果では一般的なファビコンは拒否される
注:あくまでサンプルです。実際には使っていないファビコンなので、
もし同じファビコンを使っている方がいても当方とは関係ありません。

Googleさんの公式情報 検索結果に表示されるファビコンを定義する ではその他「かぎ十字章」(いわゆる卍)等もNGとされています。

ファビコン専用のロゴを再考する必要がある会社の例

漢字やひらがな一文字のファビコンは他者と被っても普通に表示されるようですが、UIアイコンに見えるものはダメなようです。

めんどくさい、めんどくさすぎるよファビコン…。

重要事項2: ファビコンをデプロイする時は1発勝負だと思って実施すること

ファビコンに関してはデバイス毎の差違が多く、

特にiPhoneのSafariは1度「お気に入りに追加」されてしまうとファビコンを修正しても反映されるまでに結構な時間を要します。 私の手持ちの環境では1週間前後で修正版のファビコンが反映されましたが、インターネットの情報を見ると3ヶ月間ファビコンのキャッシュが残っていたという方もいるようです。 その間、iPhoneの設定画面でSafariのキャッシュをクリアしても再起動しても新しいファビコンは反映されません。 自分のサイトなら別に問題ないですが、請負の場合はトラブルになりかねませんので事前にクライアントにキャッシュの問題をしっかり説明して同意をとっておいた方が良いでしょう。

以上、また何かあれば追記します。

-
-