Home/SEO, Domain & Network Inspector Tools/Web App Manifest (manifest.json) PWA Config Generator

Web App Manifest (manifest.json) PWA Config Generator

Generate W3C-compliant Progressive Web App manifest.json configuration files with customizable icons, app shortcuts, display modes, and iOS metadata.

PWA Parameters

Configuration Presets:

Application Name:

Short Name (Homescreen):

Limit to 12 chars for mobile app grid titles.

App ID (Unique):

App Description:

Start URL:

Navigation Scope:

Display Mode:

Screen Orientation:

Theme Color (Status Bar):

Background Color (Splash):

Language:

Direction:

Categories:

App Icons (2):

Icon #1

Icon #2

App Shortcuts (1):

Shortcut #1

Real-Time Device Simulation

standalone : portrait

App Launch Splash Screen

9:41

TwisterTools Studio

Mobile App Icon Grid

LTE100%

TwisterTools

Icons Count2 configured

Maskable IconIncluded

Shortcuts1 active

FormatW3C Manifest

{
  "id": "/?source=pwa",
  "name": "TwisterTools Studio",
  "short_name": "TwisterTools",
  "description": "Production-grade browser utilities, developer toolkits, and client-side calculators.",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "orientation": "portrait",
  "dir": "ltr",
  "lang": "en-US",
  "theme_color": "#4f46e5",
  "background_color": "#ffffff",
  "categories": [
    "utilities",
    "productivity",
    "developer"
  ],
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "shortcuts": [
    {
      "name": "Open Dashboard",
      "short_name": "Dashboard",
      "url": "/dashboard",
      "description": "Quickly access system metrics and recent tools."
    }
  ]
}

PWA Deployment Note: Save this file as manifest.json inside your public root directory (e.g. /public/manifest.json in Next.js). Ensure your web server serves it with the MIME type application/manifest+json.

The W3C Web App Manifest Architecture: Turning Webpages into Native Software

A Web App Manifest is the foundational specification defined by the W3C that bridges web applications and native operating system shells. When a Progressive Web App is installed on Android, iOS, macOS, Windows, or Linux, the client OS reads this declarative JSON blueprint to determine how the application interacts with system task switchers, notification centers, and display compositors.

Immersive Display Modes

Control how much browser chrome surrounds your web experience. Switch from standalone single-window app views to edge-to-edge hardware fullscreen rendering for games and data dashboards.

Adaptive Splash Screens

Pair background_color with high-res maskable icons to automatically generate seamless native launch screens while your Service Worker caches resources in the background.

Navigation Sandboxing

Strict scope and start_url parameters establish security boundaries, keeping your users inside the installed PWA experience while opening external outbound links in standard browser tabs.

Display Modes Comparative Breakdown

Selecting the correct display mode determines the boundary between the host browser UI and your application interface. Review the capabilities and typical use cases of each option:

Display Mode	Browser UI Visible	OS Status Bar	System Window Shell	Recommended Use Cases
standalone	Hidden (No URL bar)	Visible (Themed)	Dedicated OS Window	SaaS portals, productivity software, productivity dashboards
fullscreen	Hidden	Hidden (Hardware edge)	Full Canvas Overlay	Video games, VR canvases, video streaming, kiosks
minimal-ui	Minimal controls (Back/Reload)	Visible	Standalone Window	News aggregators, blogs, documentation sites
browser	Standard Chrome	Visible	Existing Browser Tab	Traditional websites not seeking standalone app installation

Step-by-Step PWA Manifest Deployment Checklist

Follow this battle-tested checklist to ensure your Progressive Web App passes Google Lighthouse PWA audits and triggers native install banners across desktop and mobile browsers:

Recommended Setup Procedures

• HTTPS Everywhere: Progressive Web Apps require a secure HTTPS origin (or localhost during development) to permit Service Worker registration and manifest install triggers.
• Pair 192x192 & 512x512 PNG Icons: Provide both sizes without exception. The 192px icon is rendered on mobile homescreens, while the 512px icon powers the splash screen and Windows taskbar launcher.
• Define an Explicit Maskable Icon: Add "purpose": "maskable" to your 512px icon. This guarantees that Android adaptive icon shaping (squircle, circle, rounded rectangle) will not pad your icon with white borders.
• Register a Service Worker: Even with a complete manifest, modern browsers will only present native install banners if an active Service Worker with a fetch event listener is detected.

Common Manifest Pitfalls to Avoid

• Incorrect Content-Type Header: Ensure your server returns application/manifest+json instead of text/plain when serving manifest.json.
• Omitting the id Field: Failing to specify an explicit id causes browsers to rely on start_url. If query parameters change later, the browser treats the app as an entirely new installation.
• Neglecting iOS Safari Meta Tags: Apple iOS Safari ignores several manifest settings and instead requires companion <meta name="apple-mobile-web-app-capable"> tags directly in your HTML <head>.
• Mismatching Scope and Start URL: If your start_url falls outside your specified scope, the browser will refuse to install the PWA.

Frequently Asked Questions (FAQ)

What is a Web App Manifest (manifest.json) in Progressive Web Apps?

A Web App Manifest is a W3C-standard JSON file that informs modern web browsers how your web application should behave when installed on a mobile or desktop operating system. It defines splash screens, launch icons, display modes (such as standalone or fullscreen), background colors, and application orientation.

What are the minimum icon size requirements for PWA installation?

To trigger the native browser install prompt, Chromium browsers require at least a 192x192 PNG icon and a 512x512 PNG icon. Additionally, including an icon with the “maskable” purpose is essential on Android to ensure that adaptive launcher icons do not render with an awkward white border.

What is the difference between standalone, fullscreen, and minimal-ui display modes?

The “standalone” display mode opens the app in its own dedicated window without standard browser navigation bars or URL bars, giving it a native application appearance. “fullscreen” removes all operating system UI chrome, ideal for games or immersive media. “minimal-ui” provides a standalone window with minimal navigation controls such as Back and Reload.

Why is the manifest 'id' property recommended?

The ‘id’ member serves as the canonical unique identifier for your PWA across the operating system. Without an explicit id, browsers default to using start_url. Setting an explicit id ensures that future updates to your start_url or domain routing do not treat the update as a completely different application installation.

Does iOS Safari fully support manifest.json?

While iOS Safari supports the core properties of manifest.json starting from iOS 11.3+, it still relies heavily on legacy <meta> tags in your HTML <head> for features like apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style, and apple-touch-icon. Our generator automatically provides these companion meta tags.

What is the purpose of the 'shortcuts' array in manifest.json?

The ‘shortcuts’ array enables deep links accessible when a user long-presses or right-clicks the installed app icon on Android, Windows, or macOS taskbars and home screens. It lets users jump directly to high-priority tasks or specific routes within your application.

Found this tool helpful? Share it with others!

Share on Facebook

Share on X

Share on LinkedIn

Copy URL