SVGファビコンの作り方
クイックガイド
ファビコンはブラウザのタブに出る小さなアイコンです。SVGにすると、どの画面でも完璧に鮮明で、ファイルは1つで軽量です。
SVGファビコンの利点
- 通常画面でもRetinaでも鮮明、複数のPNGを作らなくてよい。
- ファイル1つで最小容量。
- SVG内のCSSでダークモードに対応できる。
1. アイコンを設計
小さくても分かるようシンプルに。svgdeskで正方形のキャンバス（例 64x64）を使います。図形は少なく、コントラスト良く。
2. SVGを書き出す
ファイルを favicon.svg としてサイトのルートに保存します。
3. HTMLでリンク
<link rel="icon" href="favicon.svg" type="image/svg+xml">
4. フォールバック（任意）
古いSafariはSVGファビコン非対応です。完全な対応が必要なら favicon.ico やPNGを予備として追加します：
<link rel="icon" href="favicon.ico" sizes="any">
ダークモードへの対応
SVG内にCSSメディアクエリを入れ、システムのテーマに応じてアイコンの色を変えられます。16pxで見やすいよう、シンプルに保ちます。