ファビコンはSVG、PNG、ICOのどれにすべきでしょうか？端的な答えは、 未来に強いセットアップのために3つすべてを使うことです。 ただし各フォーマットには明確な役割があります。以下が比較です。
クイック比較
| フォーマット | スケーラブル | ブラウザ対応 | ダークモード | 最適な用途 |
|---|---|---|---|---|
| ICO | いいえ（固定サイズの同梱） | ユニバーサル（レガシー含む） | いいえ | 必須のフォールバック |
| PNG | いいえ | すべてのモダンブラウザ | 手動（別ファイル） | 特定サイズ（16, 32, 180, 192, 512） |
| SVG | はい（無限） | Baseline — すべてのモダンブラウザ（Safari 26がギャップを埋めた、2025年9月） | はい（CSSメディアクエリ経由。Safariに既知のバグあり） | モダンブラウザ、ダークモード、シャープさ |
ICO — ユニバーサルなフォールバック
.ico は最も古いファビコンフォーマットで、Internet Explorerや 古い企業向けブラウザを含め、どこでも動作することが保証される唯一のものです。 1つの .ico には複数のサイズ（一般的には16、32、48）をまとめられ、 ブラウザが最適なものを選びます。
欠点： スケーラブルでない、透過のトリックができない、 SVGよりファイルサイズが大きい。それでも、すべてのサイトは1つ同梱すべきです。
PNG — 主力
PNGは、ほとんどのモダンブラウザが実際にタブアイコンとして読み込むものです。 複数のサイズを宣言すると、ブラウザがディスプレイに合ったものを選びます。
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />欠点： サイズごとに別ファイルが必要で、PNGはダークモードに 適応できません。
SVG — もはや未来ではなく、現在
SVGファビコンはベクターです。どんなサイズでも完璧にシャープで、軽量で、 そして何より、埋め込みCSSによるダークモードをサポートします。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
@media (prefers-color-scheme: dark) {
.logo { fill: #ffffff; }
}
.logo { fill: #000000; }
</style>
<rect class="logo" width="32" height="32" rx="6"/>
</svg><link rel="icon" type="image/svg+xml" href="/favicon.svg" />更新（2025年9月）： Safari 26がついにSVGファビコン対応を追加し、 SVGはChrome、Edge、Firefox、SafariのすべてのモダンブラウザでBaseline機能になりました。「SafariはSVGファビコン非対応」という 古いアドバイスは今や時代遅れです。
残る注意点： Safariは現時点でSVGファビコン内のダークモードメディアクエリを無視します（WebKitバグ #309949）。また、レガシーなAndroid WebViewやロックダウンされた企業ブラウザは 依然としてラスターフォールバックを必要とするため、SVGと並行して PNG/ICOのlinkを残してください。
結局どれを使うべき？
推奨されるファビコンスタック（この順で宣言してください）：
- SVG を最初に — モダンブラウザ（Safari 26以降、すべて）が これを拾い、ダークモードを可能にします。 SVGファビコンジェネレーターをご覧ください。
- PNG を32、180（Apple）、192、512に各プラットフォーム向けに。
.icoをユニバーサルなレガシーフォールバックとして。site.webmanifestでPWA向けにすべてを紐付け。
これらすべてを Favicon.one への1回のアップロードで 手に入れられます。ジェネレーターはコピペ済みHTML付きの完全なマルチフォーマット パッケージを出力します。