SVG to favicon converter
Turn one vector logo into crisp browser favicons, a real ICO, Apple touch icons, PWA/app icons, a manifest, and theme-aware variants.
- 1ベース画像
- 2オプション
- 3ダウンロード
ベース画像を設定
くっきり出すなら、少なくとも 512×512 ピクセルが理想です。
URL から既存のものを取得
画像をアップロードしてキットを生成します。
新しい favicon を作る
絵文字、ロゴ、またはアイコンを選ぶと、このページでキットになります。
アイコンをクリックするとベース画像になり、すぐにフルキットを生成します。ロゴやブランドマーク、細かい調整が必要ですか？ フルビルダーを開く。
サイトのカバー範囲を確認
URL を調べて、欠けているアイコンや古いアイコンを見つけます。
スキャン例
サンプルデータです。確認ページで実際にスキャンしてください。
One source, every icon surface
SVG is an excellent source because it scales cleanly, but not every icon surface reads SVG. Browsers can use it directly while Apple Home Screen icons, Android launchers, social previews, and legacy clients still need raster PNG or ICO files. This workflow produces both from the same vector artwork.
Vector source
Stays sharp at any scale
Raster outputs
16px through 1200px
Legacy fallback
Multi-size favicon.ico
Theme support
Light and dark variants
How to get a production-ready result
1Upload the SVG
Use a square viewBox and make sure fonts are converted to paths or otherwise embedded so the rendered mark is stable.
2Preview at tab size
A detailed vector can still turn to mush at 16px. Check the small preview and simplify thin strokes if necessary.
3Export every fallback
Download SVG-friendly markup plus ICO, PNG, Apple touch, Android/PWA, and manifest files for surfaces that cannot read the vector.
Common questions
Can I use an SVG as a favicon directly?
Modern browsers can, but you should still provide favicon.ico and raster app icons because Apple touch icons, PWA launchers, crawlers, and older clients do not consistently use SVG.
Why does my SVG favicon look blurry?
The source remains vector, but the browser still draws it into a tiny 16px box. Fine lines and small text lose clarity, so simplify the mark and use stronger shapes.
Does SVG transparency carry into PNG icons?
Yes. You can preserve transparency or add a deliberate square or circular background during generation.