SVG と ICO のアイコン

SVG favicon は、余分なバイトを含まずに任意のタブ サイズに合わせて拡大縮小できる単一の XML ドキュメントです。 ICO ファイルは、1 つ以上の事前にラスタライズされたフレームを保持するバイナリ コンテナです。

最新の Chromium、Firefox、および Safari では、タブで SVG をレンダリングできます。 Windows シェル、古い埋め込み、および暗黙的な /favicon.ico フェッチでは、依然としてラスター ICO データが必要です。

問題は SVG や ICO ではありません。SVG に ICO を加えたものです。SVG は対応ブラウザとしてリストされ、ICO はセーフティ ネットとしてリストされています。

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

1 つのファイルは 16×16 ～ 256×256 論理ピクセルをカバーします。維持するミップマップ セットがありません。

単純なマークのファイル サイズは多くの場合 2KB 未満で、6 フレームの .ico よりもはるかに小さくなります。

埋め込まれた CSS は、@media (prefers-color-scheme: dark) の下の塗りつぶしを反転して、個別の夜間アセットをエクスポートせずにアダプティブ タブを提供します。

SVG はテキストです。他のソース アセットと同様に、Git で favicon の変更を比較できます。

HTML を省略した場合でも、ブラウザは /favicon.ico を要求します。このリクエストは、.ico に名前変更された SVG ではなく、有効なアイコン コンテナを返す必要があります。

Windows ピン、Outlook リンク展開、および一部の RSS リーダーは SVG を完全に無視します。インプレッションの約 5% が ICO のみのパスを使用すると予想されます。

ICO では、予測可能なピクセルも得られます。複雑な SVG フィルターは、エンジンによってレンダリングが異なる場合があります。ラスターフォールバックにより外観が安定します。

互換性を最大限に高めるために最初に ICO を宣言し、次に拡張のために SVG を宣言します。

<link rel="icon" href="/favicon.ico" sizes="any">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

タイプと MIME が正しい場合、対応可能なブラウザは SVG を優先します。他のものは、画像グリフが壊れずに ICO に戻ります。

iOS はホーム画面アイコンに SVG を使用しないため、180×180 PNG apple-touch-icon とペアリングします。

モノクロのレターマーク: 単一の <path> とダークモードの塗りつぶしを備えた SVG。 Windows ショートカットの同じ形状から ICO が生成されます。

グラデーション ロゴ: SVG を簡略化します (フラット フィルのみ)。 16×16 タブではなく、Web サイト上でマーケティング グラデーションを維持してください。

従来の IE 要件を持つ政府または企業のサイト: ICO を優先します。 SVG は、分析で IE トラフィックが無視できることが示された後にのみ追加してください。

厳格なブランドカラーを使用したシステムの設計: SVG をリポジトリに保存し、CI ジョブを実行してリリースタグごとに .ico を再生成します。

SVGのみを使用できますか? Windows ショートカットや暗黙的な .ico フェッチを気にする場合はそうではありません。

Safari は SVG favicon をサポートしますか?デスクトップ上の Safari 15 以降は可能です。 iOS のホーム画面には依然として PNG が必要です。

SVG の最初のペイントは遅くなりますか? 1 ～ 2 KB SVG は、ヒーロー イメージと比較すると無視できます。

SVG 内にビットマップを埋め込むことはできますか?可能ですが、スケーラビリティが失われます。代わりに ICO を使用してください。

SVG favicon ダーク モードでは非表示: 塗りつぶしはタブの背景と一致します。明示的なフィルまたは prefers-color-scheme ルールを追加します。

Chrome は、SVG ではなく ICO を使用します。type="image/svg+xml" を確認し、サーバーの Content-Type が image/svg+xml であることを確認します。

SVG はギザギザに見えます。複雑なフィルターがラスタライズされています。パスを簡略化するか、タブを ICO に依存します。

巨大な SVG ファイル: SVGO でエクスポートします。 Illustrator メタデータと未使用の定義を削除します。

viewBox を正方形で中央に保ちます。非正方形の viewBoxes レターボックスは、円形または正方形のタブ クロップでマークを予期せずマークします。

フィルター、マスク、foreignObject の埋め込みよりも単純な塗りつぶしを優先します。ファビコン レンダリング コンテキストは、フルページ SVG で許可される機能をストリップします。

すべてのスタイルをインライン化します。 favicon のみのリクエストでは、外部スタイルシートがロードされない場合があります。

展開する前に、同じマシン上のライト OS 設定とダーク OS 設定の両方で prefers-color-scheme ルールをテストします。

保守的なプラグインを使用して SVGO を実行すると、ファイル サイズが縮小されますが、viewBox とクリティカル パス データはそのまま残ります。

アプリケーション コードのようなバージョン管理 favicon.svg。 XML の差分は、プル リクエストでバイナリ ICO を比較するよりも優れています。

SVG 解析コストはヒーロー画像に比べれば微々たるものですが、Illustrator からの膨大な SVG エクスポート (100KB 以上) は依然として各タブでバイトを無駄にします。

ブラウザは、HTML の HTTP キャッシュ制御とは別に、favicon をキャッシュします。 favicon.svg の名前を favicon-v2.svg に変更すると、マーケティングで要求された場合に強制的に更新されます。

HTML をキャッシュする Service Worker は、stale-while-revalidate を使用してアイコン応答を永久にキャッシュしないでください。ブランド変更時にキャッシュ キーをバンプします。

HTTP/2 多重化は、3 つの小さなアイコン ファイルがウォーターフォールの問題ではないことを意味します。正しい形式で出荷します。 SVG と ICO を 1 つのファイルにマージしないでください。

ファビコンはタブ内の装飾的なものであり、HTML の代替テキストは必要ありません。意味のあるサイト名はまだ <title> に含まれています。

低コントラストの SVG マークは、ページ コンテンツで失敗するのと同じように、UI クロムの WCAG で失敗します。 #fff と #323232 の両方の背景でコントラストをテストします。

色のみのブランド マークは、色覚異常のあるユーザーを混乱させます。 16×16 のシルエットに、色相の変化だけでなく、独特の形状を追加します。

favicon.svg を Git に保存します。リリース タグで、ヘッドレス スクリプトまたは手動ジェネレーター ステップを実行して、favicon.ico を生成し、バイナリをコミットするか、アーティファクトをデプロイするためにアタッチします。

favicon.ico が favicon.svg mtime より古い場合、CI を失敗します — ロゴ調整後の忘れられた再生成をキャッチします。

プレビュー環境では、マージ前に 404 をキャッチするために実稼働環境と同じアイコン パスを使用する必要があります。

スタイル ガイド内のドキュメント: SVG はソース、ICO は生成されたアーティファクト、PNG サイズはエクスポート ターゲットです。

外部代理店がオフブランド マークを出荷しないように、最小ストローク ウェイトとパディングを 16×16 に指定します。

ブランド PDF に明るいスクリーンショットと暗いスクリーンショットを含めます。マーケティング チームは、レターヘッドと同じくらい頻繁にタブを参照します。

機能の起動によってアイコンが変更されると、製品リリースと一致する semver タグを持つバージョン favicon アセット。

四半期ごとに監査を実行します。分析結果で視聴者による SVG のサポートが 98% 以上であることが示された場合でも、依然として ICO を維持します。エンタープライズ インストールではロングテールが重要です。

最初に favicon.ico をデプロイし、暗黙的な /favicon.ico リクエストが 200 を返すことを確認します。

ステージング時に正しい MIME を使用して favicon.svg を追加します。 Content-Type が image/svg+xml であることの自動チェックを実行します。

運用環境に移行し、CDN をパージし、3 つのブラウザをハードリフレッシュして、Chromium の SVG タブを確認し、予想される場合は ICO フォールバックします。

サポート チケットを 1 週間監視します。QA が Windows ショートカットをスキップした場合、ブランド変更の直後にアイコンの問題が発生します。

ベースラインのスクリーンショットをリリース チケットに記録して、コード レビュー中に将来のリグレッションが明らかになるようにします。