Web Manifest Generator Free Online Tool 2026

Free online utility. 100% client-side processing with no signup required.

Free & instant 100% client-side No signup needed

Use Web Manifest Generator

Enter your data below to use the Web Manifest Generator

📌 Try these examples:
RESULT

Last updated

What Is a Web App Manifest?

The web app manifest (manifest.json) is a JSON file that tells browsers how to display and behave when a Progressive Web App (PWA) is installed on a device. Without it, a web app cannot be installed as a PWA. The Web Manifest Generator creates a complete, valid manifest.json with all required fields.

Complete manifest.json Example

{
  "name": "My Awesome App",
  "short_name": "MyApp",
  "description": "A fast, reliable Progressive Web App",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#3b82f6",
  "background_color": "#ffffff",
  "lang": "en",
  "icons": [
    {
      "src": "/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable any"
    }
  ],
  "categories": ["productivity", "utilities"],
  "screenshots": [
    {
      "src": "/screenshots/desktop.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide"
    },
    {
      "src": "/screenshots/mobile.png",
      "sizes": "390x844",
      "type": "image/png",
      "form_factor": "narrow"
    }
  ]
}

Linking the Manifest in HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- Link to manifest -->
  <link rel="manifest" href="/manifest.json">
  
  <!-- Theme color for browser toolbar -->
  <meta name="theme-color" content="#3b82f6">
  
  <!-- iOS-specific (Safari doesn't fully support manifest) -->
  <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="MyApp">
  <link rel="apple-touch-icon" href="/icons/icon-192x192.png">
  
  <title>My Awesome App</title>
</head>

Display Mode Options

"display": "standalone"
  → No browser chrome (address bar, buttons)
  → Looks like a native app
  → Most common for PWAs ✓ Recommended

"display": "fullscreen"
  → Removes ALL browser UI
  → Best for games and immersive experiences

"display": "minimal-ui"
  → Keeps minimal browser controls (back, reload)
  → Good for apps that need navigation

"display": "browser"
  → Opens in regular browser tab
  → No PWA install benefits

Icon Requirements by Platform

Required sizes:
  192×192  — Android home screen icon (required for install prompt)
  512×512  — Splash screen, app stores (required)

Recommended additional sizes:
  72×72    — Android low-density
  96×96    — Android medium-density
  128×128  — Chrome Web Store
  144×144  — Windows tile
  152×152  — iPad Retina
  180×180  — iPhone Retina (apple-touch-icon)
  384×384  — Android extra-high-density

Icon purpose values:
  "any"       — standard icon
  "maskable"  — safe zone icon for adaptive icons (Android)
  "maskable any" — works for both (recommended)

Start URL and Scope

// App at root domain
"start_url": "/",
"scope": "/"

// App in subdirectory
"start_url": "/app/",
"scope": "/app/"

// Start URL with UTM tracking (analytics)
"start_url": "/?source=pwa",
"scope": "/"

// Scope controls which URLs stay "in-app"
// URLs outside scope open in the browser
// Example: scope "/app/" means:
//   /app/dashboard  → opens in PWA ✓
//   /blog/post-1    → opens in browser ✗

Theme and Background Colors

"theme_color": "#3b82f6"
  → Browser toolbar color on Android
  → Task switcher color
  → Should match your app's primary color

"background_color": "#ffffff"
  → Splash screen background while app loads
  → Prevents flash of white/black before app renders
  → Should match your app's initial background

Example for dark-themed app:
{
  "theme_color": "#1f2937",
  "background_color": "#111827"
}

Testing PWA Installation in Chrome

1. Open Chrome DevTools (F12)
2. Go to Application tab
3. Click "Manifest" in the left panel
4. Check for errors and warnings

Common issues:
  ✗ "No matching service worker detected"
    → Register a service worker for full PWA support
  
  ✗ "Icons must include a 192px and a 512px icon"
    → Add both required icon sizes
  
  ✗ "start_url does not respond with a 200"
    → Ensure start_url is accessible

Install prompt test:
  Chrome DevTools → Application → Service Workers
  → Check "Bypass for network"
  → Reload page
  → Look for install icon in address bar

Service Worker Registration (Required for Full PWA)

// Register service worker in your main JS file
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.error('SW registration failed:', err));
  });
}

// sw.js — minimal service worker
const CACHE_NAME = 'my-app-v1';
const URLS_TO_CACHE = ['/', '/index.html', '/styles.css', '/app.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(URLS_TO_CACHE))
  );
});

Common Use Cases

Frequently Asked Questions

Simply enter your data, click the process button, and get instant results. All processing happens in your browser for maximum privacy and security.

Yes! Web Manifest Generator is completely free to use with no registration required. All processing is done client-side in your browser.

Absolutely! All processing happens locally in your browser. Your data never leaves your device, ensuring complete privacy and security.