PWA manifest generator
Generate a manifest.json for your Progressive Web App and auto-size icons from a single master image.
{
"name": "My App",
"short_name": "App",
"start_url": "/",
"display": "standalone",
"orientation": "any",
"theme_color": "#4f46e5",
"background_color": "#ffffff"
}Fill in the app name, start URL, display mode, orientation and the two colours, and the manifest.json builds itself in the panel beside the form — no generate button, no waiting. Drop in one square master image and it is redrawn on a canvas at all eight sizes a Progressive Web App is normally asked for, previewed as a grid so you can see how the small ones hold up, and downloadable as individual PNG files. The manifest that comes out references those files at icons/icon-192x192.png and so on, which means the JSON and the images fit together as long as you keep that folder name. Empty fields are dropped rather than written as empty strings, so the output stays valid.
Key facts about PWA manifest generator
| Manifest keys written | name, short_name, description, start_url, display, orientation, theme_color, background_color and icons |
|---|---|
| Keys not written | id, scope, lang, dir, categories, screenshots, shortcuts, share_target and related_applications — add those by hand if you need them |
| Display modes | standalone, fullscreen, minimal-ui and browser |
| Orientation values | any, portrait and landscape |
| Icon sizes generated | 72, 96, 128, 144, 152, 192, 384 and 512 pixels square — eight PNG files from one source image |
| Icon purpose | Every generated entry is declared as purpose any maskable, so Android will also use it inside an adaptive shape |
| Icon paths in the JSON | icons/icon-72x72.png up to icons/icon-512x512.png, relative to the manifest — keep the downloaded files in a folder called icons next to it |
| Source image formats | PNG, JPG, SVG, WebP, and HEIC or HEIF, which is converted first |
| Resampling | Canvas drawImage into a square of each size. A non-square source is stretched, not letterboxed, so crop to 1:1 before uploading |
| Recommended source | 512x512 or larger — the 384 and 512 outputs are upscaled and visibly soft if the master is smaller |
| Download shape | manifest.json as one file; the icons as eight separate PNG downloads, not a zip |
| What this does not do | No service worker is generated. A manifest alone does not make a site installable — see the FAQ |
What happens to your file
The image never leaves your machine. It is read into an object URL, drawn into an in-page canvas element at each target size, and exported with the canvas toDataURL method — all of that is browser API work inside this tab. A HEIC or HEIF file is converted by a WebAssembly decoder that also runs locally. The manifest itself is just a JavaScript object serialised with JSON.stringify as you type. No upload endpoint is contacted, nothing is stored between visits, and the downloads are produced from in-memory blobs, so the files you save never round-trip through a server. Since app icons are usually unreleased branding, that is the point.
About this tool
- 1
Name the app twice
name is the full title used on the install prompt and in the app list. short_name is what fits under a home-screen icon — keep it to roughly 12 characters or the launcher will truncate it for you.
- 2
Set the start URL
This is where the app opens when it is launched from the icon, and it is relative to the manifest. Use / for a site at the domain root; use /app/ if the installed experience should skip your marketing page.
- 3
Choose the display mode
standalone is what most installed apps want: your own window, no browser address bar. fullscreen removes the system chrome too, minimal-ui keeps navigation controls, and browser means it opens in a normal tab and is effectively not installed.
- 4
Pick the two colours
theme_color tints the title bar and task switcher entry; background_color paints the splash screen while the app boots, so it should match your page background or the launch will flash.
- 5
Upload one master icon
Drop in a square image of at least 512 by 512 pixels. All eight sizes are drawn immediately and shown as a grid — check the 72 and 96 previews, since fine detail and thin type disappear at that scale.
- 6
Download and wire it up
Save manifest.json to the root of your site and the eight PNGs into an icons folder beside it, then add a link rel=manifest tag to the head of every page.
| Output format | manifest.json, pretty-printed with two-space indentation |
|---|---|
| Icon output format | PNG, 8-bit RGBA, produced by canvas toDataURL |
| HEIC handling | Converted in the browser before resizing; large HEIC files take a moment on first use while the decoder loads |
| Colour input | Native colour picker plus a text field, so a hex value can be pasted from a brand sheet |
| Link element needed | A link rel=manifest tag in the head of every page of your app |
| Serving requirement | HTTPS (or localhost) — install prompts are not offered over plain HTTP |
| Content type | application/manifest+json is correct; application/json also works in practice |
| Browser support | Installable web apps are supported by Chrome, Edge, Opera and Samsung Internet on Android and desktop; iOS Safari reads the manifest for Add to Home Screen but ignores several fields |
| Network | None — generation and resizing are entirely local |
- Design the icon so the important part sits inside the middle 80 per cent. The entries are declared as maskable, and Android crops maskable icons to a circle, squircle or rounded square depending on the launcher.
- Make short_name genuinely short. Android and iOS both truncate home-screen labels, and a name cut off mid-word looks worse than an abbreviation you chose yourself.
- Set background_color to the same colour as your page background, not to white by reflex. It is the splash screen colour, and a mismatch shows as a flash every single launch.
- start_url does not have to equal your home page. Sending installed users straight to the dashboard is one of the few ways an installed app immediately feels different from the site.
- A vector source works well here: upload an SVG and every size is rasterised from the same clean geometry rather than upscaled from a small PNG.
- If your source is not square, crop it first. The canvas stretches to fill each square, so a 16:9 logo comes out visibly squashed.
- The eight files download one after another, so your browser may ask once for permission to download multiple files — allow it or you will only get the first icon.
- Test the finished manifest with the Application panel in Chrome DevTools: it lists the parsed fields, the icons it found, and the specific reason an install prompt is being withheld.
- Live manifest.json preview
- Eight icon sizes from one image
- Maskable icon declarations
- Display mode and orientation selection
- Theme and background colour pickers
- HEIC and SVG source support
- Copy JSON or download the file
- Add a web app manifest to an existing site so it can be installed from the browser menu.
- Regenerate the whole icon set after a rebrand without opening an image editor.
- Produce the manifest fields a Lighthouse installability audit is complaining about.
- Check how a new logo reads at 72 and 96 pixels before committing to it.
- Give a back-end developer a complete, valid manifest to drop into a deployment.
- Prototype the launch experience by trying standalone, minimal-ui and fullscreen and seeing which one your app actually needs.
Related tools
View allWorks well with this5
More in Data & Dev12
Updated