Website Tools

PWA Manifest Generator

Generate a Web App Manifest including icon declarations, theme colors, display mode, and HTML install tags.

Worked example and publication checks

Browser-basedNo accountReady to use

App nameShort nameApp IDStart URLScopeDisplay modeOrientationTheme colorBackground colorDescription

Icons

Icon pathSizePurpose

Add Apple touch icon linkAdd display override fallback

manifest.webmanifest

HTML snippet

Manifest is ready.

From input to publication

Worked example: an installable project board

A fictional project board lives at /board/ while the public website stays at /. This example keeps the installed app focused on that section. The manifest describes the app; the HTML, actual icon files, and installation checks complete the setup.

Example inputs

App name: Project Board
Short name: Board
App ID, Start URL, Scope: /board/
Display mode: standalone
Theme color: #175cd3
Background color: #ffffff
192x192 icon: /icons/icon-192.png, purpose any
512x512 icon: /icons/icon-512.png, purpose any
Display override fallback: Unchecked
Apple touch icon link: Checked

manifest.webmanifest at the website root

{
  "id": "/board/",
  "name": "Project Board",
  "short_name": "Board",
  "start_url": "/board/",
  "scope": "/board/",
  "display": "standalone",
  "theme_color": "#175cd3",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

HTML head of the project board pages

<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#175cd3" />
<link rel="apple-touch-icon" href="/icons/icon-192.png" />

Create the files referenced by the manifest

Download the manifest to the website root and create the two PNG icon files at the declared sizes. Changing a filename to include 512 does not resize the image. The generator declares icons but does not generate the image files.

Both icons use purpose any in this example. For adaptive icon shapes, add a separate maskable icon designed with an appropriate safe area. Marking an ordinary edge-to-edge logo as maskable can cause important details to be cropped. The generator's maskable-icon reminder is expected for this minimal example.

Check the boundary of the installed app

With scope /board/, /board/tasks/ is inside the app and /pricing/ is outside it. The trailing slash matters because scope matching uses a URL prefix. Keep start_url within that scope and on the same origin.

A frequent mistake is to leave start_url at / while limiting scope to /board/. The browser may fall back to a different effective scope. Fix those values before investigating icon or installation problems.

Test the deployed app, not just the JSON

Use HTTPS in production; localhost is suitable for development. In Chromium developer tools, inspect Application > Manifest and the Network panel. Confirm the manifest loads as JSON with a suitable content type, such as application/manifest+json, and that each icon request returns an image rather than an HTML error page.

Installation support and prompts vary by browser and platform. Try the browser's installation menu on a device you intend to support, then launch from its new icon. Confirm that the board opens at /board/ and has the expected name and appearance.

Installation and offline support are separate

A manifest does not cache the project board. Service workers are commonly used for offline functionality, but are not universally required simply to install a PWA. This generator does not provide a service worker or an offline data strategy.

Test a reload in airplane mode separately. For an authenticated board, do not indiscriminately cache account pages or private task data. Decide what can safely be stored on the device before implementing offline support.

Verification checklist

Compare the generated JSON with this example. Leave description and orientation empty, and disable the optional display override.
Open /manifest.webmanifest and both icon paths directly. Confirm their real file types and pixel dimensions.
Install on a target browser, launch from the icon, and check the opening URL and scope behavior.
Test offline behavior independently. Successful installation does not mean the board works without a connection.

Example and source review: September 9, 2026.

Try a real manifest with a small app

The Launch Checklist is a runnable example with a manifest, two PNG icons and a working checklist. Its files live together under /demos/pwa/, so relative URLs keep the app inside that directory.

Open Launch Checklist

Inspect the actual files

Manifest JSON: id, start_url and scope are all ./.
192 x 192 icon and 512 x 512 icon: real square PNGs, declared with purpose any, not untested maskable icons.
HTML file, stylesheet and JavaScript.

What to check in your browser

Open the app, change a checkbox and confirm that the completed count changes.
In Chromium developer tools, inspect Application > Manifest. Verify the resolved start URL, scope and both icons. A valid JSON file is only the first step.
When your browser offers installation, install the app and check its name, icon and launch location. Installation availability and menu wording differ by browser and device; a manifest cannot force an install prompt.

This example has no service worker, offline cache or persistent checklist storage. Reloading starts a fresh checklist. Installing it does not make it work offline. An offline production app needs a separate caching strategy, update handling and tests.

Verification, September 21, 2026: tested locally and over HTTPS in Chromium 149.0.7827.55. The manifest parsed without errors; both PNG dimensions, resolved app paths, checkbox counter, reset and fresh reload passed. Layouts were checked at 320, 375 and 1280 pixels. On macOS, installation through the Chrome for Testing 149.0.7827.55 interface opened Launch Checklist as a separate app at the correct URL; its checkbox counter and reset also worked there. Android, iOS and other browsers were not installation-tested.

MDN: Making PWAs installable

What this tool is for

A Web App Manifest tells browsers how a website should behave when it is installed like an app. It defines the app name, start URL, display mode, theme color, background color, and icon files. Without a correct manifest, a site may still work in the browser but look unfinished when saved to a phone home screen or opened as an installed web app.

This generator is aimed at developers and site owners who need a clean baseline quickly. It creates the manifest JSON and the matching HTML link tag. It also reminds you which icon sizes are typically needed, including large icons and maskable icons for Android-style adaptive shapes.

How to use it

Enter the app name, short name, start URL, scope, colors, and preferred display mode.
Prepare PNG icons in the required sizes, especially 192x192 and 512x512.
Generate the manifest JSON and save it as manifest.webmanifest or manifest.json.
Add the generated link tag to the HTML head and test installation behavior in target browsers.

Other use cases

Client portal

Use standalone display mode, a clear short name, and a start URL that points to the dashboard instead of the marketing homepage.

Restaurant ordering app

Use brand colors, a short app name that fits under an icon, and a start URL that opens the ordering flow directly.

Internal field tool

Use fullscreen or standalone display only if the team understands how navigation and browser controls will change after installation.

Important notes

Icon paths in the manifest must resolve from the deployed website, not from a local development folder.
The short name should be readable under an app icon. Long brand names are often truncated.
Test the manifest with production HTTPS. Install behavior can differ from local development.

Limitations

A manifest alone does not make a site offline-capable. Offline behavior requires a service worker.
Browser support and install prompts vary by platform.
This tool generates declarations; it does not create the actual image files.

Sources and review context

This page is maintained by Martin Trixner and was last reviewed on September 9, 2026. The tool output is based on public documentation and should still be tested against the target platform before production use.

FAQ

Which icon sizes should a PWA include?

A practical baseline is 192x192 and 512x512 PNG icons. A maskable 512x512 icon improves Android adaptive icon rendering.

Where should the manifest be linked?

Add a manifest link in the HTML head of pages where the app can be installed, usually pointing to /manifest.webmanifest.

Does a manifest make a website work offline?

No. Offline behavior requires a service worker. The manifest mainly describes install appearance and launch behavior.

What is a maskable icon?

A maskable icon includes safe padding so Android and other platforms can crop it into adaptive shapes without cutting off important artwork.

Can the start URL be any page?

It should be a stable URL inside the app scope. Choose the page users should see when opening the installed web app.

Should I use manifest.json or manifest.webmanifest?

Both are used in practice. The .webmanifest extension is explicit, but the most important part is serving valid JSON with the correct link tag.

Optional usage statistics

PWA Manifest Generator