Maskable safe area guide
Learn how to avoid launcher cropping for adaptive icons.
How to generate favicon and PWA icons
Use one PNG or SVG source to export favicon.ico, Apple touch icon, and PWA files with consistent spacing.
Recommended source input
- PNG or SVG source, ideally square and at least 512×512.
- Transparent background works best for logos that need flexible placement.
- If your file is not square, the tool auto-pads canvas and keeps the subject centered.
Practical workflow
- Upload source and confirm subject bounds preview looks correct.
- Choose Balanced or Safe padding mode, then review favicon and PWA previews.
- Check manifest name, background, and theme color before export.
- Download ZIP to get favicon.ico, 16/32/48 PNG, Apple 180, and PWA 192/512 files.
Example output set
Input: 1024×1024 transparent brand mark (SVG).
Settings: Balanced padding + transparent background.
Output: favicon.ico, favicon PNG sizes, apple-touch-icon, and PWA icons ready for deployment.
Publishing tips
- Use a simple source mark so 16×16 and 32×32 favicons remain recognizable.
- Keep one canonical ZIP export with the manifest and icons used in production.
- After deployment, verify favicon and PWA icons in a real browser install prompt.
FAQ
Should favicon and PWA icons use the same source?
Yes. One high-quality source is usually enough when spacing is handled consistently.
Why do tiny favicon sizes still look blurry?
Very small sizes need simple shapes. Try cleaner source details and more safe margin.
Do I need to manually create every icon size?
No. The tool exports all common website and PWA icon sizes in one package.
Related icon scenarios
SVG to icon pack guide
Convert one SVG into a complete downloadable icon bundle.