faviconの正しいサイズと作り方

faviconは「1枚のPNGを16pxに縮小すればいい」と思われがちですが、実際はブラウザタブ・iOSホーム画面・Android/PWAでそれぞれ異なるサイズが必要です。サイズを1つでも欠かすと、表示が欠けたりぼやけたりします。ここでは、最低限そろえるべきサイズと作り方の手順を整理します。

なぜ1枚では足りないのか

ブラウザタブに表示される小さなアイコンと、スマホのホーム画面に置く大きなアイコンでは、求められる解像度がまったく違います。 小さいサイズ用の画像を無理に拡大すると輪郭がぼやけ、大きいサイズ用に小さい画像を使うとギザギザが目立ちます。用途ごとに最適なピクセル数を個別に用意する必要があります。

最低限そろえるべきサイズ一覧

16×16px / 32×32px … ブラウザのタブやブックマークに表示される、いわゆる「favicon」本体です。この2サイズはfavicon.icoという1ファイルにまとめて内包するのが慣例です。
180×180px(apple-touch-icon) … iOSでホーム画面に追加したときに使われるアイコンです。
192×192px / 512×512px … Android・PWA(ホーム画面追加型のWebアプリ)向けのアイコンです。512pxはアプリストアやスプラッシュ画面でも使われます。

このセット一式を用意しておけば、主要な環境をひととおりカバーできます。

元画像は512px以上・正方形で用意する

すべてのサイズは、1枚の元画像から縮小して作るのが基本です。512×512px以上・正方形のロゴを用意しておけば、最大サイズまで劣化なく書き出せます。長方形のロゴしかない場合は、余白を足して正方形に整えてから使います。

透過とmaskableアイコンの違い

ブラウザタブ用のfaviconは背景を透過にできますが、iOS・Androidのホーム画面アイコンは 透過を許容しない仕組みが一般的です。透過部分は黒く塗りつぶされたり、意図しない背景色になったりします。 Android向けの「maskable」アイコンは、端末側で丸や角丸にトリミングされる前提で、ロゴの周囲に一段広い余白(セーフマージン)を確保しておく必要があります。

一括生成してまとめて設置する

サイズごとに手作業で書き出すと、比率のズレやファイル名の間違いが起こりやすくなります。ロゴ画像を1枚読み込むだけで、favicon.icoから各PNGサイズ、PWA設定ファイルまで一式を自動生成するツールを使えば、サイズの過不足なく短時間で用意できます。生成後は、案内される<link>タグを HTMLの<head>内に貼り付けるだけで設置が完了します。

よくある失敗

正方形でない画像をそのまま使う … 横長・縦長のロゴを無理に正方形へ引き伸ばすと、アイコンが歪んで見えます。
ico形式を用意しない … 古いブラウザやブックマーク表示ではicoファイルが参照されることがあり、PNGだけでは対応しきれない場合があります。
設置後にキャッシュで反映されない … faviconはブラウザに強くキャッシュされるため、更新後は別タブや再読み込みで確認します。

まとめ

faviconは1サイズでは完結せず、ブラウザタブ・iOS・Android/PWA向けにそれぞれ異なるサイズが必要です。 512px以上の正方形ロゴを用意し、一括生成ツールでサイズと設定ファイルをまとめて作れば、設置まで迷わず進められます。