PWA Manifest Generator
Build a valid manifest.json for your Progressive Web App.
Configure app metadata, icons, display mode, and theme colors — download or copy the ready-to-use JSON.
Frequently Asked Questions
What is a Web App Manifest?▼
A Web App Manifest is a JSON file that tells the browser about your Progressive Web App (PWA) — its name, icons, colors, and how it should behave when installed on a device. It enables features like 'Add to Home Screen', splash screens, and standalone display mode without browser UI.
What is the difference between 'name' and 'short_name'?▼
The 'name' field is the full app name shown in the install prompt and app store listings. The 'short_name' is used on the home screen icon label, the app switcher, and anywhere space is limited. Keep short_name to 12 characters or fewer to avoid truncation on most devices.
Which display mode should I use?▼
Use 'standalone' for most PWAs — it hides the browser UI and makes the app feel native. Use 'fullscreen' for games or immersive experiences. Use 'minimal-ui' to show a minimal browser toolbar (back/forward, refresh). Use 'browser' to run in a regular browser tab with no PWA chrome.
What icon sizes do I need?▼
At minimum, provide 192x192 (used by Android for the home screen icon) and 512x512 (used for install banners and splash screens). For broader coverage, add 144x144 (Android legacy) and 152x152 (iOS). Mark icons as 'maskable' so Android can apply the adaptive icon shape to them.
What does 'theme_color' control?▼
The theme_color sets the color of the browser toolbar and the task switcher tile on Android. It should match your app's primary brand color. The 'background_color' is shown on the splash screen while the app loads — it should match your app's initial background to avoid a flash of white.
How do I link the manifest in my HTML?▼
Add <link rel="manifest" href="/manifest.json"> in your <head>. Also add <meta name="theme-color" content="#your-color"> for iOS Safari, which does not support theme_color in the manifest. For iOS icons, add <link rel="apple-touch-icon" href="/icons/icon-192x192.png">.
Related Products
on GumroadDevPlaybook Interview Vault
210+ real technical interview questions with model answers, asked at Google, Meta, Amazon, Microsoft, Stripe, and Shopify. Covers Frontend (55), Backend (55), System Design (50), and DSA (50). Available in English and Traditional Chinese.
Buy on Gumroad →TypeScript Quick Reference Toolkit
5 practical reference files for TypeScript developers: cheatsheet, TS vs JS comparison, 20 utility types with real examples, tsconfig best practices template, and 15 common mistakes guide. Print it. Keep it on your desk.
Buy on Gumroad →Developer Interview Vault
210 technical interview questions with model answers, key points, and follow-up questions. Covers Frontend, Backend, System Design, and DSA — bilingual English + Traditional Chinese (ZH-TW). PWYW from $29.
Buy on Gumroad →You Might Also Need
Webhook Tester
Generate realistic webhook test payloads for GitHub, Stripe, Slack, and custom services. Get a curl command to send the payload to your local endpoint. Inspect headers, payload size, and content-type.
Open free tool →
WebSocket Tester
Connect to any WebSocket server, send and receive messages in real time, and inspect the message log with timestamps and byte sizes. Free online WebSocket client.
Open free tool →
WebP Converter
Convert PNG, JPG, or GIF images to WebP format in your browser. Drag-and-drop upload, quality slider, before/after file size comparison. No files sent to any server.
Open free tool →
More Free Tools
Related Articles
Capacitor 6: Web-to-Native Bridge for Modern Web Apps
Capacitor 6 lets you build native iOS and Android apps from web code. Learn about the plugin API, native bridge architecture, VS Code extension, and when to choose Capacitor over React Native or Flutter.
WebAssembly (WASM) for Web Developers: A Practical Guide (2026)
Learn WebAssembly (WASM) from scratch — what it is, when to use it, how to compile Rust and C++ to WASM, real-world use cases, and tools every web developer needs to know.
Rust and WebAssembly in 2026: From Zero to Production
Learn how to compile Rust code to WebAssembly for blazing-fast web applications. A complete guide covering wasm-pack, wasm-bindgen, web-sys, JavaScript integration, performance optimization, and real-world case studies from Figma, Google Earth, and more.
React Hooks in 2026: Advanced Patterns and Best Practices
Master React Hooks in 2026 with advanced patterns for state management, side effects, performance optimization, and building custom hooks that scale.
React Performance Optimization in 2026: Techniques for Fast Applications
Master React performance optimization with modern techniques including memoization, code splitting, virtualization, concurrent features, and profiling strategies.
Enjoying this tool? Get more like it.
Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.
Unlock AI-Powered Dev Tools
- ⚡ AI Code Review, Doc Generator & SQL Builder
- ⚡ All premium templates & early access
- ⚡ Member discounts on Gumroad products
$9/mo after trial · Cancel anytime
Want the full toolkit?
Get DevPlaybook Pro
Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.
MIT licensed · Instant download · No subscription
See what's included → Browse all deals →