← Back to Tools

PWA Manifest Builder

Generate a production-ready manifest.json for any Progressive Web App — icons, shortcuts, display, screenshots & more.

Add your icon sizes. Minimum: 192×192 and 512×512 for installability. Use PNG or WebP. maskable icons fill the full shape on Android.

The <link rel="apple-touch-icon"> tag goes in your HTML <head>, not in manifest.json — we'll include it in the install snippet.

Shortcuts appear when users long-press your app icon on Android. Max 4 recommended.

SCORE 0 / 100
{}
Install in HTML: Add <link rel="manifest" href="/manifest.json"> inside your <head> tag. Also add <meta name="theme-color" content="#..."> for browser chrome color.

What Goes in a PWA Manifest?

The manifest.json file tells browsers how to install and display your web app. Without it, users can't add your app to their home screen and Chrome won't trigger the install prompt.

Minimum for Install Prompt

Chrome requires: name, icons with a 192px AND 512px PNG, start_url, and display set to standalone, fullscreen, or minimal-ui. A service worker is also required but lives outside the manifest.

Maskable vs Any Icons

purpose: "maskable" icons are designed to fill the entire shape on Android adaptive icon circles or squircles. Always include both any and maskable versions of your 192px icon.

theme_color vs background_color

theme_color colors the browser address bar and system UI. background_color is the splash screen color shown while the app loads — set it to match your app's initial background to avoid a flash of color.

Shortcuts (App Shortcuts)

Long-press the app icon on Android to see shortcuts — like deep links to key features. Add up to 4, each with a name and URL. Shortcuts massively improve re-engagement for tools with multiple flows.

id Field (Chrome 96+)

The id field is the canonical identity of your PWA. If you change start_url later, setting id prevents browsers from treating it as a new app. Always set it to your start URL at minimum.

display_override

Allows browsers to try display modes in order. Use window-controls-overlay first for desktop apps with a custom title bar, falling back to standalone on unsupported browsers.