consolelog.tools

PWA Manifest Generator

Build a complete, installable web app manifest — name, icons, display mode, shortcuts, categories — with a live installability audit that mirrors Chrome's Add-to-Home-Screen criteria. Get the manifest.json, the companion iOS <head> tags, and a service-worker skeleton, all updating as you type.

About this ToolHow it works, benefits & use cases

Most manifest generators hand you a JSON blob and leave you guessing whether your app will actually install. This one is built around a live installability audit. As you fill in the form, the tool scores your manifest 0-100 against the same criteria Chrome checks before it offers "Add to Home screen" — a name or short_name, a start_url, an installable display mode, and 192x192 plus 512x512 icons — and shows a prominent readiness ring that turns red the moment something is missing, with a plain-language explanation of each blocking issue. Beyond the basics it models the full W3C manifest surface real apps need: a stable id, scope, the display_override fallback chain (including window-controls-overlay for desktop apps), orientation, theme and background colors, the official categories list, long-press shortcuts, and an icon set with optional maskable variants for Android adaptive icons. Because the manifest only covers Chromium, the tool also emits the companion iOS <head> tags Safari still relies on (apple-mobile-web-app-capable, apple-touch-icon, theme-color) and a network-first service-worker skeleton wired to your start_url. Everything updates live and the whole configuration lives in a shareable URL.

How to Use

  1. 1Start from a preset — Standalone app, Fullscreen game, Desktop app (window-controls-overlay), or News PWA with shortcuts — or fill in the form by hand.
  2. 2Enter the identity fields: app name, short name (shown under the home-screen icon), description, id, start_url, and scope.
  3. 3Pick a display mode and watch the readiness ring; choosing "browser" will flag that the app cannot be installed.
  4. 4Set theme and background colors, choose your icon base path, keep maskable icons on for Android, and add any extra sizes.
  5. 5Optionally add categories and long-press shortcuts, then copy the manifest, the companion <head> tags, and the service-worker skeleton — or share the URL.

Key Benefits

  • Live installability audit scored 0-100 against Chrome Add-to-Home-Screen criteria
  • A readiness ring that turns red on any blocking issue, with a plain-language fix for each
  • Full W3C manifest: id, scope, display_override, orientation, categories, and shortcuts
  • Generates maskable icons for Android adaptive shapes alongside the standard set
  • Emits the companion iOS <head> tags Safari needs, since the manifest alone does not cover it
  • Includes a network-first service-worker skeleton wired to your start_url
  • Clean output that omits empty keys, and a shareable URL capturing the whole config

Common Use Cases

  • Making an existing web app installable and verifying it actually meets the install criteria
  • Setting up a fullscreen, landscape-locked HTML5 game manifest
  • Configuring a desktop-class PWA with window-controls-overlay
  • Adding long-press shortcuts and categories before submitting to an app catalogue
  • Generating the iOS head tags and apple-touch-icon link that the manifest does not handle
100

Installability readiness

Meets the install criteria. Ship it.

Save to your public directory and link it from <head>

{
  "id": "/",
  "name": "My Progressive Web App",
  "short_name": "My PWA",
  "description": "An installable, offline-capable progressive web app.",
  "lang": "en",
  "start_url": "/?source=pwa",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0ea5e9",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-maskable-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

The manifest covers Chromium; these cover iOS Safari

<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#0ea5e9" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="My PWA" />
<link rel="apple-touch-icon" href="/icons/icon-180x180.png" />
service-worker.js skeletonshow
// My Progressive Web App — service worker
const CACHE = 'my-pwa-v1';
const PRECACHE = ['/', '/?source=pwa'];

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(CACHE).then((c) => c.addAll(PRECACHE)));
  self.skipWaiting();
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) =>
      Promise.all(keys.filter((k) => k !== CACHE).map((k) => caches.delete(k)))
    )
  );
  self.clients.claim();
});

// Network-first for navigations, cache-first for everything else.
self.addEventListener('fetch', (event) => {
  const { request } = event;
  if (request.mode === 'navigate') {
    event.respondWith(fetch(request).catch(() => caches.match('/?source=pwa')));
    return;
  }
  event.respondWith(
    caches.match(request).then((cached) => cached || fetch(request))
  );
});
Manifest audit · 4 icons

Presets

Identity

Shown under the home-screen icon

Display & appearance

display_override (fallback chain)

Tried in order before display. Useful for window-controls-overlay desktop apps.

Icons

Generates /icons/icon-192x192.png, /icons/icon-512x512.png, …

Extra sizes (192 & 512 are always included)

4 icons in the manifest.

Categories

Shortcuts

Optional. Shortcuts appear when a user long-presses the installed icon.

What makes a PWA installable

Chrome only offers “Add to Home screen” when a few things line up: a manifest linked from your page, a name or short_name, a start_url, a display of standalone/fullscreen/minimal-ui, and icons at 192×192 and 512×512. The readiness audit above checks exactly these and explains anything that is missing.

Maskable icons and iOS

Android masks icons into the device’s adaptive shape, so a separate purpose: "maskable" icon (with padding inside a safe zone) avoids an awkward letterbox. iOS ignores the manifest icons for the home screen and uses the apple-touch-icon link instead — which is why this tool emits the companion <head> tags alongside the manifest.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on Twitter

Related tools