favicon の最適サイズ 2026 — マルチサイズ ICO + apple-touch-icon + SVG の現代スタック
Tomoda Hinataツール作者・運営公開 2026年4月26日約7分
「favicon.ico」はかつてルートに 1 つの 16×16 を置けば済みました。現代のブラウザスタックは: マルチサイズ ICO (16/32/48)、iOS ホーム画面用の apple-touch-icon、どのサイズでもベクター鮮明な SVG favicon、PWA インストール時のマニフェストアイコンセット (任意)。朗報: ブラウザは自動でやってくれる — あなたの仕事は正しい場所にファイルを置くこと。
このガイドで使うツール
現代のタブ表示が実際に使うサイズ
Chrome と Edge はタブの favicon を 16×16 (標準密度) または 32×32 (HiDPI) で描画。Firefox は OS の UI スケールに応じて 16×16 か 32×32。Safari はタブで 16×16、ブックマークで 32×32。Windows タスクバーのピン留めサイトは 48×48。16×16・32×32・48×48 を持つマルチサイズ ICO で、デスクトップのタブ/ブックマーク/ピン留めの主要描画はすべてカバー。64・128・256 はマニフェスト用で ICO には不要。
apple-touch-icon は省略不可
iOS Safari ユーザーが「ホーム画面に追加」をタップすると、iOS は明示的な `apple-touch-icon` リンクタグを探します。なければページ自体のサムネイル — 通常は左上の低品質スクショ — をラスタライズして使います。`<link rel="apple-touch-icon" href="/apple-touch-icon.png">` で 180×180 PNG を渡すと iOS はそれを直接使用。iOS が自動で角丸マスクをかけるので、デザインはフルスクエアで OK — 角はマスクされます。
SVG favicon — ベクター鮮明 + 無料ダークモード
モダンブラウザ (Firefox 41+、Chrome 80+、Safari 9+ via .svg-as-icon、Edge 80+) は SVG favicon を受け付けます。ブラウザがベクターを必要なサイズに拡縮 — どのスクリーンでも完全に鮮明。`<link rel="icon" href="/favicon.svg" type="image/svg+xml">` を ICO リンクの「前」に置くと、モダンブラウザは SVG を選び、旧ブラウザは ICO にフォールバック。ボーナス: SVG favicon に `<style>` で `@media (prefers-color-scheme: dark)` を含めると、ユーザー OS のダークモードに自動連動、JS 不要。
PWA / マニフェスト用アイコンセット
サイトが PWA としてインストール可能なら、Web マニフェストには別のアイコンセットが必要 — Android ホーム画面用の 192×192、スプラッシュ用の 512×512。これらは `manifest.webmanifest` で参照し、`<link>` ではない。PNG が必要 (2026 年時点でマニフェストの SVG アイコンサポートは穴がある)。
コピペ可能な最小モダン構成
HTML head に: 1) `<link rel="icon" href="/favicon.svg" type="image/svg+xml">`。2) `<link rel="icon" href="/favicon.ico" sizes="any">`。3) `<link rel="apple-touch-icon" href="/apple-touch-icon.png">`。4) `<link rel="manifest" href="/manifest.webmanifest">` (PWA なら)。ICO は 16×16・32×32・48×48 のサブイメージを内蔵。あとはブラウザが処理 — JS も OS 検出も不要。
手順
所要時間 約1分正方形 512×512 マスターをドロップ
PNG (または SVG → PNG 512px 書き出し) を使用。正方形が必須 — 非正方形ソースは醜くレターボックス化されます。
マルチサイズ ICO を生成
ツールがマスターから 16×16・32×32・48×48 を含む ICO を生成。
apple-touch-icon を生成
180×180 PNG を生成。角丸なし (iOS が自動で付ける)。
サイトルートに配置
favicon.ico、favicon.svg、apple-touch-icon.png をサイトルートに置き、上記の通り head から参照。
| アセット | サイズ | 用途 |
|---|---|---|
| favicon.ico (16+32+48) | 5〜8 KB | タブ、ブックマーク、ピン留め |
| favicon.svg | 1〜4 KB | ベクター鮮明、ダークモード対応 |
| apple-touch-icon.png 180×180 | 8〜15 KB | iOS ホーム画面 |
| icon-192.png | 10〜18 KB | PWA Android ホーム |
| icon-512.png | 25〜60 KB | PWA スプラッシュ |
よくある質問
favicon.svg があれば favicon.ico は不要?
不要ではない — 旧ブラウザ・一部のリンクプレビュー (Slack、Discord)・Web クローラのロングテールが /favicon.ico に ICO を期待します。両方配置を。
なぜ apple-touch-icon は 192 ではなく 180?
180 は iPhone 高解像度ホーム画面のネイティブターゲットサイズ。iOS は 192 を縮小しますが、180 が正確マッチで再縮小を回避できます。
ICO に 64×64 も入れるべき?
任意。一部の旧 IE バージョンがタスクバーアイコンを 64 でレンダーしました。アクセス解析で IE が 0.1% 未満ならスキップ。
SVG favicon でダークモード対応の書き方は?
SVG 内に `<style>@media (prefers-color-scheme: dark) { .icon { fill: white; } }</style>` を追加し、対象 path に `class="icon"`。ブラウザが OS テーマで切替。
ICO は透過対応?
対応 — モダン ICO はサブイメージごとにアルファチャンネルを持てます。XP 時代の 1-bit マスクではエッジが汚かったが、モダン 32-bit 形式なら回避可能。
ファイルはアップロードされる?
いいえ。ツールはマルチサイズ ICO 生成を WebAssembly でブラウザ内完結。
今すぐ試す
画像を多サイズのICOファイルに変換
ICO(ファビコン)作成ツール