What makes a PWA installable?

A browser shows an install prompt when the page is served over HTTPS, has a registered service worker, and links a manifest with at least name or short_name, a start_url, a display mode of standalone or fullscreen, and a 192px and a 512px icon.

What is the difference between name and short_name?

name is the full application name shown in the install dialog and splash screen, while short_name is the shorter label used under the home-screen icon where space is limited, typically twelve characters or fewer.

What does a maskable icon do?

A maskable icon has its important content inside a safe zone so the operating system can crop it into any shape, such as a circle, without clipping the logo. Mark such icons with purpose maskable so adaptive launchers use them.

Which display mode should I pick?

standalone hides the browser UI and feels like a native app, which most installable apps use. fullscreen also hides the status bar, minimal-ui keeps minimal navigation, and browser opens in a normal tab.

Is my data sent anywhere?

No. The manifest JSON is generated in your browser from the values you type. Nothing is uploaded, so you can build manifests for private or internal apps freely.

What is the PWA manifest.json Builder?

Build a valid manifest.json for your progressive web app with name, short_name, icons, theme_color, background_color, display mode, orientation, start_url, scope, and categories — plus the exact HTML link tag and recommended icon sizes for installability. It runs free in your browser on Gera Tools, with nothing uploaded.

PWA manifest.json Builder

Name: PWA manifest.json Builder
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

A Web App Manifest is the JSON file that turns a website into an installable progressive web app, defining its name, icons, colours, and how it launches. This builder produces a valid manifest.json plus the exact HTML <link> tag and the icon sizes browsers require for installability.

How it works

The manifest is a flat JSON object the browser reads when you link it from your page’s <head>:

Identity fields — name, short_name, description — appear in the install dialog and on the splash screen.
Appearance fields — theme_color, background_color, display, orientation — control the launched window and splash.
Launch fields — start_url, scope — define where the app opens and which URLs it controls.
The icons array lists images with src, sizes, type, and optional purpose: "maskable"; a 192px and a 512px icon are the minimum for an install prompt.

A minimal installable manifest

After filling the builder, the generated output looks like this:

{
  "name": "My Application",
  "short_name": "MyApp",
  "description": "A short description of what this app does.",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#1a73e8",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png",
      "purpose": "maskable" }
  ]
}

Link it from your HTML <head>:

<link rel="manifest" href="/manifest.json">

The three installability requirements

A browser shows an install prompt only when all three conditions are true:

HTTPS — the page must be served over a secure origin (or localhost for development).
Service worker registered — at least a minimal fetch handler must be active.
Valid manifest — must have name or short_name, a start_url, a display of standalone or fullscreen, and icons at 192px and 512px.

This builder satisfies requirement 3; you still need to register a service worker separately.

Display modes explained

Mode	What the user sees
`standalone`	Launched in its own window, browser chrome hidden — feels like a native app
`fullscreen`	Full screen with status bar hidden — common for games
`minimal-ui`	Browser chrome reduced to minimal back/reload buttons
`browser`	Opens in a normal browser tab — effectively no PWA window

Most productivity and utility apps use standalone. Games often use fullscreen.

Maskable icons

A maskable icon stores its logo centred in a safe zone (the inner 80% of the image), with coloured padding around it. Android adaptive launchers crop icons into circles, squircles, or other shapes depending on the device. If you only provide a standard icon, the launcher crops a rectangle out of it, often clipping corners. A maskable icon fills the safe zone so the shape crop always looks intentional.

Tips and common mistakes

Set start_url to /?source=pwa or a similar attributed URL so you can see PWA launches separately in your analytics.
Keep short_name to 12 characters or fewer — longer names are truncated under the home-screen icon on small screens.
Provide both a standard and a maskable version of the 512px icon so you cover all Android launcher shapes without relying on a single image for both purposes.
Test the manifest in Chrome DevTools → Application → Manifest to see exactly what the browser parsed.