faviconと言えばico、icoと言えばfaviconやアイコンのためのファイル形式、というイメージがある。
が、現在は違うようだ。
ICO ファイルは、ウェブコンテンツに使用すべきではない
PNGが推奨
公式を見ていこう。
ICO ファイルは、ウェブコンテンツに使用すべきではありません。 また、ファビコンでの利用は 異なる利用場面のアイコンの提供 で述べたように、 PNG ファイルと
画像ファイルの種類と形式ガイド – ウェブメディア技術 | MDN<link>要素を使用することで抑制されています。
ICOはウェブコンテンツに使うべきではないと言う。
ファビコンでの利用は、PNGが推奨のようだ。
少し気になる点
同じ場所の少し上には、こう書いている。
ICO ファイルには、複数のアイコンを含むことができ、それぞれの詳細が記載されたディレクトリーから始まります。 ディレクトリーの後に、アイコンのデータが続きます。 各アイコンのデータは、ファイルヘッダーを含まない BMP 画像か、ファイルヘッダーを含む完全な PNG 画像のどちらかを使用することができます。 ICO ファイル内で PNG を使用する方法は Windows Vista までは対応しておらず、対応が十分でない可能性があるため、 ICO ファイルを使用する場合は、 BMP 形式を使用することをお勧めします。
画像ファイルの種類と形式ガイド – ウェブメディア技術 | MDN
VistaまではICOファイル内でのPNGの使用に対応していない。
ICOファイル内には、PNGよりBMPがお勧めということだ。
しかしVistaはもうサポートが終了した古いOS。
Vistaがサポート終了した今もICOは非推奨なのか？
そこまではわからないが、情報の更新もないので、とりあえず非推奨という理解でいいだろう。
PNG ファイルと <link> 要素を利用する方法が推奨という点もある。
ICO ファイルと <link> 要素を利用する方法はできるのかは今回はパスしよう。
ファビコンのサイズ
16×16pxから512×512pxに対応できるサイズ
プロは複数サイズのアイコンを3～20個くらい作り、head要素内にたくさん並べるようだが。
画質のためっぽいので、一般人としては一つで済ませたい。
間をとって256pxを一つが丁度いいかなと考える。しかし、
Google検索結果には48pxの倍数のサイズ
ファビコンのサイズが 48 ピクセルの倍数になっていること（例: 48 x 48 ピクセル、96 x 96 ピクセル、144 x 144 ピクセルなど）。SVG ファイルの場合は、サイズに関して特別な指定はありません。
検索結果用のサイトのファビコンの設定 | Google 検索セントラル | ドキュメント | Google for Developers
Google検索結果にファビコンが表示されるサイズ条件は、48pxの倍数であることだと言う。
ファビコンがついたほうが面白いので、256pxから192pxに変更しよう。
192×192pxはAndroidのホーム画面やAndroidのChromeで利用されるようだ。
WordPressは512px
WordPressは512pxのPNG画像を1枚アップロードすだけでOK。
その他のサイズは自動で作ってくれる。
ファビコンをICOからPNGに変更
FC2ブログでICOファイル形式の画像をファビコンに設定している。
とりあえずICOが非推奨ということでPNGに変更。
これで標準のWEBサイトデザインに近づいた。
まとめ
- 2023年現在、ファビコンにはPNG画像が推奨されている
- サイズは一般人は192×192pxを一つだけで大丈夫なはず
- WordPressは512×512pxを一つ登録するだけでその他を生成してくれる
コメント