Add to home screen is the mobile browser feature that places an icon for a website on a phone’s home screen, so the user can open the site with one tap, like an installed app. In the mobile web, it is the entry point for progressive web apps: when a site provides a valid web app manifest, the icon opens it in its own window without browser controls.
The feature exists on both major mobile platforms, but its behavior differs. On Android, Chromium-based browsers can turn the shortcut into a fully installed web app; on iOS, Safari and other browsers create a home screen web app with a more limited, though steadily growing, set of capabilities.
How add to home screen works
When a user chooses add to home screen, the browser reads the page’s web app manifest, a JSON file linked from the HTML head. The manifest supplies the name, icons, start URL, theme color and display mode. If no manifest exists, the browser falls back to the page title and an icon or screenshot, and the result is a simple bookmark shortcut.
The display mode decides how the site opens. The table explains the available values.
| Display mode | What the user sees | Typical use |
|---|---|---|
| standalone | Own window, no address bar | Most progressive web apps |
| fullscreen | Entire screen, no system bars | Games and immersive media |
| minimal-ui | Own window with minimal navigation controls | Content apps needing back and reload |
| browser | Normal browser tab | Plain shortcut behavior |
On Android, Chrome packages an installable site as a WebAPK, a small generated Android package that registers the app with the launcher, app settings and notification channels. This is why an installed web app on Android appears in the app drawer like a native app.
Install requirements and platform differences
Browsers apply installability criteria before they treat a site as an app rather than a shortcut. The criteria vary by browser and change over time, but a common baseline applies to most of them.
- HTTPS delivery, or localhost during development.
- A web app manifest with a name or short name, a start URL and a display mode other than browser.
- Icons of suitable sizes, typically 192×192 and 512×512 pixels, including a maskable variant for Android.
- A service worker for offline support, which some browsers still expect and all reward with better behavior.
| Aspect | Android (Chromium browsers) | iOS and iPadOS |
|---|---|---|
| How users start it | Install prompt, banner or browser menu | Share menu, then add to home screen |
| Custom install button | Possible via beforeinstallprompt event | Not available, instructions only |
| Resulting app | WebAPK in the app drawer | Home screen web app |
| Web push notifications | Supported | Supported for home screen web apps since iOS 16.4 |
| Storage isolation | Shared with the browser | Separate from the browser storage |
The storage separation on iOS is a frequent surprise: a user who is signed in to a site in Safari must usually sign in again in the home screen web app, because cookies and local storage are not shared between them.
Add to home screen compared with related concepts
Several terms in the mobile web describe overlapping steps. Add to home screen is the user-facing action; the others describe what the resulting app can do.
| Concept | Focus | Relationship to add to home screen |
|---|---|---|
| PWA installation | Full install flow and criteria | Add to home screen is its visible result |
| Mobile web push | Notifications from a web app | On iOS requires a home screen web app |
| Offline web | Service worker caching | Makes the home screen app usable offline |
| Bookmark | Saved link in the browser | No standalone window or app features |
| Native app | Store-distributed binary | Deeper device access, store review required |
Encouraging installation responsibly
Users rarely discover the add to home screen option on their own, so sites usually promote it. The most effective approach is to ask at a moment of demonstrated value, for example after a second visit or a completed order, rather than on the first page load.
| Situation | Recommended approach | Reason |
|---|---|---|
| Android, Chromium browser | Custom button that triggers the saved install prompt | One-tap installation in context |
| iOS Safari | Short visual instructions for the share menu | No programmatic prompt exists |
| Already installed | Hide all install promotion | Detect standalone display mode |
| First visit | No prompt | Users have not seen value yet |
Measuring how many sessions start in standalone display mode shows whether installation actually changes engagement, which is a better success signal than the number of prompts shown.
Limitations and common mistakes
Home screen web apps still have narrower device access than native apps, particularly on iOS, where some hardware APIs remain unavailable in the browser engine. Platform policy can also shift; teams should verify current behavior on recent operating system versions before relying on a capability.
Frequent technical mistakes include a start URL outside the manifest scope, which opens the browser instead of the app, icons without safe padding that are cropped into circles, and missing offline handling, which leaves users with a browser error page when they open the icon without a connection.
In plain words
Add to home screen puts a website on a phone’s home screen as an icon, right next to the regular apps. One tap opens the site, without typing an address or searching.
If the website is built for it, the icon opens the site in its own window, without the browser’s address bar. It then looks and feels much like a normal app, even though it was never downloaded from an app store.
A real-world example
A city public transport operator wants riders to check departure times quickly but cannot justify maintaining two native apps. It turns its timetable website into a progressive web app with a manifest, a standalone display mode and a service worker that caches the timetables of each rider’s saved stops.
On Android, a small install button appears after the rider saves a second stop. On iPhones, the same moment shows a short illustrated hint pointing to the share menu. Riders who install the app see their saved departures even in underground stations without signal.
Within a few months, a growing share of timetable visits starts from the home screen icon, and these riders return more often than browser visitors. The operator achieves an app-like experience with one web codebase and no app store review cycle.