Websites · Glossary
What is a web app manifest?
A web app manifest is a small JSON file, linked from a site's pages, that tells the browser how the site should look and behave once installed: its name and short name, its icons, the address it opens at, its theme and background colours, and whether it opens in a full window without the browser's address bar.
The manifest is the identity card of an installable website. Without one, a browser has no name, icon or start address to put on the home screen, so it treats the site as an ordinary bookmark.
Indunil Asanka · Co-founder
4 min read · Published
| Member | What it sets | Example value |
|---|---|---|
| name | The full name shown in install dialogs and app lists | Ridgeline Climbing Gym |
| short_name | The label under the home screen icon | Ridgeline |
| icons | Images at several sizes, usually including 192 and 512 pixels | icon-192.png, icon-512.png |
| start_url | The address the installed site opens at | / |
| display | How much browser interface shows | standalone |
| theme_color | The colour of the title bar or status bar | #1f4d3a |
| background_color | The colour shown while the site loads | #f4f1ea |
What a manifest is
A web app manifest is a JSON document described by a W3C specification and supported in different degrees by every major browser. A page points to it with a link element in the head, conventionally named manifest.webmanifest or manifest.json. The browser reads it when deciding whether the site can be installed and again when it draws the installed version: which icon to show, what to call it, which page to open and how much of the browser's own interface to keep. The file has no effect on how the site looks in a normal browser tab.
How browsers use it
When a visitor installs the site, the browser copies the name, short name and an icon onto the home screen or app launcher. Opening the icon loads start_url in a window shaped by display: standalone hides the address bar so the site looks like an app, minimal-ui keeps a few controls, and browser opens a normal tab. While the first page loads, the window shows background_color, and the system bars take theme_color. The scope member limits which addresses stay inside the installed window, and links outside it open in the browser. Optional members add screenshots for richer install dialogs, shortcuts for long press menus and a description.
When it matters
A manifest matters as soon as you want customers to keep your site on their phone. For a cafe with order ahead, a gym with a timetable or a club with fixtures, the installed icon saves a search every time. The name and icon are the parts customers see daily, so they deserve the same care as a logo on a sign. If you have no plan to make the site installable, a manifest does little, although some browsers still use its theme colour for the address bar.
Common mistakes
Using a long name as short_name, so the label is cut off under the icon. Supplying one small icon, which the system blows up into a blurry square. Forgetting maskable icons, so Android crops the logo into a circle and cuts its edges. Setting start_url to a page that needs a login or a tracking parameter that breaks. Picking a theme colour that clashes with the site's header. Changing the manifest's name after people have installed the site and expecting their icons to update at once; browsers refresh installed details on their own schedule.
Where it shows up in OneCraft
When you ask for a OneCraft website to be installable, the pwa capability guide writes a manifest with the site's name, colours and SVG icons, adds an offline page and a service worker that caches only that page, and offers an install button that uses the browser's own prompt. It applies to websites; a phone app built in OneCraft is a separate Expo project whose name and icon live in its app.json, filled in when you download it as a zip.
Questions people ask
Is manifest.json the same as manifest.webmanifest?
They are the same kind of file. The specification suggests the .webmanifest extension with the application/manifest+json content type, but browsers read either name as long as the page links to it. What matters is that the link element points to the right address and the server returns valid JSON.
What icon sizes does a web app manifest need?
Supply at least a 192 by 192 and a 512 by 512 pixel icon, which cover home screens and splash screens on most devices. Add a maskable version with the logo inside the central safe area so Android can crop it into its own shape. An SVG icon can cover many sizes in browsers that accept it.
Why does my installed site still show the old icon?
Browsers cache installed details and refresh them on their own schedule, sometimes only after the visitor opens the installed site several times. Changing the file name of the icon helps the browser notice. Some systems only pick up a new icon after the visitor removes and reinstalls the site.
Does a manifest help search rankings?
Not directly. Search engines read page content, titles and links, not the manifest, to rank a site. A manifest improves the installed experience for returning customers, which may help how often they come back, but it is not a search signal and is no substitute for good page titles and descriptions.
Can a manifest make my site appear in app stores?
No. A manifest only describes how the browser installs your site from the web. App store listings need a native app or a store wrapper with its own developer account, review and fees. Some stores accept wrapped web apps, but that is a separate project with its own rules.
Make one with websites
The button opens the generator with this use case already described. Change the wording to match your own.
Create a website with OneCraftRelated questions
- What is a service worker?What is a service worker? A browser script that runs apart from the page, intercepts requests and caches files so a site loads fast and shows an offline page.
- What is a PWA?What is a PWA? A website that can be installed to a phone home screen and opened full screen like an app, with an icon and an offline page. How it works.
- What is a favicon?What is a favicon? The small icon beside your site name in browser tabs, bookmarks and search results. Where it appears, what sizes to make and common mistakes.
- What is robots.txt?What is robots.txt? The plain text file at a site's root that asks crawlers which paths not to fetch, with its directives, examples and limits.
Written and checked by the OneCraft team. Last checked .