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

ここでは、雰囲気で設定している人が多い favicon (ファビコン) の最適な設定方法を紹介します。

1. SVG

SVG の favicon に対応している Chrome と対応していない Safari が映ったスクリーンショット。

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)

macOS の Safari の共有ボタンを押した状態のスクリーンショット。

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 キーには anymaskablemonochrome が入ります。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 の造語です。