2020年1月時点で検索結果にfaviconが出るようになったのでざっくり調べた結果とか。HTML5の仕様とGoogleのガイドラインを読んでざっくりやっておいたほうがいよね的な仕様。
そもそものfavicoの仕様
以前紹介してるが、HTML5から標準化されている
faviconの仕様はHTML5から標準化されている - コード日進月歩
案内が下記ページにある。
検索結果に表示されるファビコンを定義する - 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にもよろしく、HTML5的な仕様感点からもはずれなそう。
- faviconの基本仕様である
rel = "icon"
かつ ico
or png
で作っておけば大丈夫。
- サイズは48の倍数ピクセル(96,144..) にすること
- Googleの打ち出すレギュレーションに沿わないアイコンデザインにしないこと
- クローリングするので、クローリングできるようにサイトと同一ドメインに配置すること
参考リンク