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

16x16

32x32

96x96

192x192

Rendered at real pixel dimensions. 512x512 is left off the strip: it's a splash-screen asset, not something a browser ever draws in its chrome.

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

Note: That's full coverage across platforms and contexts without having to manually configure each icon size or maintain the manifest file yourself.

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.