app/manifest.json tells browsers how to treat the site when a visitor installs it as an app, on their phone’s home screen or as a desktop PWA. This page covers what each field controls and which icon files it expects.
{
"name": "Oolvay",
"short_name": "Oolvay",
"description": "The production-ready Next.js 16 scaffold",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "portrait"
0 / 2,000 characters
Replace name, short_name, and description with your own brand’s values. Everything else can typically stay as shipped unless your app has a reason to differ.
| Field | Controls |
|---|---|
name | The full app name shown during install prompts and in app switchers. |
short_name | A shorter name used where space is limited, under the home screen icon, for example. |
description | Shown in some install prompts and app store-style listings. |
start_url | The URL opened when the installed app launches. Almost always /. |
scope | Which URLs are considered part of the app. Links outside this scope open in a regular browser tab even from the installed app. |
display | standalone hides the browser’s address bar and tab strip, making the app feel native. Other values (fullscreen, minimal-ui, browser) trade this off differently. |
orientation | Locks the app to portrait or landscape on devices that support orientation locking. |
background_color | The color shown briefly while the app is loading, before any content paints. |
theme_color | The color used for the browser’s UI chrome around the app, the status bar on mobile, for example. |
lang and dir | The app’s primary language and text direction. |
categories | Hints used by some app stores and install surfaces to categorize the app. |
prefer_related_applications | When true, signals that a native app (listed separately) should be preferred over this web app. Oolvay ships this as false, since there is no separate native app. |
icons | The icon set used across install prompts, home screens, and app switchers. Covered below. |
screenshots | Optional preview images some install surfaces show before installing. Empty by default. |
Three icon files are referenced, all static files that live in /public. None of these are generated at build time, replacing the file is the entire update.
| File | Size | Purpose |
|---|---|---|
favicon.svg | 512×512 | The general-purpose icon, used for purpose: "any", meaning it can be freely cropped or padded by the OS. |
apple-icon.png | 180×180 | Sized specifically for iOS home screen icons. iOS does not accept SVG here, hence the separate PNG. |
icon-maskable.png | 512×512 | A version with safe padding around the logo, used for purpose: "maskable". Android can mask icons into a circle, squircle, or other shape, and a maskable icon ensures your logo is not clipped when that happens. |
Next.js treats certain image filenames placed directly in the app/ folder as metadata conventions and wires them up automatically, no <link> tag required. That is why apple-icon.png lives in app/ rather than public/: Next.js reads it and injects the correct <link rel="apple-touch-icon"> into every page's <head> at build time. The two icons that do live in public/, favicon.svg and icon-maskable.png, have no equivalent Next.js convention, so they are plain static files referenced manually from manifest.json.
A maskable icon needs extra padding compared to a normal icon. If your logo
fills the entire canvas edge to edge, an Android mask will crop into it. Keep
your logo within the inner 80 percent of the canvas for icon-maskable.png.
To replace the icon set, swap these three files in /public with your own, keeping the same filenames, dimensions, and formats. No code changes are required.
The manifest’s icons are separate from Open Graph images, the previews shown when a link is shared on social media or messaging apps. Those are not part of the manifest at all. A sitewide default lives at app/opengraph-image.png and is referenced from lib/metadata.ts. Some routes, blog posts and docs pages among them, generate their own per-route preview image instead of using the sitewide default.