When I want a mobile app but I don’t want the hassle of an app store, I make a simple web page feel like a mobile app. Here’s how in just three steps:
First, I adjust the page styles so that it’s responsive, meaning that it works on a wide array of devices. Then I add a viewport for mobile users with the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width makes the page’s width match the devices screen width, so it doesn’t render a zoomed-out desktop view.
initial-scale=1 sets the default zoom level to 100%, so the page loads at a natural size without being scaled up or down.
Next I add an icon with the following two tags:
<link rel="icon" href="icon.png" type="image/png">
<link rel="apple-touch-icon" href="icon.png">
These set the icons that will be used for different browsers.
Android and other browsers will use the standard favicon but iOS requires the special apple-touch-icon tag. One benefit is that it allows you to style the icons to better match the system they’re installed on.
For iOS I add a meta tag that causes the web app to appear full screen:
<meta name="apple-mobile-web-app-capable" content="yes">
For Android I add a manifest file to accomplish the same thing:
<link rel="manifest" href="manifest.json">
Here’s an example of a basic manifest file:
Now anyone can tap “Add to Home Screen” in their browser, and my web page installs just like an app.
Written by Joel Dare on August 19, 2025.
JoelDare.com © Dare Companies Dotcom LLC