Skip to main content
iotools.cloudiotools.cloud

PWA Web App Manifest Generator

Generate a manifest.json for a Progressive Web App: name, short name, description, start URL, scope, display mode, orientation, theme/background colors, icon set, and categories. Copy or download a ready-to-use manifest plus the HTML <link> tag.

Input

App Identity

Full app name shown on the install prompt and splash screen.

Used on the home screen (recommended: 12 characters or less).

Primary language (BCP 47 tag, e.g. en-US, fr, de-DE).

Navigation

URL opened when the app launches.

Navigation boundary for the app (optional).

Unique identity for the app (optional, recommended).

Display

Colors the browser toolbar/status bar when the app is open.

Background color on the splash screen while the app loads.

Icons

Folder path (or full URL) where your icon files live.

Use {size} as a placeholder — replaced with each selected size.

Categorization

Comma-separated app-store category keywords (optional).

Output

manifest.json
HTML Link Tag

Add this inside your page's <head>.

Was this helpful?

Guides

The PWA Web App Manifest Generator builds the manifest.json file that turns a website into an installable Progressive Web App. Fill in your app's name, navigation, display preferences, colors, and icon set, and the tool produces a valid, ready-to-use manifest you can copy or download — plus the <link> tag that wires it into your page. Everything runs in your browser; nothing you enter is sent to a server.

What a web app manifest does

A web app manifest is a JSON file that tells the browser (and the OS) how your PWA should look and behave once installed — the same way a native app has an icon, a name, and a launch behavior:

  • name / short_name — the full name shown on the install prompt and splash screen, and the shorter label under the home-screen icon.
  • start_url / scope — which page opens when the app launches, and which URLs stay "inside" the app rather than escaping to the browser.
  • display — how much browser chrome shows: standalone (app-like, no address bar) is the common choice; fullscreen hides everything; minimal-ui keeps a thin nav bar; browser behaves like a normal tab.
  • orientation — locks the screen to portrait, landscape, a specific rotation, or leaves it unset with any.
  • theme_color / background_color — theme_color tints the OS status bar and app switcher while open; background_color fills the splash screen while it loads.
  • icons — images the OS uses for the home-screen icon, splash screen, and task switcher, at several pixel sizes.
  • categories — optional keywords some app stores and directories use to classify PWAs (e.g. productivity, utilities).

How to use the tool

  1. Fill in Name and Short Name — at least one should be set for the manifest to be meaningful.
  2. Set Start URL (usually /) and, optionally, a Scope and App ID.
  3. Pick a Display Mode and Orientation matching how you want the app to feel when launched.
  4. Choose Theme Color and Background Color — any valid hex color.
  5. Under Icons, set the base path and filename pattern ({size} is a placeholder, e.g. icon-{size}.png), then check the sizes you have image files for. For installability, most browsers expect at least a 192×192 and a 512×512 icon.
  6. Copy the generated manifest.json to your site root, and copy the <link rel="manifest" ...> tag into your page's <head>.

The manifest updates live as you type — there's no separate "generate" step.

Do I need icons at every size?

No — only check the sizes you have real image files for. Skipping 192×192 and 512×512 specifically can prevent Chrome and Android from treating the site as installable, since those are the sizes most platforms rely on for the home-screen icon and splash screen.

What's the difference between scope and start_url?

start_url is the single page that opens when the app launches. scope is the boundary: links within scope stay inside the installed app's window; a link outside it opens in the regular browser. Leave scope blank and it defaults to the directory of start_url.

Why does orientation have "primary" and "secondary" variants?

portrait/landscape lock the general orientation and let the OS pick the natural rotation; the -primary/-secondary suffixes pin one specific rotation (e.g. landscape-primary vs. the upside-down landscape-secondary). Most apps only need the base value — the specific variants are for apps with a real reason to reject one rotation of an otherwise-symmetric orientation.

pwamanifest.jsonweb app manifestprogressive web appgeneratoricons

Use it from code

From 3 credits per call

REST API

curl -X POST https://api.iotools.cloud/v1/tool/pwa-web-app-manifest-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "appName": "IO Tools",
    "shortName": "IO Tools",
    "description": "Free online developer and SEO tools that run ent…",
    "lang": "en-US",
    "dir": "auto",
    "startUrl": "/",
    "scope": "/",
    "id": "/?source=pwa",
    "display": "standalone",
    "orientation": "any",
    "themeColor": "#464aff",
    "backgroundColor": "#ffffff",
    "iconsPath": "/icons/",
    "iconFilename": "icon-{size}.png",
    "iconType": "image/png",
    "iconPurpose": "any maskable",
    "size72": "",
    "size96": "true",
    "size128": "true",
    "size144": "true",
    "size152": "",
    "size192": "true",
    "size384": "",
    "size512": "true",
    "categories": "productivity, utilities"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `pwa-web-app-manifest-generator` tool (PWA Web App Manifest Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads