elefcode

PWA Manifest Generator

Build a web app manifest with icons, shortcuts and screenshots, check it is installable, and preview the splash screen.

App
Look
Display
URLs
Icons
Shortcuts & screenshots
My Progressive Web App
  • ✓ Has a name or short_name
  • ✓ Has a 192×192 icon
  • ✓ Has a 512×512 icon
  • ✓ Has a start_url
  • ✓ display is standalone, fullscreen or minimal-ui
  • ✓ Has a maskable icon (recommended for Android)
  • ✓ Has screenshots (richer install dialog)
  • ✓ Has a description
{
  "id": "/",
  "name": "My Progressive Web App",
  "short_name": "MyApp",
  "description": "A fast, installable web app.",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "theme_color": "#0ea5e9",
  "background_color": "#ffffff",
  "lang": "en",
  "categories": [
    "productivity"
  ],
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/screenshots/wide.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide",
      "label": "My Progressive Web App on desktop"
    },
    {
      "src": "/screenshots/narrow.png",
      "sizes": "750x1334",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "My Progressive Web App on mobile"
    }
  ]
}

Put it in your site root (public/ in most frameworks).

  • Replace the two screenshot paths with real captures of your app: wide at least 1280×720, narrow in portrait.
  • Serve the file as application/manifest+json. Installation also needs HTTPS (localhost is exempt).

Advertisement

Guide

About the PWA Manifest Generator

A web app manifest is a small JSON file that tells the browser how your site should behave when it is installed: its name, icon, colours, start page and whether it opens in its own window. Browsers only offer the install prompt when the manifest has the essentials.

Fill in the fields, watch the checklist turn green, and copy the manifest together with the tags that link it from your pages.

Maskable icons

Android crops app icons into circles, squircles and other shapes. A maskable icon keeps its important content inside the centre 80% so nothing is cut off, and fills the rest with background colour. Without one, Android shrinks your icon onto a white circle.

id, start_url and scope

start_url is the page that opens when the app launches. scope is the set of URLs that stay inside the app window. id gives the app a stable identity, so you can change start_url later without browsers treating it as a new app.

How to use it

  1. 1Enter the app’s name, description and colours.
  2. 2List your icons, including a maskable 512×512.
  3. 3Add shortcuts and screenshots if you have them.
  4. 4Copy the manifest into your site root and the tags into <head>.

Frequently asked questions

manifest.json or manifest.webmanifest?

Both work. .webmanifest is the extension in the spec, and some servers already send it with the correct application/manifest+json type.

Why is my PWA not installable?

Chrome needs a name, 192 and 512 pixel icons, a start_url, a display mode other than browser, and HTTPS. The checklist shows which of these are missing.

What does theme_color do?

It colours the browser toolbar and, once installed, the title bar and task switcher. Keep the matching theme-color meta tag so pages that are not installed get it too.

Do I still need apple-touch-icon?

Yes. iOS Safari uses the apple-touch-icon link for the home-screen icon and ignores the icons in the manifest. The head tags include it.

Does a manifest make my site work offline?

No. Offline support comes from a service worker. The manifest only controls how the installed app looks and launches.

Related tools

Favicon GeneratorMeta Tag GeneratorColor Palette Generatorsecurity.txt Generator