Web Manifest Configuration - Complete PWA Setup Guide (2025)
Learn how to create a web manifest (manifest.json) for Progressive Web Apps. Configure icons, theme colors, and display settings for Android and desktop Chrome.
Want your website to work like a native app when users add it to their home screen? You need a web manifest—a simple JSON file that tells browsers how your site should behave as a Progressive Web App (PWA). Without it, your site can be bookmarked, but it won't appear in the app drawer or launch in standalone mode.
This tutorial shows you how to create a manifest.json file, configure app icons and display settings, and link it to your HTML. Takes about 10 minutes to set up, and works on Android, Windows, and desktop Chrome.
What is a web manifest?
A web manifest is a JSON file (usually called manifest.json or manifest.webmanifest) that sits in your site's root directory. It contains metadata like your app's name, theme color, and icon paths. When a user adds your site to their home screen on Android or desktop Chrome, the browser reads this file to display the correct icon and launch your app in standalone mode (without the browser UI).
Think of it as the "app store listing" for your website. It tells the browser: "Here's my app name, here's my icon, here's what color to use for the splash screen, and here's how I want to be displayed." Without a manifest, your site will just be a regular bookmark—it won't feel like a real app.
Step 1: Create your manifest.json file
Create a file named manifest.json (or manifest.webmanifest) in your site's root directory (the same folder as your index.html). The file must be served over HTTPS—browsers won't load manifests from HTTP sites for security reasons.
Start with this minimal structure: {"name": "My App", "short_name": "App", "start_url": "/", "display": "standalone", "background_color": "#ffffff", "theme_color": "#4285f4", "icons": [...]}. The name appears under the icon on the home screen (up to ~30 characters), while short_name is used when space is limited (like on the Android app drawer, ~12 characters).
{
"name": "My Site",
"short_name": "MySite",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#111827"
}Step 2: Add icons from your favicon package
The icons array is the most important part of your manifest—it lists different sizes of your app icon. You need at least two sizes: 192×192 (for the home screen) and 512×512 (for the splash screen). Each icon needs three properties: src (the file path), sizes (the dimensions), and type (the MIME type). Example: {"src": "/icon-192.png", "sizes": "192x192", "type": "image/png"}.
If you generated your favicon package with our Image Converter, you already have these PNG files. Just copy the 192×192 and 512×512 PNG files to your site's root directory (or an /icons/ folder) and reference them in the manifest. Make sure the src paths match where you uploaded the files—if your icons are in /icons/, use "src": "/icons/icon-192.png".
For Android adaptive icons (icons with a background and foreground layer), add a second icon entry with "purpose": "maskable". Example: {"src": "/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable"}. Make sure your maskable icon has safe padding (at least 10% on all sides) so it doesn't get cropped on different devices. Our Image Converter can generate maskable icons automatically.
Step 3: Link the manifest in your HTML
Add this line to your HTML <head> section: <link rel="manifest" href="/manifest.json">. The browser will fetch the file when the page loads and use it when the user installs your app. Make sure the href path is correct—if your manifest is in a subdirectory, use the full path like href="/assets/manifest.json".
For static HTML sites, add the tag to your shared layout template so it's included on every page. For Next.js, you can either serve a static manifest.json from the public/ folder or create a dynamic manifest using app/manifest.ts (Next.js 13+). For WordPress, add the tag to your theme's header.php file or use a plugin like "PWA for WP".
Important: Your web server must serve manifest.json with the correct MIME type: application/manifest+json. Most servers do this automatically, but if your manifest isn't working, check the Network tab in DevTools—if the Content-Type header is wrong (like text/plain), you'll need to configure your server. For Apache, add this to .htaccess: AddType application/manifest+json .json. For Nginx, it's usually configured by default.
Step 4: Test your manifest in browsers
Open your site in Chrome or Edge (Chromium-based browsers), press F12 to open DevTools, and go to the Application tab. Click "Manifest" in the sidebar. You'll see a preview of your app icon, name, and all the manifest properties. Any errors (like missing icons or invalid JSON) will appear here. If you don't see the Manifest section, check the Console for errors—your manifest might not be loading.
Verify that the manifest loads without errors, the icons appear with the correct sizes (192×192 and 512×512), and the colors match your design. If the icons are missing or show broken image placeholders, the src paths are wrong—check that the file paths in your manifest match where you uploaded the icon files.
Test the install experience: on Android, open your site in Chrome, tap the three-dot menu, and choose "Add to Home screen". Your app icon should appear on the home screen, and tapping it should launch your site in standalone mode (no browser UI). On desktop Chrome, you'll see an install icon in the address bar—click it to install your app. If the install option doesn't appear, check that your site is served over HTTPS and has a valid manifest.
Manifest configured?
Once your manifest is working, test it on a real Android device to make sure the install experience feels right. If you run into issues, check our Troubleshooting tutorial for common manifest problems. Don't forget to add Apple Touch Icon support for iOS users—iOS Safari doesn't use manifest.json.