ファビコンは作るのは簡単なのに、「何ピクセルで作ればいいのか」で一度つまずきます。16という説明も512という説明もあり、実はどちらも正しいのです。使われる場所が違うからです。
ICOは画像ではなく入れ物
JPGやPNGは1つのファイルに絵が1枚入っています。ICOは違います。複数の解像度の絵を1つのファイルに並べて収めておき、OSやブラウザが必要な場所に合うサイズを選んで使います。だからfavicon.ico1つでも、タブでは16、ショートカットでは48としてくっきり表示できるのです。
1つのサイズだけでも動きます。ただし16だけ入れると大きな場所でぼやけ、256だけ入れると小さな場所で縮小され、細い線がつぶれます。小さいサイズは別に作って入れてこそくっきりします。
サイズごとにどこで使われるか
| サイズ | 使われる場所 | 置き場所 |
|---|---|---|
| 16×16 | ブラウザのタブ、アドレスバー | favicon.ico |
| 32×32 | 高解像度画面のタブ、ブックマーク一覧 | favicon.ico |
| 48×48 | Windowsのデスクトップショートカット | favicon.ico |
| 64・128・256 | 大きいアイコン表示、一部の拡張機能 | favicon.ico（任意） |
| 180×180 | iPhone・iPadのホーム画面に追加 | PNG + apple-touch-icon |
| 192×192 | Androidのホーム画面に追加 | PNG + Webマニフェスト |
| 512×512 | PWAのインストール画面、スプラッシュ | PNG + Webマニフェスト |
現実的な最小構成はfavicon.icoに16・32・48の3つです。モバイルのホーム画面まで面倒を見るなら180のPNGを1枚足せばだいたい足ります。PWAとしてインストールさせる予定があるときだけ192・512を用意すれば十分です。
16ピクセルで生き残る絵は別にある
ロゴをそのまま縮めると、16ピクセルではたいていつぶれた染みになります。横長のワードマークならなおさらです。ファビコンはロゴの縮小版ではなく、**そのブランドを16ピクセルで見分けられるようにするための別の絵**だと考えるほうが正確です。
- 文字を入れるなら1文字までです。2文字からはくっついて見えます。
- 細い線は消えます。線の太さを誇張してこそ残ります。
- 余白を少し残します。端にぴったり付けるとタブで切れて見えます。
- 背景は透過にしておくほうが安全です。タブの背景色はダークモードで変わります。
作る順番
正方形のPNGを1枚用意します。256や512のように十分大きなサイズで、背景は透過にしておくとよいでしょう。それをICOに変換しながら16・32・48を一緒に収め、同じ原本から180のPNGをもう1枚書き出せば完了です。原本が正方形でない場合は先に正方形に切り取ってください。ファビコンの枠は常に正方形なので、比率が違うとゆがみます。
ブラウザは指定がなくても`/favicon.ico`を探しに行きます。ですからサイトの最上位にその名前で置いておくのがいちばん簡単です。変更したのに古いままなら、たいていはキャッシュなので、スーパーリロードやシークレットウィンドウで確認してください。