PWA Education
February 23, 2026
4 min read
0 views
What is manifest.json? PWA Manifest File Explained Simply
Understand what manifest.json does in your PWA. Plain-English explanation for developers building Progressive Web Apps.
By Imagcon Team
Quick Answer:
## Quick Answer `manifest.json` is the app configuration file for a Progressive Web App. It tells browsers the app name, icons, theme colors, display mode, start URL, and install behavior.
## Quick Answer `manifest.json` is the app configuration file for a Progressive Web App. It tells browsers the app name, icons, theme colors, display mode, start URL, and install behavior. ## Introduction If you are newly diving into the massive world of Progressive Web Apps (PWAs), you will immediately encounter the mysterious `manifest.json` file. It is the absolute technical foundation of turning a standard regular website into a fully installable application. But if you aren't familiar with the web specification, it just looks like a random block of JSON code. In this comprehensive guide, we will break down exactly what the manifest file is, what it does, and why it is so fundamentally important to the modern web. ## The Role of the Manifest Think of the web app manifest as the official "ID card" or "passport" for your application. When a user visits your website, the browser quietly reads this ID card in the background. If the card contains all the correct, properly formatted information, the browser realizes, "Ah, this isn't just a website; this is a full-fledged app!" and promptly offers the user the option to install it natively to their home screen or desktop. The manifest essentially dictates everything about how the application *looks* and *behaves* outside of the traditional browser window context. ## Breaking Down Key Properties Let's look at the essential fields inside a standard, production-ready `manifest.json`: ### Name and Identity * `"name"`: The full, descriptive name of your application. This is used in install prompts and splash screens. * `"short_name"`: A shorter version of the name. This is crucial because it's what actually appears under the small icon on a user's cramped mobile device home screen. If it's too long, it gets cut off. ### Display and Navigation * `"start_url"`: What specific page should load when the user taps the app icon? Usually, this is simply `"/"` or a tracked URL like `"/?source=pwa"`. * `"display"`: This completely defines the app-like feel. * `"standalone"` is by far the most common; it completely hides the browser address bar and navigation buttons, making it look and feel exactly like a native app. * `"fullscreen"` takes up the entire device screen (often used for immersive web games). * `"browser"` opens it in a normal, standard browser tab. ### Theming and Colors * `"theme_color"`: Determines the base color of the operating system's status bar (on mobile) or window title bar (on desktop). * `"background_color"`: The color of the generated splash screen that shows for a split second while your app is initially loading. Matching this to your app's actual background prevents an ugly, blinding white flash. ### Icons Array This is arguably the most complex and critical section. The `"icons"` array provides the browser with the image files it needs to dynamically create the home screen shortcut, the taskbar icon, and the centered splash screen logo. You must specify the `src`, `sizes`, and `type` for every image. Modern manifests also strongly recommend including a `"purpose": "maskable"` property to flawlessly support Android's adaptive icons. ## How to Add It to Your App Creating the file on your server isn't enough; the browser fundamentally needs to know it exists. You must link to it securely in the `<head>` of your main HTML document: ```html <link rel="manifest" href="/manifest.json"> ``` ## Conclusion The `manifest.json` file is a profoundly simple but massively powerful text configuration file. Without it, your web project is forever confined to a standard browser tab. With it—and a set of properly formatted, high-quality icons—your project is instantly elevated to a true cross-platform Progressive Web App capable of living natively on any user's device.