BYTETOOLS

Web App Manifest Generator

Create a PWA manifest.json with name, start_url, display, theme colours, maskable icons, shortcuts and screenshots, plus the matching link and theme-color tags.

display_override (tried in order, before display)
Icons
Icon 1
Icon 2
Icon 3
Shortcuts (long-press menu)

No shortcuts yet — they are optional.

Screenshots (richer install dialog)

No screenshots yet — they are optional.

3
Icons
0
Shortcuts
2
Warnings
  • name is required — it is the title shown on the install prompt and the app listing.
  • short_name is missing — without it the home-screen label falls back to name and is often truncated.

manifest.json

Head tags

Save the JSON as manifest.json in your site root and add the head tags to every page. The manifest is built entirely in your browser — no file is uploaded and no icon is fetched.

What is the Web App Manifest Generator?

A web app manifest is the JSON file that turns a website into something a browser will offer to install: it names the app, decides which page opens on launch, sets the window mode and supplies the icons the launcher uses.

  • Full manifest fields: name, short_name, id, start_url, scope, display, orientation, lang and dir
  • display_override checkboxes written in the order you tick them
  • Icons, shortcuts and screenshots as repeatable rows with purpose and form factor
  • Live installability warnings for missing 192px, 512px and maskable icons
  • Colour pickers for the theme and background colours
  • Matching manifest link, theme-color and apple-touch-icon head tags

How to use the Web App Manifest Generator

  1. 1

    Enter the app name, short name, description, start_url, scope and id.

  2. 2

    Pick a display mode, tick any display_override modes, and set the theme and background colours.

  3. 3

    Add an icon row per file with its src, sizes, type and purpose — include a maskable one.

  4. 4

    Optionally add shortcuts for the long-press menu and screenshots for a richer install dialog.

  5. 5

    Clear the warnings, then download manifest.json and paste the head tags into your template.

About the Web App Manifest Generator

A web app manifest is the JSON file that turns a website into something a browser will offer to install: it names the app, decides which page opens on launch, sets the window mode and supplies the icons the launcher uses. This generator builds that file field by field and shows the JSON updating as you go.

It covers the parts people get wrong — a short_name that fits under a home-screen icon, a stable id, display_override tried before display, and a maskable icon so Android does not letterbox your artwork inside its adaptive shape. Installability basics are checked live, including the 192 and 512 pixel icons Chrome expects.

Everything is generated locally in your browser. No icon is uploaded and no URL is fetched — you supply paths, the tool writes the JSON, and you download it.

Frequently asked questions

What makes a PWA installable?

At minimum a manifest with a name, a start_url, a display mode other than browser and suitable icons, served over HTTPS with a service worker. Chrome specifically looks for 192x192 and 512x512 icons, which this tool warns about if they are missing.

How long should short_name be?

About 12 characters. Home screens and launchers truncate longer labels with an ellipsis, so short_name should be the shortest recognisable form of your app's name while name carries the full version.

What does a maskable icon purpose do?

It tells Android the icon has safe padding so the system can crop it into a circle, squircle or rounded square without cutting off your logo. Without a maskable icon your artwork gets letterboxed inside a plain shape.

Why does a manifest need an id?

id is the stable identity of the app, independent of start_url. If you change it later, browsers treat the manifest as a different app and users end up with two installed copies, so set it once and leave it alone.

Where do I put manifest.json?

Anywhere reachable on your site, most commonly the root, then reference it with a manifest link tag in the head of every page. Serve it as application/manifest+json and make sure the icon paths in it actually resolve.

Related tools