Anticode Open builder

How to make a website installable as an app

A website becomes installable when it's served over HTTPS and links a web app manifest describing its name, icons and how it opens. Add an offline fallback and it behaves more like an app when the connection drops. Visitors then install it from the browser, and it opens from their home screen or dock in its own window.

Updated · By the Anticode team

What "installable" means

An installed website, usually called a progressive web app (PWA), gets an icon on the phone's home screen or the computer's dock and opens without the browser's address bar. It's still the same website, loaded from the same address, so updates appear the moment you publish. It doesn't go through an app store and doesn't get the device features a native app can use. For a booking site, a menu, a class timetable or a tool people use weekly, that's often all that's needed.

The parts, and what each does

HTTPS
Required. Browsers won't offer installation for a site served over plain HTTP, apart from localhost during development.
Web app manifest
A JSON file, linked from every page with <link rel="manifest" href="/manifest.webmanifest">. It gives the app's name and short_name, the start_url it opens at, the display mode (standalone hides the browser interface), and theme_color and background_color.
Icons
Listed in the manifest. Chromium-based browsers expect at least a 192 by 192 and a 512 by 512 pixel icon. A maskable icon, with its important content in the centre, fills Android's adaptive shapes without being cropped badly. iOS uses an apple-touch-icon.
Offline fallback
A service worker can show a friendly offline page when there's no connection, instead of the browser's error. MDN notes a service worker isn't required for installability itself, but without one the installed app feels broken offline.

MDN's guide to making PWAs installable lists the exact manifest members Chromium browsers check.

Doing it yourself, step by step

  1. Serve the site over HTTPS on its final address.
  2. Make the icons: a square 512 pixel original, exported at 192 and 512, plus a maskable version with generous padding and a 180 pixel apple-touch-icon.
  3. Write the manifest with name, short name (under about 12 characters so it isn't cut off under the icon), start URL, display mode, colours and the icon list.
  4. Link it from the <head> of every page, along with a theme-color meta tag.
  5. Add an offline page and a small service worker that serves it when a request fails.
  6. Test in Chrome DevTools: the Application panel shows the parsed manifest, any errors, and whether a service worker is registered.

How visitors install it

Where the install option lives (menus vary by browser version)
DeviceBrowserHow
AndroidChromeAn install prompt may appear; otherwise the menu offers Install app or Add to home screen
iPhone and iPadSafariShare button, then Add to Home Screen
Windows, macOS, ChromeOSChrome or EdgeAn install icon in the address bar, or the browser menu
MacSafariFile menu, Add to Dock (recent macOS versions)

Many people don't know websites can be installed. If installing helps your visitors, say so on the page with one line of instructions for iPhone and one for Android, near the place they'd want it, such as next to the timetable.

Common problems

  • No install option appears. Check the manifest loads without errors, both icon sizes exist, and the page is on HTTPS.
  • Blurry or cropped icon. Use a real 512 pixel source and a separate maskable icon with padding.
  • The app opens on the wrong page. Fix start_url; it should usually be /.
  • White flash on launch. Set background_color to match the page's background.
  • Old content after an update. An aggressive service worker cache can serve stale pages; keep caching to the offline fallback unless you know you need more.

Anticode sites are installable already

Every site published with Anticode has a manifest and icons and can be installed on phones and desktops, with an offline fallback. There's nothing to configure. The app's name and colours come from the published site, so a clear page title and your chosen theme carry through to the icon and splash. Published pages themselves still run with no scripts, so installability doesn't loosen the security checks the page passed.

If you want a listing in Apple's App Store or Google Play, that's a separate step, covered in how to turn a website into an app for the app store.

Limits

An installed website is still a website. It needs a connection for everything except the offline screen, it can't send push notifications from an Anticode site, and it won't appear in app store search. Anticode generates the icons from your site's look; if you need a specific logo as the icon, a native project from the app-store packaging is where you'd swap it in.

Questions people ask

Is a PWA the same as an app store app?

No. It's installed from the browser and runs the live website. App store apps are packaged, reviewed and installed from the store.

Do iPhones support installed websites?

Yes, through Safari's Add to Home Screen. Installation is manual; iOS doesn't show an automatic install prompt.

Will installing change my analytics?

Visits from the installed app still load your pages, so they're counted like any other visit.

Sources

  1. MDN: Making PWAs installable, checked
  2. MDN: Web app manifests, checked