Favicon and PWA guide
See the full file set needed for website and PWA icon setup.
Convert SVG to full icon pack
Upload SVG, adjust color and spacing, then export favicon, app icons, and manifest in one flow.
SVG source recommendations
- Use static SVG without scripts, foreignObject, or external asset references.
- Simple vector shapes produce the most stable multi-size rendering.
- If rendering differs from expectation, simplify SVG structure or switch to PNG source.
Practical workflow
- Upload SVG and confirm source preview + bounds are detected correctly.
- Choose original/custom icon color and adjust padding mode for your target platforms.
- Review small-size preview to catch thin strokes or missing fills before export.
- Download ZIP containing favicon, Apple/PWA/maskable PNGs, and site.webmanifest.
Example conversion
Input: Static monochrome SVG logo for a SaaS website.
Settings: Custom icon color #2563eb + Balanced padding + transparent background.
Output: Consistent favicon/PWA package with aligned color and spacing across all sizes.
SVG conversion tips
- Inline fills usually convert more predictably than CSS variables or external styles.
- If a custom color looks wrong, simplify the SVG to a single solid shape first.
- Keep the original SVG with the exported ZIP so future icon updates are repeatable.
FAQ
Can this tool keep complex SVG filters exactly?
Not always. Complex filters and external fonts may render differently after rasterization.
What does custom icon color do for SVG?
It applies a single-color tint based on rendered alpha mask for consistent icon style.
Do I still get favicon.ico from SVG input?
Yes. SVG is rasterized first, then all PNG/ICO files are generated in the same pipeline.
Should I keep original color mode?
Use original when brand colors are already correct. Use custom for one-tone icon systems.
Related icon scenarios
Maskable safe area guide
Ensure launcher-safe placement when exporting maskable icons.