PWA web app manifest generator

How to use your manifest

A web app manifest tells browsers how your installed app should look and open. Start with your app's full name and a short name for places with less room, such as the Home Screen.

1. Set start_url to the page that should open when someone launches the app. Keep it inside scope. For an app under/notes/, use /notes/ for both. Usestandalone to open it without the usual browser toolbar. Keep the id stable when you update the app.
2. Replace the sample icon paths with files you've created. Upload them at those paths, with dimensions that match the sizesvalues. Adding a row here doesn't create or resize an image.
3. Download manifest.json and publish it at your site root. In Astro, put it in public/manifest.json. Copy the HTML snippets into the <head> of every app page, usually through a shared layout.

You can call the file manifest.webmanifest instead. Update the link's href to match, and serve it with theapplication/manifest+json content type.

Test the published manifest

Open your app in Chrome, then open DevTools → Application → Manifest. Check that the name, start URL and icons load. The panel reports problems such as missing icon files. Use its maskable icon preview to check that the logo survives cropping. See the Chrome DevTools guide.

If the manifest doesn't appear, check the link tag and open its URL directly. It should return JSON, rather than a 404 page or your site's HTML fallback. Check each icon URL too. Then try installing the app on the browsers and devices you support.

Chromium's installation checks include a name, 192×192 and 512×512 icons, a start URL and an app display mode. Requirements vary across browsers; generating this file doesn't guarantee an install prompt. MDN explains the current PWA installation requirements.

Download the JSON to keep your complete configuration, including your icon rows.