Drop a 512px+ logo
PNG or SVG — processed locally, never uploaded. Or use the Source panel to browse or paste one.
PWA icons
What is a maskable icon?
Every operating system draws a home-screen icon differently: Android crops it into a circle, a squircle, or a rounded square depending on the device and launcher, while iOS and desktop browsers show it exactly as drawn. A maskable icon is a version built to survive that cropping — extra padding around your logo so the important part sits inside the region every mask leaves alone, plus a solid background so there is never a transparent hole where the mask cuts through. This maskable icon generator is built around getting that one detail right, since it is the single most common reason a PWA's icon looks broken on Android despite looking perfect in a design file.
How to generate your icon set
- Drop a 512px+ logo (PNG or SVG) onto the stage, or use the Source panel to browse or paste one.
- Drag the padding slider until the safe-zone badge reads "Safe zone OK" — the live checker updates instantly.
- Pick a background color for the icon canvas, or leave it transparent for the non-maskable "any" icons.
- Fill in the Manifest panel: app name, short name, theme color, background color, and display mode.
- Click Download ZIP for all 8 rasterized icons plus manifest.json and a README, or copy the manifest JSON / head snippet directly.
Understanding the safe zone
The safe zone is the centered 80% of a maskable icon — a circle with an 80% diameter, leaving a 10% margin on every side. Anything inside that circle survives every real-world mask shape, including a plain circle, which is the most aggressive crop any device applies. This is why the checker overlays both a dashed circle and a solid squircle on your icon: the circle is the actual pass/fail boundary, and the squircle shows a gentler, more common real-world shape alongside it, so you can see exactly how much room you actually have rather than guessing. Padding below 10% clips on Android; 10% or more passes on every platform this tool targets.
What's in the download, and what isn't uploaded
The zip contains every icon a modern PWA needs — 192 and 512px at both "any" and "maskable" purpose, a
180px apple-touch-icon, 32 and 16px favicons, and a 150px Windows tile — plus a ready-to-save manifest.json
and a README with install steps and the exact <head> snippet to paste. A true multi-resolution
favicon.ico isn't generated (modern browsers accept the PNG favicons and manifest icons instead), which is
noted in the download rather than silently skipped. Every step, from the stepped-halving resize that keeps
your 16px favicon crisp instead of mushy to the zip itself, runs locally in your browser — your logo is
never sent anywhere.
Frequently asked questions
What icon sizes does a PWA manifest need?
At minimum, a 192×192 and a 512×512 icon with purpose "any" — the two sizes Chrome's install prompt and Lighthouse's PWA audit both check for. This tool adds the matching maskable versions at those same two sizes, an apple-touch-icon at 180×180, favicons at 32×32 and 16×16, and a 150×150 Windows tile, so every platform's own icon slot is covered in one download.
What is a maskable icon and its safe zone?
A maskable icon lets Android crop your logo into a circle, squircle, or rounded square depending on the device, instead of always showing a plain square. The safe zone is the centered 80% of the icon that survives every shape — keep your logo's important content inside it (10% padding on each side) and the live checker above turns green.
How do I generate a manifest.json for a web app?
Drop your logo, fill in the Manifest drawer's name, short name, theme color, background color, and display mode, then click Copy manifest JSON. This manifest generator fills in the icons array and start_url for you, so the result is ready to save as manifest.json at the root of your site.
Why does my Android app icon get cropped?
Android draws every home-screen icon through an OS- or launcher-chosen mask — a circle, squircle, or rounded square — so any part of your logo sitting outside the centered safe zone gets clipped by that shape. Dragging the padding slider up until the safe-zone badge reads "OK" keeps your logo fully inside every mask Android might apply.
What's the difference between "any" and "maskable" purpose?
An "any" purpose icon is shown exactly as drawn, transparency and all — safe for browser tabs and desktop shortcuts. A "maskable" purpose icon is a fallback Android is free to crop into whatever shape the device wants, so it needs extra padding and an opaque background. This tool generates both purposes at both 192 and 512 automatically.
What size is an apple-touch-icon?
180×180 pixels is the current recommended size for an apple-touch-icon — the icon iOS uses when someone adds your site to their home screen. This generator rasterizes it alongside the manifest icons and favicons, so one dropped logo covers iOS and Android home screens plus desktop browser tabs in a single zip.
Do my images get uploaded when I generate icons?
No. Your dropped image is processed entirely in your browser using canvas — it is never uploaded to a server, because this tool has no server to upload it to. The zip (every icon, manifest.json, and a README with install instructions) is assembled locally too, so nothing about your logo ever leaves your device.