How I Turn a Web Page Into a Mobile App

By Joel Dare - Written August 19, 2025

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:

Make the page responsive
Add an icon
Go full screen

Step 1. Make the page responsive

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.

Step 2. Add an icon

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.

Step 3. Go full screen

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:

Example Manifest File

Now anyone can tap “Add to Home Screen” in their browser, and my web page installs just like an app.