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.

Build your next site in pure HTML and CSS

Want to build your next site in pure HTML and CSS? Join the free Five-Day Neat Starter Email Course and build a lean, production-ready page before Friday.

Email Me the Crash Course

Terms - Privacy