PWA Manifest Generator

Turning a website into a Progressive Web App (PWA) starts with a correct `manifest.json` file. This generator handles all the technical fields for you. Define your app's name, start URL, theme colors, and display modes (standalone, fullscreen). It also helps you organize your app icons to ensure your logo looks crisp on every device, from Android homescreens to desktop taskbars.
Full Manifest Control Icon Management Shortcut Creation Display Settings
Quick Examples 
NAME: "name": "My PWA App"
DISPLAY: "display": "standalone"
ICONS: "sizes": "192x192", "type": "image/png"
Manifest Configuration
Invalid Manifest 0%
Loading validation...
Basic Information
Application name is required
0/12 characters
Short name is required and should be under 12 characters
Helps with app store listings and SEO
Display Settings
App-like experience without browser UI
Splash screen background color
Browser UI theme color
Navigation Settings
Usually "/" for root or "/app" for app entry point
Restricts navigation to specific URL patterns
Localization
Application Icons
Recommended sizes: 192x192, 512x512. Include size in filename (e.g., icon-192x192.png)

Helps app stores categorize your app
Right-click menu shortcuts for installed app
Link to native app versions
Suggest native app over PWA
Live Preview
{}
Your App Name
Short Name

App Content

Required Fields Fail
Icon Requirements Warning
Display Mode Check
Theme Colors Check
Generated manifest.webmanifest
Implementation Guide:
1. Add to HTML head:
<link rel="manifest" href="/manifest.webmanifest">
2. Add meta theme-color:
<meta name="theme-color" content="#0d6efd">
3. Add Service Worker for offline support:
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/sw.js');}</script>
PWA Best Practices & Guidelines

Required Sizes:
  • 192x192px (minimum for install prompt)
  • 512x512px (for splash screen)
  • 144x144px (Windows tiles)
  • 96x96px (desktop shortcuts)
Design Tips:
  • Use simple, recognizable designs
  • Ensure readability at small sizes
  • Include maskable versions for Android
  • Test on different backgrounds

Standalone (Recommended)

App looks and feels like a native app without browser UI

Best for: Most PWAs, productivity apps, games
Fullscreen

Takes up entire screen, hiding all browser UI

Best for: Games, immersive experiences, kiosks
Minimal-UI

Shows minimal browser controls (back/forward)

Best for: Content apps, reading applications

Theme Color:
  • Matches your app's header/navbar
  • Affects browser UI on mobile
  • Should contrast well with white text
  • Represents your brand identity
Background Color:
  • Used for splash screen
  • Shown while app loads
  • Should match app's main background
  • Ensures smooth loading transition

Minimum Requirements for Install Prompt:
Web App Manifest - Valid manifest.webmanifest file
Service Worker - Registered and active service worker
HTTPS - Served over secure connection (except localhost)
Icons - At least 192x192px and 512x512px icons
Display Mode - Set to standalone or fullscreen
User Engagement - User has interacted with the site

Chrome DevTools:
  • Application tab → Manifest
  • Lighthouse PWA audit
  • Console for manifest errors
  • Device simulation testing
Testing Tools:

Practical Applications & Use Cases

PWA Development

Make your web application installable on mobile and desktop devices.

  • Define app name and short_name
  • Set 'standalone' display
  • Configure theme colors
  • Upload app icons
Pro Tip: Always include a 192x192 and a 512x512 icon to meet Google Lighthouse PWA requirements.

Brand Consistency

Ensure your app looks branded even when loading.

  • Match background_color to splash screen
  • Set theme_color for browser bars
  • Define orientation lock
  • Configure scope
Pro Tip: The 'background_color' property defines the color of the splash screen shown while your app loads.

App Store Readiness

Prepare your PWA for submission to app stores and improved discoverability.

  • Add description and categories
  • Define screenshots
  • Set related applications
  • Validate JSON syntax
Pro Tip: A complete manifest file is a key signal for search engines to recognize your site as an application.

Industry-Specific Applications

software dev:

Mobile web apps, cross-platform development, MVP launches

ecommerce:

Mobile shopping experience, loyalty apps, store locators

media:

News readers, content aggregators, offline-first apps

Help & Related Tools

Everything you need to know

FAQ Frequently Asked Questions

What is a PWA manifest and why do I need one?
A PWA manifest is a JSON file that tells browsers how your web app should behave when installed on devices. It controls the app name, icons, colors, display mode, and other properties that make web apps feel native.
What manifest properties can I configure?
You can set app name, short name, description, start URL, display mode, orientation, theme colors, background colors, icons in multiple sizes, shortcuts, categories, and other PWA-specific properties.
How many icon sizes do I need for my PWA?
Provide multiple icon sizes (192x192, 512x512 minimum) for different device contexts. Include maskable icons for Android adaptive icons and consider additional sizes for various display densities and use cases.
Can I preview how my PWA will look when installed?
While the generator creates the manifest, you'll need to test the actual installation experience on various devices and browsers. The manifest controls the appearance, but real testing shows the user experience.
Is this sufficient to make my website a PWA?
The manifest is one required component, but complete PWAs also need service workers for offline functionality, HTTPS hosting, and responsive design. The manifest handles the "installable" aspect of PWAs.

TOOLS Similar in Developer

GraphQL Query Builder

Visually build and preview GraphQL queries with schema explo...

CSV/Excel to SQL Converter

Convert CSV and Excel files to optimized SQL insert statemen...

Browser Feature Detector

Detect and analyze all supported browser APIs, HTML5 feature...

LLM Response Diff Viewer

Compare two AI responses side-by-side with visual diff highl...

View All Developer Tools
Something not working? Idea for a great tool? Contact our team or browse all tools