アイコンジェネレーターに戻る
SVG 変換フローをすぐに実行できます。
SVG からアイコンパックを作る方法
SVG をアップロードし、色と余白を調整して favicon・アプリアイコン・manifest を一括出力します。
SVG 入力の注意点
- スクリプトや foreignObject、外部参照を含まない静的 SVG を推奨します。
- 図形構造がシンプルなほど、多サイズ出力の再現性が高くなります。
- 期待どおりでない場合は SVG を簡略化するか PNG を利用してください。
3ステップ
- SVG をアップロードし、プレビューと主体境界を確認します。
- 色モード（元色/カスタム）と余白モードを選択します。
- ZIP をダウンロードし、favicon・Apple/PWA/maskable・manifest を取得します。
ケース例
入力: SaaS サイト向けの単色 SVG ロゴ。
設定: カスタム色 #2563eb + バランス余白 + 透明背景。
出力: 全サイズで色と余白がそろったアイコン一式を作成。
FAQ
複雑な SVG フィルターも完全再現できますか？
常に同一とは限りません。複雑フィルターや外部フォントは差異が出る場合があります。
SVG のカスタム色は何をしていますか？
レンダリング後の alpha を基に単色で上書きし、統一感を出します。
SVG 入力でも favicon.ico は作れますか？
はい。SVG を一度ラスター化してから PNG/ICO を生成します。
元色とカスタム色の使い分けは？
ブランド色を維持するなら元色、単色UIに合わせるならカスタムが適しています。