Must purpose include maskable?

Strongly recommended on Android. You can use separate files or a single file with purpose "any maskable" if the artwork is already padded.

Where do generated files go?

Into the folder vite-plugin-pwa (or your static server) resolves as the web root — usually public/.

Why do I need both any and maskable icons?

purpose any is for browsers that show the full square. purpose maskable is padded so OEMs can apply a circular or rounded mask without clipping important artwork.

What is the maskable safe zone?

Keep critical logo content inside the central 80% of the canvas (a circle with radius 40% of the width). Outside that, Android may crop.

Do 192 and 512 satisfy installability?

Chromium’s installability criteria require at least 192 and 512 PNG icons declared in the web app manifest. Maskable is strongly recommended for Android.

Can I generate a full web app manifest?

Yes. The export includes manifest.webmanifest with name, theme_color, background_color, and icon entries for any and maskable.

vite · PWA / install

Generate PWA Icons for Vite — Free PWA Icon Generator

Name: App Snaps
Availability: InStock

Whether you use vite-plugin-pwa or a static manifest, you still need correct icon files. Generate them here and reference the paths in your Vite PWA config.

Open generator Full Launch Kit

Sizes & formats

Size	Use	Notes
192×192	manifest purpose: any	Install minimum
512×512	manifest purpose: any	Install minimum
192 / 512 maskable	purpose: maskable	Safe zone ≈ 80% center
384×384	High-DPI splash / shortcuts	—
1024×1024	Master / store source	—

Generate now

Focused generator for this tool only — files stay on your device. For every pack (ICNS, Expo, Flutter, Brand Kit, Store), open the full Launch Kit.

Full kit →

Focused tool

vite · PWA / maskable icons

Open full Launch Kit

Live previews

Tap any tile to enlarge

Drop a logo to preview

Favicon, iOS, Android shapes, maskable, splash, OG — all live from one file.

How it works

1
Generate icons
Include maskable variants.
2
Place in public/
Match the src paths in the plugin config.
3
Build
Confirm the install prompt shows your icon in Chromium.

vite.config.ts (vite-plugin-pwa)

VitePWA({
  manifest: {
    name: "My App",
    short_name: "App",
    theme_color: "#0a0a0a",
    background_color: "#ffffff",
    icons: [
      { src: "icon-192.png", sizes: "192x192", type: "image/png", purpose: "any" },
      { src: "icon-512.png", sizes: "512x512", type: "image/png", purpose: "any" },
      { src: "icon-maskable-512.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
    ],
  },
})

FAQ

Must purpose include maskable?: Strongly recommended on Android. You can use separate files or a single file with purpose "any maskable" if the artwork is already padded.
Where do generated files go?: Into the folder vite-plugin-pwa (or your static server) resolves as the web root — usually public/.
Why do I need both any and maskable icons?: purpose any is for browsers that show the full square. purpose maskable is padded so OEMs can apply a circular or rounded mask without clipping important artwork.
What is the maskable safe zone?: Keep critical logo content inside the central 80% of the canvas (a circle with radius 40% of the width). Outside that, Android may crop.
Do 192 and 512 satisfy installability?: Chromium’s installability criteria require at least 192 and 512 PNG icons declared in the web app manifest. Maskable is strongly recommended for Android.
Can I generate a full web app manifest?: Yes. The export includes manifest.webmanifest with name, theme_color, background_color, and icon entries for any and maskable.