「ファビコン 作成」と検索する人の悩みは 2 つです。サイズが多すぎて何を作ればいいか分からないこと、そして Safari / iOS でなぜか表示されないこと。2026 年現在、SVG favicon は Chrome / Firefox / Edge / Safari 16+ で標準対応しており、必要な書き出しは 6 サイズに整理できます。
この記事では、Next.js（App Router）を例に、SVG / PNG / ICO の 3 形式を使い分ける手順と、ブラウザごとの挙動を整理します。
2026 年に最低限揃えるサイズ
| サイズ | 用途 | ファイル名 |
|---|---|---|
| 16×16 | ブラウザタブ（旧来の最小） | favicon.ico（マルチサイズ） |
| 32×32 | ブラウザタブ Retina / ブックマーク | favicon-32.png / favicon.ico |
| 48×48 | Windows サイトショートカット | favicon.ico（マルチサイズ） |
| 180×180 | iOS ホーム画面 | apple-touch-icon.png |
| 192×192 | Android ホーム画面 / PWA | android-chrome-192.png |
| 512×512 | PWA スプラッシュ / 共有時 OGP 補完 | android-chrome-512.png |
SVG / PNG / ICO の使い分け
- SVG — モダンブラウザで第一候補。ダークモード対応もこれで完結。
- PNG — iOS / Android ホーム画面。SVG 非対応の環境用。
- ICO — IE 11 や古い社内環境用のフォールバック。マルチサイズ 1 ファイルで 16/32/48 を内包。
Safari / iOS でつまずくポイント
Safari はキャッシュが頑固で、favicon を変えてもしばらく古いものを表示します。開発時は『開発メニュー → キャッシュを空にする』、本番は URL に ?v=2 のクエリを付けて回避。iOS は apple-touch-icon.png が必須で、これがないとホーム画面追加時にサイトのスクショが切り取られたアイコンになります。
Next.js App Router での配置
Next.js 13+ は app/icon.png や app/apple-icon.png を置くだけで自動配信されます。SVG を使う場合は app/icon.svg。これで <link rel="icon"> タグも自動生成されます。手動で public/favicon.ico も置いておけば旧ブラウザのフォールバックになります。
app/icon.svg— 原本 SVG（512×512 viewBox 推奨）app/icon.png— 32×32 PNG（SVG 非対応用、Next.js が自動最適化）app/apple-icon.png— 180×180 PNG（iOS ホーム画面）public/favicon.ico— 16/32/48 マルチサイズ ICOapp/manifest.tsで 192 / 512 PNG を PWA 用に登録
16×16 で読めるロゴにするコツ
ロゴそのものを 16×16 に詰め込むと、必ずつぶれます。ロゴ全体ではなく、シンボル部分（or イニシャル 1 文字）だけを切り出して favicon にするのが定石です。Apple のリンゴ、Google の「G」、Stripe の「S」と同じ発想です。
AXIS
PRISMA
Orbital
Circle
IT・SaaS 向け や 起業家・ファウンダー向け の事例は、シンボル単体でも成立するロゴが多く、favicon との相性が良いです。
まとめ
favicon は SVG 原本 → 6 サイズに書き出し → Next.js が自動配信 の流れが 2026 年の最短ルート。Safari のキャッシュ・iOS の apple-touch-icon.png・16px でつぶれない設計の 3 点だけ気をつければ十分です。