SVG や PNG から複数解像度の favicon.ico を作る
クラシックなブラウザや Windows のショートカット向けに 16〜256px をまとめて — ImageMagick の古いレシピと格闘せずに済みます。
このガイドと一緒に使うと便利なツール：
なぜ重要か
クローラや旧ブラウザは依然 /favicon.ico を取りに行きます。Windows のピン留めは複数解像度をまとめた ICO を好みます。静的サイト作者は Figma 書き出しをすぐ public/ に置きたい。ブラウザで ICO を束ねればブランドパスを共有変換サイトに渡さずに済みます。
実際の3つのシーン
はっきりした SVG から多層 ICO を生成します。
404 が減る
ICO と PNG を併置します。
IE 時代の穴が減る
GitHub Pages のルートにも置けます。
コミット一発
手順
SVG→ICOを開きます。
正方形マスターを用意
非正方形は先に トリミング。
SVG（または互換ラスタ）をアップロード
細い線はアウトライン化しフォント欠落を防ぎます。
埋め込むサイズを選択
16・32・48・256 が一般的。タイル要件なら 24 / 64 を追加します。
各レイヤーを眺める
16px でシルエットが読めるかが合格ラインです。
favicon.ico をダウンロード
ルートに置き
<link rel="icon" href="/favicon.ico" sizes="any">を補います。
実践のヒント
- モダンブラウザには PNG/WebP の manifest アイコンも追加します。
- リニューアル後は
favicon.ico?v=20260502で CDN を揺らします。 - PNG 単体書き出しは SVG→PNG で先行も可です。
よくある落とし穴
よくある誤り
細かすぎるディテール
極小サイズは太めのシルエットが勝ちます。
よくある誤り
透明と Windows
ピン留めで黒つぶれすることがあります。実機で確認します。
よくある誤り
CDN の MIME
image/x-icon など正しいタイプで配信されていますか。
向いていない用途
- フル PWA 資産：maskable Android アイコンの自動生成ラインが別途必要です。
- アニメファビコン：対応と CPU コストを別検討します。
- macOS .icns：専用エクスポーターを使います。
FAQ
ブランドファイルはアップロードされますか？
ローカル生成です。パスデータは外に出ません。
PNG から始められるか
可能です。多層スケールでは SVG の方がクリーンなことが多いです。
サイズを詰め込みすぎない
過剰なエントリはファイルだけ肥えます。デスクトップとスタートメニューで常用するセットに絞ります。