favicon (ファビコン) の最適な設定方法。基本は SVG のみ
初版: 2024/7/30
更新: 2024/7/30
ここでは、雰囲気で設定している人が多い favicon (ファビコン) の最適な設定方法を紹介します。
1. SVG
Safari を除くモダンブラウザは、SVG 画像な favicon に対応しています。そのため、SVG 画像がメインの favicon とします。将来的に Safari が SVG 画像に対応したときのためにも、SVG 画像で用意しておくのは必要です。
SVG 画像ではインラインの CSS を埋め込めるため、prefers-color-scheme
メディア特性を使用して、ライトテーマとダークテーマで異なる配色の favicon を作ることができます。
2. ICO
SVG 画像な favicon に対応していない Safari やほかのアプリケーションのために、昔ながらの ICO 画像を使用します。
ICO 画像は 1 つ以上の画像を含めることができますが、48 x 48 px の画像のみでファイルを作成します。この解像度以上の画像を用意する必要性が低いのと、Chrome 上での不具合に繋がる可能性があるためです (後述)。
3. PNG (apple-touch-icon)
Apple 製デバイスで使用されるアイコンで、主に iOS のホーム画面に追加したときのアイコンや、macOS の共有メニューに表示されるアイコンなどに使用されます。 180 x 180 px の PNG 画像を用意します。これは apple-touch-icon の最大の推奨サイズです。
4. PNG (ウェブアプリマニフェスト)
ウェブアプリマニフェストを作成することで、Android などのデバイスでのアイコンを指定することができます。例えば、このサイト (AioiLight.space) のマニフェストを作成するにはこのような記述にします。
{
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
"name": "AioiLight.space",
"short_name": "AioiLight.space",
"display": "browser",
"background_color": "#000",
"description": "AioiLight のウェブサイト。",
"icons": [
{
"src": "/icons/icons-192.png",
"type": "image/png",
"sizes": "192x192",
"purpose": "any"
},
{
"src": "/icons/icons-maskable-192.png",
"type": "image/png",
"sizes": "192x192",
"purpose": "maskable"
},
{
"src": "/icons/icons-512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "any"
},
{
"src": "/icons/icons-maskable-512.png",
"type": "image/png",
"sizes": "512x512",
"purpose": "maskable"
}
]
}
Android では 192 px と 512 px の正方形アイコンを使用しますので、それを定義します。purpose
キーには any
、maskable
、monochrome
が入ります。any
は通常のアイコン (メインの favicon と同じで良いでしょう) を設定し、maskable
はデバイスによって自由に切り抜かれるアイコン (Android であれば円形に) です。
purpose
キーには複数の値 (例: any maskable
) を設定することもできますが、any
の画像をそのまま maskable
で使用すると意図した表示にならない (たいていの場合、拡大され見切れてしまいます) ので、個別に設定した方が良いでしょう。
maskable
にはセーフエリアがあり、ブラウザが切り抜かないと決められているエリアです。正方形のアイコンに対して、セーフエリアは直径 80 % の正円です。ちなみに、Chrome にはセーフエリアを無視してしまうバグが存在 ⧉します。
monochrome
は将来的に Android のテーマアイコン (Material You アイコン) として使用される可能性がありますが、今は設定してもホーム画面のアイコンには使用されません。
余談
ICO 画像に複数の画像を入れるとダメ?
Chrome には、ICO 画像に複数の画像が入っている状態で、SVG の favicon と同時に head
内に定義すると、SVG よりも ICO 画像が優先されてしまうバグがあるようです。これではテーマによる配色の変更といった SVG ならではの機能が使えなくなってしまうため、1 つの画像のみ収録した ICO 画像を使用します。
なぜ PNG 画像ではなく ICO 画像を用意するのか
SVG 非対応の Safari に対応するだけなのであれば PNG 画像で favicon を用意しても良いのですが、ここではあえて ICO 画像を用意します。
理由としては favicon が本来、ルートディレクトリに /favicon.ico
を置き、それをソフトウェア (ブラウザ) が取得する仕様であったからです。HTML を解釈しないソフトウェアが favicon を取得する可能性を考慮し、ICO 画像を用意します。
favicon の由来
favicon はお気に入り (今でいうブックマーク) に表示されるアイコンであったことから、favorite + icon の造語です。