ファビコンのサイズ：形式と用途

各行は、推奨パッケージで提供する文書化された用途に対応しています。過去の形式をすべてそろえるより、少数で幅広く使える構成を優先しています。

ICOはコンテナー形式です。ひとつのファイルに複数の画像を保存でき、ブラウザが表示に合ったものを選びます。必要なサイズは使用場面によって異なるため、この仕組みが役立ちます。

16×16は標準画面のタブ向けです。32×32は高密度ディスプレイやその他のブラウザ画面に対応します。48×48で構成を補い、Googleが検索結果のファビコンに定める48の倍数という条件にも対応します。

最も多い失敗は16×16しか含まない.icoを配信することです。Retina画面では拡大され、いつもぼやけたアイコンになってしまいます。

iOSはホーム画面のアイコンにWebマニフェストを使わず、apple-touch-iconタグを探します。近年のiPhoneとiPadには180×180の1種類で対応でき、古い端末ではシステムが縮小します。

AndroidはWebマニフェストを参照します。ホーム画面用の192×192と、サイトをアプリとしてインストールした際の起動画面用512×512の2項目で対応できます。512版はpurposeに「maskable」を指定し、円や角丸四角に切り抜かれても成立するデザインにしてください。

マスク可能なアイコンでは、重要な部分を中央80%に収めます。外側は端末メーカーによって切り取られる場合があります。

最適なのはSVGです。上記の全サイズに画質を落とさず拡縮できます。SVGがなければ512×512ピクセル以上の正方形PNGを使い、Androidの起動アイコンも拡大せず縮小して作れるようにします。

文字入りの横長ロゴは16×16では使えません。そのサイズでは文字が数ピクセルにつぶれます。シンボルだけを取り出すか、コントラストのある背景に1〜2文字を置きましょう。

最後に明暗両方の背景で確認します。黒いロゴはダークテーマのタブでは消えてしまいます。それを防ぐのがSVGファビコンのダーク用バリエーションです。

古い生成ツールはmstile-150x150.pngやbrowserconfig.xmlを使うWindowsタイルなど、過去の連携用ファイルも出力します。対象の機能を明確にサポートする必要がある場合だけ追加してください。

apple-touch-iconの57x57、60x60、72x72、76x76、114x114、120x120、144x144、152x152という多数の形式は、iOSが縮小できなかった時代のものです。180×180の1枚で置き換えられます。

使わない宣言を削除すると、リポジトリとHTMLがすっきりします。既存の連携を削除する前に、対象ブラウザやプラットフォームを確認してください。