背景
GoogleのPC検索結果にファビコンが表示されるようになった。
が、指定のファビコン画像ではなく、タッチアイコンに指定している別の画像が表示されてしまっていた。
現状
問題のサイトではアイコン類を以下のように指定。
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="192x192" href="/touch-icon.png">
タブやお気に入りのファビコンは favicon.ico
が表示されているのだが、
検索結果は touch-icon.png
が表示されてしまっている。
検索結果でも favicon.ico
を表示したい。
Googleのガイドライン
Googleのガイドラインは以下のページに記載されている。
疑いポイント1:アイコンのサイズ
ガイドライン では以下のように指定されている。
ファビコンのサイズが 48 ピクセルの倍数になっていること(例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど)。SVG ファイルの場合は、サイズに関して特別な指定はありません。有効なファビコン形式は、すべてサポートされています。Google では画像サイズを 16 x 16 ピクセルに変換するため、その解像度で適切に表示されるか、あらかじめご確認ください。16 × 16 ピクセルのファビコンは指定しないでください
対して、問題のサイトのアイコンのサイズは 64 x 64
。
サイズ違反が原因?
疑いポイント2:アイコン系の記載順
ガイドライン では以下のように指定されている。
rel 次のいずれかを指定できます。 ・"shortcut icon" ・"icon" ・"apple-touch-icon" ・"apple-touch-icon-precomposed"ホームページのヘッダーに次の構文の タグを追加します。
対して、問題のサイトではアイコン系の設定を以下のように2つ記載している。
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="192x192" href="/touch-icon.png">
記載順から apple-touch-icon
がファビコンとして認識されている?
結論
「疑いポイント:2」のアイコンの記載順が原因っぽかった。
以下のように記載順を修正することで、Googleの検索結果に favicon.ico
が表示されるようになった。
※ただし、反映まで2日ほどかかった。
<link rel="apple-touch-icon" sizes="192x192" href="/touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
サイズについては、64 x 64
のままで表示されるようになったので、
ガイドラインに沿っていなくてもよしなにやってくれるようです。