favicon (ファビコン) の最適な設定方法。基本は SVG のみ

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 アイコン) として使用される可能性がありますが、今は設定してもホーム画面のアイコンには使用されません。

余談