No Login Data Private Local Save

PWA Icon Resizer & Manifest - Online Generate Sizes

23
0
0
0

PWA Icon Resizer & Manifest Generator

Upload one icon → Get all PWA sizes + manifest.json instantly

Drop your icon here or click to browse
PNG, WebP, JPG, SVG — Recommended: 1024×1024 or larger
Uploaded icon preview
Standard PWA + iOS All Sizes
Generated Icons 0
Upload an image to generate icon sizes
Manifest Configuration
0/12 characters
#ffffff
#4f46e5
manifest.json Preview
Upload an icon to generate manifest...
ZIP includes all icons + manifest.json
Frequently Asked Questions
What sizes do I need for a PWA?
Minimum required: 192Ă—192 and 512Ă—512. However, for broad compatibility across Android, iOS, and desktop, we recommend generating: 72Ă—72, 96Ă—96, 128Ă—128, 144Ă—144, 152Ă—152, 180Ă—180 (iOS), 192Ă—192, 384Ă—384, and 512Ă—512. This tool generates all of them automatically from a single upload.
What is a maskable icon and why does it matter?
A maskable icon allows the OS to crop your icon into different shapes (circle, squircle, rounded square) while keeping your important content safe. The safe zone is the inner ~80% of the icon. When you enable "Maskable Icons" in this tool, we automatically add transparent padding so your icon content stays within the safe area. You should always provide maskable icons for modern PWAs — they ensure your icon looks great regardless of the device shape.
How do I use the generated manifest.json?
Place the manifest.json file in your website's root directory, then link it in your HTML <head>:
<link rel="manifest" href="/manifest.json">
Also place all generated icon files in the same directory (or adjust the src paths in the manifest accordingly). For iOS, additionally add <link rel="apple-touch-icon" href="/icon-180x180.png"> in your <head>.
What's the difference between standalone, fullscreen, and minimal-ui?
Standalone: The PWA opens like a native app (no browser URL bar, but system status bar visible). This is the most common and recommended mode.
Fullscreen: The app takes the entire screen with no status bar — best for games or immersive experiences.
Minimal UI: Similar to standalone but shows a minimal browser toolbar (back/forward/reload).
Browser: Opens as a regular web page in the browser — rarely used for PWAs.
Can I use SVG as the source icon?
Yes, this tool accepts SVG uploads. The SVG will be rasterized at the native resolution before being resized. For best results with SVG, ensure your SVG has a proper viewBox attribute and is square (e.g., viewBox="0 0 512 512"). Note that manifest icons must be raster formats (PNG/WebP), not SVG directly.
Why does my PWA icon look blurry on some devices?
Blurry icons usually happen when the device requests a larger size than what you've provided. Always include a 512Ă—512 icon (and ideally 384Ă—384) to cover high-DPI screens. Also, upload a source image that is at least 1024Ă—1024 for the sharpest results. This tool uses high-quality canvas rendering to preserve as much detail as possible during resizing.
Do I need different icons for iOS and Android?
The PWA manifest (used by Android and desktop) covers most sizes. iOS Safari doesn't fully support the web manifest for icons; instead, it uses apple-touch-icon meta tags. We recommend adding <link rel="apple-touch-icon" sizes="180x180" href="/icon-180x180.png"> in your HTML for iOS. The 180Ă—180 size is included in our default preset when you select "+ iOS".
Is this tool free? Are my images uploaded anywhere?
Yes, completely free! All processing happens entirely in your browser using JavaScript Canvas API. Your images are never uploaded to any server — they stay on your device. This means it works offline too, once the page is loaded.
🔧 Related Tools