PWA Icon Generator

Turn one source image into a PWA icon handoff: preview user-agent masks, keep important artwork inside the maskable safe zone, generate any/maskable/monochrome assets, audit 192×192 and 512×512 coverage, and export matching manifest entries locally.

Maskable safe-zone · manifest purpose · browser-local

PWA Icon & Manifest Studio

Generate a deterministic PWA icon handoff from one local image. Preview masks, audit the W3C maskable safe zone, create any/maskable/monochrome assets and export manifest-ready paths without uploading artwork.

Wave130 deep authority

40% radius safe-zone auditany · maskable · monochrome192 · 512 + optional size packPNG · manifest · ZIP · Project

Source & icon geometry

Source image

FitAny-purpose padding (%)Maskable artwork padding (%)BackgroundTheme colorPreview mask

Show safe-zone circleInclude monochromeInclude extended sizes

Choose a source image.

Mask & purpose preview

The dashed circle represents the W3C maskable safe zone: a center circle with radius 40% of the icon size. Pixels outside it are not guaranteed to survive every user-agent mask.

Manifest identity & paths

App nameShort namestart_urlscopeDisplayIcon path prefix

Generated manifest JSON

Install-readiness evidence

Audit checks—

Safe zone—

Manifest purposes—

ZIP files—

Truth boundary. Icon files alone do not certify PWA installability. Chromium-family installability also depends on manifest members and a secure serving context, and browser/platform behavior can differ. “Maskable” is a purpose hint whose safe zone is defined by the Web App Manifest specification; this Studio previews that geometry but cannot certify every launcher rendering.

Export handoff

Single PNG sizePurpose

The ZIP contains manifest.webmanifest, core any/maskable PNGs, optional monochrome and extended sizes, plus a short README. Everything is generated locally in the browser.

Why these checks matter

192×192 + 512×512: common Chromium installability icon coverage.
maskable: lets supporting launchers crop a full-bleed icon using platform-specific masks.
monochrome: communicates alpha-mask intent where a host UI applies a solid color.
safe zone: critical artwork should remain within the central 40%-radius circle.
opaque background: recommended for predictable maskable rendering.

This Studio deliberately keeps the source image out of settings links and Project JSON. Re-importing a project restores settings only; choose the artwork again locally.

Practical guide and verification

Design for small rendered sizes

A PWA icon may be displayed far smaller than the source artwork. Use a simple silhouette, sufficient padding and high contrast so the mark remains recognizable when a launcher or browser reduces it.

Maskable versus ordinary icons

Maskable icons need safe-area planning because the operating system may crop them into circles, rounded squares or other shapes. Important artwork should stay away from the outer edge rather than assuming the full square will always remain visible.

Common mistake

Generating several PNG sizes does not by itself create a complete installable PWA. The web app manifest, icon declarations, service-worker behavior and HTTPS requirements are separate parts of the installation experience.

Before shipping the icons

Create from artwork, inspect tiny sizes, generate platform assets, then audit the local package and manifest declarations before deployment.

Local checks are not deployment checks

These tools do not fetch your live site, verify HTTP headers, confirm browser cache refresh, test service workers, or certify installability across every platform.