Web App Manifest Generator

Generate valid manifest.json for PWAs — configure icons, display mode, shortcuts, and more

All processing happens in your browser. No data is sent to any server.

Presets

Minimal setup — standalone display, 2 essential icons

Basic Info

App Name

Full name shown in install prompts and app listings

Short Name

Under the icon on home screen — 12 chars or fewer

Description

Start URL

URL loaded when the PWA launches — use /?source=pwa to track installs in analytics

Display & Behavior

Display Mode

Looks like a native app — hides browser address bar and UI

Orientation

Preferred screen orientation when the PWA launches

Colors

Theme Color

OS title bar and task-switcher color on Android and Chrome desktop

Background Color

Splash screen background before the app paints

Language

Text Direction

ltr is the default and is omitted from output to keep it concise

Icons

Enable the sizes you have. 192×192 and 512×512 are required by Chrome for installation.

Include Categories

Classify your app in PWA directories and discovery surfaces

Include Shortcuts

Quick-launch actions from the home screen long-press menu (up to 4)

Include Screenshots

Preview images shown in Chrome's desktop install prompt (up to 4)

Generated manifest.json

{
  "name": "My PWA App",
  "short_name": "My App",
  "description": "A progressive web application",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "theme_color": "#3b82f6",
  "background_color": "#ffffff",
  "lang": "en",
  "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"
    }
  ]
}

You’re turning your web app into a PWA and need a manifest.json with name, short_name, start_url, display: "standalone", theme_color, background_color, 6 icon sizes, shortcuts, and screenshots. The spec has 20+ fields and getting the icon sizes wrong means no “Add to Home Screen” prompt on Android.

Why This Generator (Not Writing JSON by Hand)

The Web App Manifest spec has subtle requirements — icons need specific sizes and type values, display must be one of 4 valid strings, shortcuts need url relative to start_url. This tool provides a visual form with all valid options, generates correctly structured JSON, and validates as you build. Everything runs in your browser.

What Is a Web App Manifest?

A web app manifest is a JSON file (typically named manifest.json) that tells browsers how your Progressive Web App (PWA) should behave when installed on a device. By linking this file from your HTML <head>, you enable:

Add to Home Screen — users can install your app without an app store
Standalone or fullscreen mode — removes browser UI for a native app experience
Custom app icon — your branding on the home screen and task switcher
Splash screen — themed loading screen using background_color and your icon
App shortcuts — jump to key screens directly from the home screen long-press menu

How to Use This Tool

Select a preset — start with Basic, Full-Featured, or Game to load sensible defaults
Fill in basic info — set your app name, short name, description, and start URL
Pick display mode — standalone hides browser UI; fullscreen is best for games
Configure icons — enable the sizes you have and adjust paths and purposes
Add optional extras — toggle categories, shortcuts, and screenshots as needed
Copy the manifest — click Copy and save the file as manifest.json in your project root

Then link it from your HTML <head>:

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

No data is sent to any server. All generation runs entirely in your browser.

Manifest Fields Explained

name and short_name

name is the full application name shown on install prompts and in app listings. short_name is used where space is limited — typically under the icon on the home screen. Keep short_name to 12 characters or fewer to avoid truncation.

start_url

The URL that loads when the user launches your installed PWA. Use / for the homepage or /app if your main content lives at a subpath. Adding a query parameter like ?source=pwa lets you track installs separately in analytics.

display

Controls how much browser UI is shown when the app is launched:

Value	Description
`standalone`	Hides browser URL bar — looks like a native app
`fullscreen`	Full screen without any browser controls — ideal for games
`minimal-ui`	Shows back and reload buttons, hides address bar
`browser`	Regular browser tab — no installation benefit

theme_color

Sets the OS-level title bar and task-switcher color on Android and desktop Chromium. Use your primary brand color. If not set, Chrome uses white.

background_color

The background color shown on the PWA splash screen before the app paints. Set it to match the initial background of your app to avoid a visible color flash during startup.

Icons

Include icons at multiple sizes — browsers and operating systems pick the best fit for each context:

Size	Primary use
72×72	Android low-density home screen
96×96	Android medium-density
128×128	Chrome Web Store listing
144×144	Windows tile
152×152	iOS home screen
192×192	Android home screen (required by Chrome)
384×384	Large Android displays
512×512	Splash screen and app store listings (required)

Maskable icons (purpose: maskable) include extra padding so Android adaptive icon shapes (circle, squircle, teardrop, etc.) can safely clip the image without cutting off content. Keep the subject within the inner 80% of the image area.

Monochrome icons (purpose: monochrome) are used for system UI elements that need a single-color silhouette, such as notification icons.

Shortcuts

App shortcuts appear when the user long-presses your home screen icon on Android or right-clicks the taskbar icon on Windows. Each shortcut needs a name and url. short_name and description are optional. Up to 4 shortcuts are recommended — more may be silently ignored by the OS.

Screenshots

Screenshots appear in Chrome’s desktop install prompt and in some PWA directories. Provide the src path, sizes (e.g., 1280x720), and type (image/png or image/webp). A label describes what the screenshot shows.

lang and dir

lang sets the primary language as a BCP 47 code (e.g., en, zh, ar). dir sets text direction — ltr (left-to-right), rtl (right-to-left), or auto. These help browsers localize the install experience and are especially important for RTL languages like Arabic and Hebrew.

Making Your App Installable

For Chrome to offer an install prompt, your app must meet these criteria:

Link the manifest in <head>:

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

Serve over HTTPS — PWA installation requires a secure context

Register a service worker — even a minimal caching worker qualifies:

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

Include 192×192 and 512×512 icons — these two sizes are required by Chrome
Set start_url — must be same-origin as your app

Once all criteria are met, Chrome, Edge, and other Chromium-based browsers display an install banner automatically.

iOS Considerations

iOS Safari partially supports the web manifest. For best results on iOS, add Apple-specific meta tags alongside the manifest link:

<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 App" />
<link rel="apple-touch-icon" href="/icons/icon-192x192.png" />

iOS reads apple-touch-icon for the home screen icon rather than the manifest icons array. iOS does not show an install banner — users must manually use Share → Add to Home Screen.

Frequently Asked Questions

What is a PWA manifest used for? A PWA manifest (manifest.json) tells browsers how to install and display your Progressive Web App — including its name, icons, theme color, start URL, and display mode. Linking it from your HTML enables Add to Home Screen prompts on Android and desktop Chrome.

What icon sizes are required for a PWA? At minimum, 192×192 and 512×512 PNG icons are required by Chrome for the install prompt. Include all 8 sizes (72, 96, 128, 144, 152, 192, 384, 512) for full coverage across devices.

What is the difference between standalone and fullscreen display? standalone hides the browser URL bar so your app looks like a native application. fullscreen removes all browser UI entirely and is typically used for games that need every pixel of the screen.

What are maskable icons? Maskable icons include extra safe-zone padding so Android adaptive icon shapes (circle, squircle, teardrop, etc.) can clip them without cutting off important content. Use purpose: maskable for icons where the subject stays within the inner 80% of the image.

Does manifest.json affect SEO? No. The manifest is used only for PWA installation features. It does not affect Google search ranking directly. It can help your app appear in PWA directories, but has no effect on traditional web SEO.

Is my data sent to a server? No. All manifest generation runs entirely in your browser. No form data is transmitted to any server and nothing is tracked.

Related Tools

Meta Tag Generator

Generate HTML meta tags for SEO, Open Graph, and Twitter Cards

Favicon Generator

Generate multi-size favicons from a single image

Robots.txt Generator

Generate robots.txt to control search engine crawling

More SEO & Web Tools

Meta Tag Generator Open Graph Preview robots.txt Generator Favicon Generator Open Graph Preview Twitter Card Generator View all →