SVG からファビコンに変換
SVG ロゴから favicon.svg、favicon.ico、すべての PNG サイズと、全ブラウザ向けの HTML コードを作成します。
SVG ファイルをここにドロップ
元の SVG は favicon.svg としてそのまま使い、ICO と PNG の各サイズを作成します。
あなたのサイト
別のタブ
あなたのサイト
別のタブ
SVG ファイルを選ぶと、すべてのサイズのファビコンがここに表示されます。
SVG をファビコンに変換する方法
- SVG のロゴを選びます。
- 必要なら余白・角の丸み・背景を設定します（PNG と ICO に適用されます）。
- ZIP をダウンロードします。favicon.svg（元のまま）、favicon.ico、すべての PNG サイズが入っています。
- ファイルをルートフォルダにアップロードし、SVG の行を含む HTML を貼り付けます。
SVG ファビコンのメリット
- いつでもくっきり：どのサイズ・どの画面でもぼやけません。
- ファイルが小さい：シンプルなロゴなら 1 KB 未満のことも多いです。
- ダークモード対応：SVG の中に
prefers-color-schemeを書けば、ダークテーマで色を変えられます。
Chrome、Edge、Firefox、最近の Safari は SVG ファビコンに対応しています。古いブラウザや一部のツールは favicon.ico を探すので、ダウンロードには両方が入っています。
よくある質問
SVG があれば favicon.ico は不要ですか？
いいえ、予備として favicon.ico も置いておきましょう。HTML では SVG を先に指定しているので、新しいブラウザは SVG を使います。
SVG が真っ白になります。
外部フォントや外部画像を読み込む SVG は描画できません。デザインツールで文字をアウトライン化し、画像を埋め込んでからもう一度お試しください。