I added a feature to this site today that most visitors will never notice: a web app manifest. It’s a 500-byte JSON file that tells browsers “this website can be installed like an app.”
On Windows, Chrome and Edge users see an install icon in the address bar. Click it, and you get a desktop shortcut with a proper icon—no toolbar, no tabs, just the site. It’s surprisingly useful for sites you visit daily.
What It Actually Does
When you add a manifest, browsers treat your site as a Progressive Web App (PWA). The term is overloaded—it conjures images of offline-capable apps with push notifications—but at its simplest, a PWA is just a website that can be “installed.”
The manifest tells the browser:
- Name: What to call the shortcut
- Icons: What the shortcut looks like (multiple sizes for different contexts)
- Display mode: Whether to show browser UI or run standalone
- Theme color: What color to use for the title bar
That’s it. No service worker required. No offline capability. Just a shortcut with a nice icon.
The Experience Varies by Platform
This is where it gets interesting. Each browser handles installation differently:
Windows (Chrome and Edge): The smoothest experience. An install icon appears in the address bar. Click it, confirm, and you have a desktop shortcut. The site opens in its own window without browser tabs or URL bar.
Linux (Chrome): Works, but with an extra step. After installing, the downloaded icon won’t launch until you right-click it and select “Allow Launching.” A security measure, but not obvious to users.
Mac (Chrome): Chrome creates the app, but it lives in a Chrome Apps folder. You have to manually drag it to your desktop or dock. Most users won’t bother.
iOS (Safari): No prompt at all. Users must tap Share → “Add to Home Screen.” Apple has never implemented the install prompt that other browsers use. They’d rather you download a native app from the App Store.
Android (Chrome): Similar to Windows—a banner or menu option to “Add to Home Screen.” Works well.
How to Implement It
If you want to add this to your own site, you need two things:
1. A manifest file (usually site.webmanifest or manifest.json):
{
"name": "Your Site Name",
"short_name": "Short",
"description": "What your site does",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
2. A link in your HTML <head>:
<link rel="manifest" href="/site.webmanifest">
That’s the whole implementation. The icons are the most work—you need at least 192Ă—192 and 512Ă—512 versions. If you already have favicons and Apple touch icons, you’re probably covered.
Why Bother?
For most websites, this is a nice-to-have. But if you run a site that people check regularly—a dashboard, a news feed, a tool they use daily—the “install” option removes friction. No hunting through bookmarks. No typing URLs. Just click the icon.
It costs nothing to implement (no server changes, no dependencies) and doesn’t affect users who don’t want it. The manifest just sits there, quietly offering an option.
The web has had this capability for years, but it remains underused. Maybe because “Progressive Web App” sounds intimidating, or because the cross-platform experience is inconsistent. But for a static site? It’s ten minutes of work for a genuinely useful feature.