PWA Manifest Generator

A Progressive Web App needs a manifest.json to unlock the install experience. Without it, a user can bookmark your site but can't truly install it; with a complete manifest, they get a home-screen icon, a splash screen, a themed browser chrome, and an app-like launch. Writing the manifest by hand works but involves more fields than most developers remember — icons at multiple sizes, maskable variants for Android's adaptive icons, theme and background colors, scope, start URL, display mode, orientation, shortcuts, and share targets.

This generator covers every field in the current W3C Web App Manifest spec with smart defaults, validation, and a live preview of how the install UI will look. Upload one high-resolution icon and the tool generates all required sizes (192×192, 512×512, plus maskable and monochrome variants for adaptive icons and badge support). Fill in name, short name, description, and the generator validates each field against the spec so you catch mistakes before shipping.

Beyond the basics, the generator supports advanced features: app shortcuts that appear on long-press, share targets that make your PWA show up in the OS share sheet, file handlers for opening specific file types, and screenshots for the install prompt. The output is a properly formatted manifest.json you can copy into your project, and an HTML snippet with the recommended <link> tags for iOS Safari's legacy apple-touch-icon and apple-mobile-web-app-capable meta tags. Install the result and your PWA behaves like a native app on every platform.

The Web App Manifest is defined by the W3C Web Application Manifest specification. It is a JSON file typically served as manifest.json or manifest.webmanifest and linked from HTML with <link rel="manifest" href="/manifest.json">. Browsers read it when evaluating install criteria and use it to customize the installed experience.

Key fields:
- name: full application name displayed on install prompt and app launcher
- short_name: truncated name for home screen labels (should be 12 characters or fewer)
- icons: array of icon objects with src, sizes, type, and optional purpose (maskable, monochrome)
- start_url: URL loaded when the app launches
- scope: URL boundary within which the manifest applies
- display: standalone, fullscreen, minimal-ui, or browser
- orientation: portrait, landscape, any, and variants
- theme_color: browser chrome color for installed apps
- background_color: splash screen background color
- shortcuts: array of deep-link shortcuts for long-press menus
- share_target: makes the app a recipient of share intents
- screenshots: images shown on install prompt for app-like previews

Maskable icons are essential for Android adaptive icons. A maskable icon is designed with a safe zone — the inner 80% contains the logo, the outer 20% can be cropped by any OS-defined mask (circle, square, rounded square). Using purpose:"maskable" tells the OS your icon is designed for cropping. Monochrome icons allow your icon to match the system icon color in badges.

Install criteria vary by browser. Chrome requires HTTPS, a registered service worker with a fetch handler, 192×192 and 512×512 icons, and valid display mode. Safari honors Apple-specific meta tags more than the manifest for iOS. Testing with Chrome DevTools > Application > Manifest is the gold standard for validation.

Writing manifest.json by hand is tedious because of field count, icon variants, and validation rules. PWA Builder by Microsoft is comprehensive but locks you into their workflow. Copy-pasting examples from docs leaves you updating every field manually and missing new fields (maskable, monochrome, shortcuts, share targets). This generator covers the full W3C spec, generates icon variants from one upload, includes iOS legacy tags, validates against install criteria, and previews the install UI. Best for new PWAs and updating old manifests to current standards.