Does Next.js need next-pwa?

Not for icons and the manifest. A service worker is separate; this page only covers install icons and the manifest file.

Can icons live outside public/?

Static assets for the manifest are simplest in public/. App Router file conventions do not replace manifest icon URLs.

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.

nextjs · PWA / install

Generate PWA Icons for Next.js — Free PWA Icon Generator

Name: App Snaps
Availability: InStock

Next.js can host a web app manifest via metadata.manifest or a static file in public/. This preset generates the icon set Chromium needs to show an install prompt.

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

nextjs · 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 PWA icons
Download any + maskable 192/512.
2
Put files in public/
Keep paths in sync with the manifest.
3
Set metadata.manifest
Point at /manifest.webmanifest in the root layout.

public/manifest.webmanifest + metadata

// metadata in app/layout.tsx
export const metadata = {
  manifest: "/manifest.webmanifest",
  themeColor: "#0a0a0a",
};

// Place generated icon-192.png, icon-512.png, and maskable variants in /public
// then point the exported manifest.webmanifest src paths at those files.

FAQ

Does Next.js need next-pwa?: Not for icons and the manifest. A service worker is separate; this page only covers install icons and the manifest file.
Can icons live outside public/?: Static assets for the manifest are simplest in public/. App Router file conventions do not replace manifest icon URLs.
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.