SVG ファビコン ジェネレーター
ロゴから鮮明なSVGファビコンを作成し、ダークモード用の配色と古いブラウザ向けの代替ファイルも用意できます。
SVGロゴをアップロードする
SVG ファイルをここにドロップするか、クリックして参照して選択します
最新の SVG ファビコン機能
無限に拡張可能
SVG ファビコンは、どのようなサイズやピクセル密度でも完全に鮮明なままであり、アップスケーリングしてもぼやけることはありません。
ダークモードのサポート
アイコンが訪問者のシステム テーマに自動的に適応するように、明るいバージョンと暗いバージョンを出荷します。
ファイルサイズを小さくする
1 つのコンパクトな SVG は、多くの場合、PNG ビットマップと ICO ビットマップのフルセットを合わせたものよりも軽いです。
Safariの固定タブ
Safari が固定タブと Touch Bar に使用するモノクロ マスク SVG をエクスポートします。
レガシーフォールバック
バンドルされた ICO および PNG フォールバックにより、SVG をサポートしないブラウザでもファビコンが表示されます。
CSSテーマの切り替え
組み込みのprefers-color-schemeメディアクエリは、JavaScriptを使用せずにSVG内の色を交換します。
SVG ファビコンを作成する方法
単一の SVG ロゴから、テーマを意識した完全なファビコン セットまで、1 分以内に作成できます。
1.SVGをアップロードする
ベクターのロゴを SVG ファイルとしてドロップします。これはブラウザ内で完全に解析され、サーバーには何もアップロードされません。
2.色とサイズをカスタマイズする
アイコンの色、背景、表示サイズを調整し、ブランドに合わせて明るいバージョンと暗いバージョンを個別に調整します。
3. 明暗をプレビューする
デフォルトの明るいプレビューと暗いプレビューを切り替えて、すべてのテーマに対してファビコンが明確に読み取れることを確認します。
4. ダウンロードして埋め込む
完全なバンドル (SVG、ICO、および PNG フォールバック) をダウンロードし、提供されたリンク タグを HTML ヘッドに貼り付けます。
SVG とビットマップのファビコン
ベクター ファビコンが従来の PNG や ICO アプローチよりも優れたパフォーマンスを発揮する理由。
| 能力 | SVGファビコン | PNG / ICO ファビコン |
|---|---|---|
| スケーリングの明瞭さ | どのサイズでも完璧 | 複数の固定サイズが必要 |
| ダークモード | CSSメディアクエリを介して適応します | 別の画像ファイルが必要です |
| ファイルサイズ | 1 つの小さなベクター ファイル | いくつかのビットマップが合計されます |
| Retina / HiDPI | どのディスプレイでも鮮明 | 2 倍/3 倍のエクスポートが必要 |
| メンテナンス | 1 つのソース ファイルを編集する | 変更時にすべてのサイズを再エクスポートする |
| ブラウザのサポート | すべての最新ブラウザ | レガシーを含むユニバーサル |
最新のブラウザー用の SVG と ICO および PNG フォールバックの両方を生成するため、すべての訪問者にアイコンが表示されます。
SVG ファビコン HTML セットアップ
ページヘッドに挿入する正確なリンクタグ。
これらのタグを HTML ドキュメントの head セクション内に配置し、最新のブラウザが SVG を選択し、古いブラウザが正常にフォールバックするように順序付けします。
| 資産 | リンクタグ | 目的 |
|---|---|---|
| favicon.svg | <link rel="icon" href="/favicon.svg" type="image/svg+xml"> | 最新のブラウザ用のプライマリ ベクター ファビコン |
| favicon.ico | <link rel="icon" href="/favicon.ico" sizes="any"> | SVG をサポートしていないブラウザのフォールバック |
| icon-192.png | <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png"> | PNG フォールバックと PWA マニフェスト アイコン |
| apple-touch-icon.png | <link rel="apple-touch-icon" href="/apple-touch-icon.png"> | iOS および iPadOS のホーム画面アイコン |
| safari-pinned-tab.svg | <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000"> | Safariの固定タブのモノクロマスク |
有能なブラウザがそれを使用できるように、最初に SVG アイコンをリストします。 ICO ラインは従来のブラウザを引き続きカバーします。
SVG ファビコンを使用する場合
ベクター ファビコンが最大の成果をもたらす場合。
最新の Web アプリ
視聴者が最新のブラウザを実行している場合、SVG ファビコンは単一の軽量ファイルでどこでも鮮明なままです。
ブランドの一貫性
アイコンがタブ、ブックマーク、ホーム画面で同じに見えるように、信頼できるベクトル ソースを 1 つだけ維持してください。
ダークモードサイト
テーマに対応した SVG は色を自動的に交換するため、ダークブラウザのクロムに対してファビコンが消えることはありません。
高 DPI デバイス
Retina および 4K ディスプレイでは、ベクター ファビコンは、2 倍または 3 倍のビットマップをエクスポートしなくても、ピクセルパーフェクトでレンダリングされます。
よくある質問
SVG ファビコンとその発送方法について知っておくべきことすべて。
ファビコンに SVG を使用する理由は何ですか?
SVG ファビコンは単一のベクター ファイルであり、どのサイズやピクセル密度でも鮮明なままであり、CSS を通じてダーク モードをサポートし、通常は PNG および ICO ビットマップの完全なセットよりも軽いため、より鮮明で保守が容易です。
すべてのブラウザは SVG ファビコンをサポートしていますか?
Chrome、Edge、Firefox、Safari の現在のバージョンはすべて、SVG ファビコンをサポートしています。古いブラウザはそれらを無視するため、アイコンがどこにでも表示されるように ICO および PNG フォールバックも生成されます。
ダークモードのSVGファビコンを実装するにはどうすればよいですか?
SVG内にprefers-color-schemeメディアクエリを埋め込み、テーマごとに色を定義します。私たちのジェネレーターはこれを自動的に追加するため、訪問者がライト モードとダーク モードを切り替えるとファビコンの色が自動的に変更されます。JavaScript は必要ありません。
SVG ファビコンは安全ですか?消毒したほうがいいでしょうか？
SVG にはスクリプトを含めることができるため、信頼できるソースからのファイルのみを提供してください。このツールは SVG をローカルで解析し、外部参照やスクリプトを使用せずにクリーンな静的マークアップを出力し、結果を安全に発送できるようにします。
ICO フォールバックはまだ必要ですか?
はい、最も広い範囲に対応します。最近のブラウザでは SVG が好まれますが、favicon.ico (および PNG) を使用すると、ビットマップ形式のみを読み取る古いブラウザやツールでもアイコンが表示されることが保証されます。当社のバンドルには両方が含まれています。
Next.js または他のフレームワークに SVG ファビコンを追加するにはどうすればよいですか?
favicon.svg (および ICO および PNG フォールバック) をパブリック フォルダーまたは静的フォルダーに配置し、提供されたリンク タグを使用してそれらを参照します。 Next.js では、メタデータ アイコン フィールドを介して、またはルート レイアウト ヘッドに直接同じタグを追加できます。
Want to go deeper?
Optimizing Favicons Across Different Browsers