ファビコン (.ico) 対 SVG

SVG はベクター形式であり、単一の SVG ファビコンが劣化することなく任意のピクセル密度でレンダリングされることを意味します。 1x ディスプレイでは 16×16 ピクセルでレンダリングされます。 3x Retina ディスプレイでは、同じファイルから 48×48 物理ピクセルでレンダリングされます。 4 サイズ固有のラスター フレームを含む ICO バンドルは、この自動密度処理に対応できません。 SVG は、最新の高 DPI ディスプレイに理想的な形式です。

.ico 形式は引き続き普遍的なベースラインです。 1990 年代後半から、Web アイコンを扱うすべてのデスクトップ ブラウザー、モバイル ブラウザー、オペレーティング システム、およびサードパーティ ツールが favicon.ico をサポートしてきました。これらの環境の多くは、HTML リンク タグをまったくチェックしません。慣例として、ドメイン ルートから /favicon.ico をフェッチしようとするだけです。セットアップから .ico を削除すると、意味のあるユーザーおよびツールのセグメントのファビコンが即座に壊れます。

ダークモードのサポートは、SVG ファビコンのキラー機能です。 SVG ファイルには、`@media (prefers-color-scheme: dark)` クエリを含む `<style>` ブロックを埋め込むことができます。ブラウザがダーク モードの場合、クエリがアクティブになり、アイコンの塗りつぶし、ストローク、または背景色を変更できます。 .ico や PNG ではこれは不可能です。これらの形式は環境を意識しない静的ラスターです。

SVG ファビコンに対するブラウザのサポートは大幅に成熟しました。 Chrome 80+ (2020 年リリース)、Edge 80+、Firefox 41+、および Safari 15+ (2021 年リリース) はすべて `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` をサポートします。 2026 年の時点で、アクティブなブラウザーのインストールの大部分は SVG ファビコンをサポートしています。注目すべき例外は、古い iOS デバイス上の古い Safari (15 より前) です。これらは自動的に .ico にフォールバックします。

ファイル サイズも SVG の利点です。シンプルなマークのきれいなモノクロ SVG ファビコンは、通常 1 KB 未満です。 16、32、48、および 64 ピクセルのラスター フレームを高品質でバンドルした .ico ファイルは、通常 10 ～ 25 KB です。非常に高速な読み込み時間が必要なサイトの場合、スタンドアロン PNG セットの代わりに SVG favicon を配布すると、favicon のペイロードが大幅に削減されます。ただし、どちらの形式も最初の読み込み後にキャッシュされます。

SVG ファビコンのリンク構文は .ico とは少し異なります。明示的な type 属性が必要です: `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>`。 type 属性がないと、一部のブラウザはファイルをファビコンとして認識しません。まず、これを .ico フォールバック リンク タグ `<link rel='icon' href='/favicon.ico'>` と組み合わせます。 SVG ファビコンを理解するブラウザは、より具体的な SVG タグを好みます。他のものは .ico に落ちます。

SVG の最適化は、ファビコンを展開する前に実行する価値があります。デザイン ツールは、エディターのメタデータ、コメント、非表示のパス、および視覚的な影響なしにバイトを追加する冗長属性を含む SVG をエクスポートします。 SVG optimizer を介して SVG を実行すると、アイコンの見た目を同一に保ちながら、ファイル サイズを 50 ～ 80% 削減できます。小さい SVG は解析も速くなりますが、これは接続が遅い場合に重要になります。

.ico 形式は、SVG ではできない Windows OS 統合を処理します。ブラウザーのタブ、タスクバーのピン、および Windows ファイル エクスプローラーのアイコンから作成されたデスクトップ ショートカットはすべて /favicon.ico となります。 SVG は、これらのコンテキストでは認識される Windows アイコン形式ではありません。ブラウザーのタブで主に SVG ファビコンを表示するユーザーでも、サイトへの Windows ショートカットを作成すると .ico バージョンが表示されます。

ファビコンのアニメーション化は、`<animate>` 要素または SVG ファイル内の SMIL アニメーションを使用する SVG で可能です。アニメーション化された SVG ファビコンは、パルスしたり、回転したり、色を変更したりできます。ファビコンでの SVG アニメーションのブラウザ サポートは限定的ですが (Chrome と Edge はサポートしていますが、Firefox と Safari はサポートしていません)、ファビコンを介してステータスの変化 (読み込みインジケーター、新しい通知ドットなど) を表示したい Web アプリにとってはクリエイティブなオプションです。

SVG ファビコンは、単純な暗/明切り替えを超えた高度なカラー モードをサポートします。 SVG 内で CSS カスタム プロパティを使用したり、ハイ コントラスト モードの `forced-colors` メディア クエリに応答したり、複数のカラー スキーム ブレークポイントを使用したりできます。このレベルのテーマはラスター形式では不可能であるため、SVG はアクセシビリティを重視したデザイン システムにとって最適な選択肢となります。

運用環境における SVG の実質的な制限は、依然として非 SVG フォールバックが必要であることです。最も簡単な方法は、SVG をプライマリ アイコンとして維持し、同じ SVG ソースから .ico と apple-touch-icon PNG を生成することです。 favicon generator は、ソース形式として SVG を受け入れ、ベクトル データから .ico および PNG 出力を生成します。ラスター化による品質の低下はありません。

ソーシャル メディアの共有カード、OG 画像、およびリンク展開の場合、ファビコンのソース形式は無関係です。ソーシャル プラットフォームは、HTML または /favicon.ico からファビコンを取得し、内部で変換します。ファビコンが .ico、PNG、SVG のいずれであっても、展開されたリンク カードにはアイコンが表示されます。ソーシャル共有シナリオでは、形式ではなくアイコン コンテンツの品質に重点を置きます。

推奨される ico+SVG セットアップの実装には、`.ico` フォールバック、`image/svg+xml` SVG、および「apple-touch-icon」 PNG の 3 つのリンク タグのみが必要です。ブラウザは、詳細度の順に (最も具体的な形式から順に) それらを読み取り、サポートする最初のものを選択します。この進歩的な拡張アプローチは、すべてのユーザーがブラウザで処理できる最高のファビコンを取得できることを意味します。完全な決定マトリックスについては、best favicon format guide を参照してください。