コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

Googleに表示されるためのfavicon設定に関してざっくり整理する

Tips

2020年1月時点で検索結果にfaviconが出るようになったのでざっくり調べた結果とか。HTML5の仕様とGoogleのガイドラインを読んでざっくりやっておいたほうがいよね的な仕様。

そもそものfavicoの仕様

以前紹介してるが、HTML5から標準化されている

faviconの仕様はHTML5から標準化されている - コード日進月歩

Google検索向けの仕様

案内が下記ページにある。

検索結果に表示されるファビコンを定義する - Search Console ヘルプ

大きく以下4つに関して言及があるのでそれぞれざっくり引用ベースで記述します。

ファビコンの内容そのものの注意点

ファビコンの絵としてどういうものでないといけないかというものが定義されている。以下まま引用。

・faviconがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。 ・わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。

バイナリファイル内容としての注意点

かなり定義が大味のドキュメントとなっている、以下の通り。

  • faviconのサイズが 48 ピクセルの倍数になっていること
    • SVG ファイルの場合は、サイズに関して特別な指定はありません。
  • 有効なfacvion形式は、すべてサポートされています。

有効なファビコン設定が指しているのがWikipediaのファビコンのファイルサポートの項目なので明確に定義しているわけではない様子。なお執筆時点だと安全な選択肢は ico,png,gif。

また、表示上は16pxで表示されるので、それでも崩れないようなデザインにして欲しいという旨の注意書きがあります。

HTML記述としての注意点

以下のfavicon記述が例示としてあげられている。

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

rel属性でレギュレーションとして定められているのは以下の通り

  • shortcut icon
  • icon
  • apple-touch-icon
  • apple-touch-icon-precomposed

ということで 標準化された仕様である icon でもOKだし、Apple向けの apple-touch-icon でもOK

Googleのアクセスとしての注意点

パスやクローリングに関しての話。同じドメイン配下でクローリングできるようにしておいてね！！という感じに内容になっている。

上記を踏まえて見たほうがいいこと

Googleを考慮した場合、以下のような感じで設定するとGoogleにもよろしく、HTML5的な仕様感点からもはずれなそう。

  • faviconの基本仕様である rel = "icon" かつ ico or png で作っておけば大丈夫。
  • サイズは48の倍数ピクセル（96,144..) にすること
  • Googleの打ち出すレギュレーションに沿わないアイコンデザインにしないこと
  • クローリングするので、クローリングできるようにサイトと同一ドメインに配置すること

参考リンク