What is manifest.json?
A simple guide to web application manifests and how they power progressive web apps.
Understanding the manifest
A web application manifest, defined in the W3C Web Application Manifest specification, is a JSON text file that provides information about a web application.
The most common use for a web application manifest is to provide information that the browser needs to install a progressive web app (PWA) on a device, such as the app's name and icon.
A web application manifest contains a single JSON object where the top-level keys are called members.
Why manifest.json matters
| Benefit | What it does |
|---|---|
| PWA installation | The manifest enables browsers to prompt users to install your web app on their device, making it feel like a native application. |
| Icon references | The manifest tells browsers which icon files to use for different contexts: home screens, splash screens, and app launchers. |
| App metadata | It provides essential information like your app's name, theme colors, display mode, and start URL for a consistent experience. |
The icon challenge
Creating a complete manifest.json requires generating and referencing icons in multiple sizes. Each size serves a specific purpose across different platforms and contexts.
What each size is for
| Size | Purpose |
|---|---|
| 192x192 | Standard Android home screen icons |
| 512x512 | High-resolution splash screens and Android |
| 96x96 | Desktop shortcuts and Google TV |
| 32x32 | Browser tabs and bookmarks |
| 16x16 | Address bar and legacy browser support |
The same sizes, at true scale
How Favicon Tools helps
Manually creating all the required icon sizes and maintaining a manifest.json file can be time-consuming and error-prone. Favicon Tools automates the process.
When you use Favicon Tools to generate your favicons, we automatically write a complete manifest.json that references all of the icon sizes you need:
What the generated manifest covers
| Icon group | Sizes | What it covers |
|---|---|---|
| Android icons | 192x192, 512x512 | Home screen shortcuts and splash screens |
| Standard favicons | 16x16, 32x32, 96x96 | Browser tabs and bookmarks |
| Apple touch icons | All required sizes | iOS devices |
| Windows tiles | Tile sizes | Microsoft Start Menu integration |
Example manifest.json
{
"name": "Favicon Tools",
"short_name": "Favicons",
"start_url": "/",
"display": "standalone",
"scope": "/",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/favicon-32x32.png",
"sizes": "32x32",
"type": "image/png"
},
{
"src": "/favicon-16x16.png",
"sizes": "16x16",
"type": "image/png"
}
]
}This manifest includes all the essential icon references needed for PWA installation and proper display across different platforms. Favicon Tools generates it automatically along with all the referenced icon files.
One-click generation
Upload your source image once, and Favicon Tools generates every icon size you need plus a complete manifest.json file, all in one downloadable package.
No need to manually resize images, create multiple files, or write JSON by hand. Everything is ready to drop into your project.
Always up to date
When you regenerate your favicons after a rebrand or design update, the manifest.json is updated with the correct icon references.
That keeps your manifest from drifting out of sync with your actual icon files, which is what produces broken references and missing icons.