2020年1月時点で検索結果にfaviconが出るようになったのでざっくり調べた結果とか。HTML5の仕様とGoogleのガイドラインを読んでざっくりやっておいたほうがいよね的な仕様。
そもそものfavicoの仕様
以前紹介してるが、HTML5から標準化されている
faviconの仕様はHTML5から標準化されている - コード日進月歩
Google検索向けの仕様
案内が下記ページにある。
検索結果に表示されるファビコンを定義する - Search Console ヘルプ
大きく以下4つに関して言及があるのでそれぞれざっくり引用ベースで記述します。
ファビコンの内容そのものの注意点
ファビコンの絵としてどういうものでないといけないかというものが定義されている。以下まま引用。
・faviconがウェブサイトのブランドを視覚的に表したものとなっており、ユーザーが検索結果を見た際に一目でサイトを見分けられるようになっていること。 ・わいせつな表現やヘイト表現に関連するシンボル（例: かぎ十字章）などの不適切なファビコンは表示されません。該当する表現がファビコン内で見つかった場合は、デフォルトのアイコンに置き換えられます。
バイナリファイル内容としての注意点
かなり定義が大味のドキュメントとなっている、以下の通り。
有効なファビコン設定が指しているのがWikipediaのファビコンのファイルサポートの項目なので明確に定義しているわけではない様子。なお執筆時点だと安全な選択肢は ico,png,gif。
また、表示上は16pxで表示されるので、それでも崩れないようなデザインにして欲しいという旨の注意書きがあります。
HTML記述としての注意点
以下のfavicon記述が例示としてあげられている。
<link rel="shortcut icon" href="/path/to/favicon.ico">
rel属性でレギュレーションとして定められているのは以下の通り
shortcut iconiconapple-touch-iconapple-touch-icon-precomposed
ということで 標準化された仕様である icon でもOKだし、Apple向けの apple-touch-icon でもOK
Googleのアクセスとしての注意点
パスやクローリングに関しての話。同じドメイン配下でクローリングできるようにしておいてね！！という感じに内容になっている。
- favicon自体をクローリングできるようにしておくこと
- faviconのURLは相対パス（/smile.ico）か絶対パス（https://example.com/smile.ico）で指定できますが、ホームページと同じドメインである必要があります。
- クロールの度にfaviconの有無を確認するので、再度確認してほしい場合は従来の再クローリングと同じようにすること
上記を踏まえて見たほうがいいこと
Googleを考慮した場合、以下のような感じで設定するとGoogleにもよろしく、HTML5的な仕様感点からもはずれなそう。
- faviconの基本仕様である
rel = "icon"かつicoorpngで作っておけば大丈夫。 - サイズは48の倍数ピクセル（96,144..) にすること
- Googleの打ち出すレギュレーションに沿わないアイコンデザインにしないこと
- クローリングするので、クローリングできるようにサイトと同一ドメインに配置すること
