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