ガイド

ファビコン (.ico) 対 SVG

SVG は、ベクター、ダークモード対応、小型の現代で最もエキサイティングなファビコン形式です。ただし、2026 年に .ico を完全に置き換えることはできません。その理由と両方の使用方法を次に示します。

SVG は無限に拡張し、ファイル自体内のダークモード メディア クエリをサポートします。 1 KB SVG は、最新のブラウザーのあらゆる密度をカバーします。

ICO はユニバーサル フォールバックです。古い Safari バージョン、レガシー ブラウザ、およびベア URL <code>/favicon.ico</code> 規則はすべて、依然としてこれに依存しています。

推奨設定: <code>favicon.ico</code> + <code>favicon.svg</code> を出荷します。 SVG をサポートするブラウザではそれが優先されます。残りは自動的に .ico に戻ります。

使い方

  1. 1

    SVG を設計またはエクスポートする

    正方形 viewBox、単一のルート <svg> 要素。

  2. 2

    .ico フォールバックを生成する

    FetchFavicon を使用して、SVG をマルチサイズの .ico にラスタライズします。

  3. 3

    両方をリンクする

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

今すぐ試す

.ico + SVG ペアを生成する

SVG to PNG 変換器

よくある質問

SVG を使用する場合、.ico を完全に削除できますか?+

安全ではありません。多くのソーシャル エンベッダー、RSS リーダー、レガシー ツールは、慣例により依然として /favicon.ico を要求しています。

SVG ファビコンをサポートしているブラウザはどれですか?+

Chrome 80+、Edge 80+、Firefox 41+、Safari 15+、および勇敢。 iOS Safari は依然として apple-touch-icon PNG を好みます。

SVG ファビコンはどのくらい小さくできますか?+

きれいなモノクロ マークの場合は 1 KB 未満。複雑な多色のロゴであっても、4 KB を超えることはほとんどありません。

関連ツール

その他のガイド

ガイド

FetchFavicon を探索する

カテゴリー

コンバーター

公共事業

ガイド

チュートリアル