Next-Gen App & Browser Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

How to Make a Website an App on iPhone

Q: Does Add to Home Screen create a real app?

Not a native app. Add to Home Screen creates a web clip, a shortcut that opens the site in a full-screen Safari view without the address bar. It looks and launches like an app but runs the live website, so it is not downloadable from the App Store and cannot use most native device APIs.

Q: How do I publish a website as an app on the App Store?

Wrap your site in a native WKWebView container using Xcode, or use a no-code wrapper service, then submit the build to App Store Connect. Apple rejects apps that are only a thin web wrapper with no added value, so include native features like push notifications, offline mode, or device integrations.

Q: Why does my web app icon look wrong on iPhone?

iOS uses the apple-touch-icon link tag for Home Screen icons, not the favicon. Add a 180x180 PNG referenced by a link rel='apple-touch-icon' tag in the page head. Without it, iOS falls back to a low-resolution screenshot of the page, which usually looks blurry or cropped.

Q: What is the Open as Web App toggle when adding to Home Screen?

Introduced in iOS 16.4, the Open as Web App toggle appears in the Add to Home Screen sheet. Left on, the icon launches the site full screen in its own window and can receive web notifications. Turned off, the icon simply opens the page in a normal Safari tab instead of a standalone app view.

The quickest way to make a website an app on iPhone is to add it to your Home Screen from Safari's Share menu, which creates a full-screen, app-like icon in seconds. For a richer, installable experience, build a Progressive Web App (PWA) with a manifest and service worker, and for true App Store distribution, wrap the site in a native WebView container. This guide walks through all three methods, their limits on iOS, and how to test the result across real iPhones.

Why Turn a Website Into an iPhone App

There are millions of apps on the App Store, but plenty of excellent sites never ship a native app. Turning a website into something app-like on iPhone bridges that gap and gives users a faster, more focused way in. The main reasons teams and users do it are:

One-tap access — a Home Screen icon launches the site directly, skipping the browser, the address bar, and the need to remember a URL.
App-like feel — the site opens full screen in a standalone view, so it looks and behaves like a real app rather than a tab.
No App Store friction — for the Home Screen and PWA routes there is no download, no review queue, and no install size, so users get value instantly.
Lower build cost — you reuse your existing responsive website instead of writing and maintaining a separate Swift codebase.
Offline and re-engagement potential — a PWA can cache assets for offline use and, on newer iOS, support web push to bring users back.

Which route you pick depends on your goal: instant convenience, an installable web experience, or a listing on the App Store. The three methods below cover each, in increasing order of effort.

Method 1 - Add to Home Screen via Safari

For most people, this is the fastest and best option. It requires no code, takes under a minute, and works for any website. iOS creates a "web clip" — a Home Screen icon that opens the site full screen. Note this only works in Safari; Chrome and other iOS browsers do not offer Add to Home Screen because they all run on Apple's WebKit but lack the menu hook.

Open Safari on your iPhone and navigate to the exact page you want to turn into an app.
Tap the Share button (the square with an upward arrow) in the bottom toolbar.
Scroll the share sheet and select Add to Home Screen.
On iOS 16.4 and later, leave the Open as Web App toggle on — this launches the site full screen in its own window and lets it receive web notifications; turn it off if you would rather the icon just open the page in a Safari tab.
Edit the name for the shortcut — keep it short so it is not truncated under the icon — then confirm the icon iOS suggests.
Tap Add in the top-right corner. The icon appears on your Home Screen instantly.
Tap the new icon to launch the site in a standalone, full-screen view with no Safari chrome around it.

To control how the icon and full-screen view look, add a few tags to your page's <head>. iOS reads apple-touch-icon for the icon and apple-mobile-web-app-capable to launch in standalone mode:

<!-- 180x180 PNG used as the Home Screen icon -->
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">

<!-- Launch full screen, no Safari address bar -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status bar style: default, black, or black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- Title shown under the Home Screen icon -->
<meta name="apple-mobile-web-app-title" content="My Web App">

Prefer a fully chrome-free icon? Apple's built-in Shortcuts app can also build a web clip. Add a shortcut that runs Open URLs against your site, or use a ready-made "Make App from Web URL" shortcut, then choose Add to Home Screen from the shortcut's share sheet. This opens the site in its own full-screen WebView with no address bar or bottom toolbar — handy for kiosk-style or single-page sites.

Method 2 - Build a Progressive Web App (PWA)

A Progressive Web App is a website enhanced with a web app manifest and a service worker so it can be installed to the Home Screen, launch full screen, and serve cached content offline. iOS Safari has supported the core PWA pieces since iOS 11.3, so the same install works for iPhone users. The two building blocks are below.

1. The web app manifest. A small JSON file, linked from your page head, that tells iOS the app name, icons, start URL, and display mode:

{
  "name": "My Web App",
  "short_name": "WebApp",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0d1117",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Link it from every page and keep the Apple-specific tags from Method 1 as a fallback, since iOS still leans on apple-touch-icon for the install icon:

<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">

2. The service worker. A script that runs in the background, intercepts network requests, and caches assets so the app loads offline or on flaky networks. Register it once your page loads:

// Register the service worker on supported browsers
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(reg => console.log('SW registered:', reg.scope))
      .catch(err => console.error('SW failed:', err));
  });
}

On iOS there is an important difference from Android: Safari does not show an automatic "Install" prompt, and the beforeinstallprompt event is not supported. iPhone users still install your PWA through the same Share > Add to Home Screen flow as Method 1, so add a short in-app hint telling Safari users how to install. Once installed, the PWA launches in standalone mode and uses your service-worker cache.

Method 3 - Wrap as a Native App with WebView / No-Code

If you specifically need an App Store listing, neither the Home Screen shortcut nor a PWA qualifies — Apple distributes only native binaries. The solution is to wrap your website in a thin native container that hosts a WKWebView (the modern iOS web view) pointing at your site, then submit that build to the App Store. You have two practical paths:

Code a WKWebView wrapper in Xcode — create a Swift app whose root view controller loads your URL in a WKWebView. This gives you full control to add native push notifications, offline storage, biometric login, or deep links.
Use a no-code wrapper service — tools such as Capacitor, Median (formerly GoNative), or PWABuilder generate an iOS project from your URL and bolt on common native features without writing Swift.

A minimal WKWebView root controller looks like this:

import UIKit
import WebKit

class ViewController: UIViewController {
    var webView: WKWebView!

    override func loadView() {
        webView = WKWebView()
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        let url = URL(string: "https://your-website.com")!
        webView.load(URLRequest(url: url))
        webView.allowsBackForwardNavigationGestures = true
    }
}

Be aware of Apple's App Store Review Guideline 4.2: an app that is only a repackaged website with no added native value is routinely rejected. Add real native capability — push notifications, offline mode, camera or location integration, or a richer navigation shell — so the wrapper earns its place on the store.

Limitations of Each Approach

Each method trades effort for capability. iOS in particular places real ceilings on what a web-based app can do, so match the route to your needs:

Add to Home Screen: Effort — minutes, no code. App Store — no. Key iOS limits — Safari only; no offline; no native APIs.
Progressive Web App: Effort — moderate dev work. App Store — no. Key iOS limits — no auto-install prompt; limited storage; push only on iOS 16.4+ when installed.
Native WebView wrapper: Effort — high; needs Xcode/Mac. App Store — yes. Key iOS limits — App Review 4.2; yearly Apple Developer fee; rebuild to update shell.

The big iOS-specific PWA constraints worth remembering: there is no automatic install banner, web push works only for PWAs that the user has explicitly added to the Home Screen on iOS 16.4 or later, and Safari may evict cached data and IndexedDB storage if the app is unused for several days. Design for these limits rather than assuming Android-level PWA support.

Common Mistakes and Troubleshooting

Missing Add to Home Screen option — you are likely in Chrome or a third-party browser. The option only exists in Safari on iOS. Open the page in Safari and retry.
Blurry or cropped icon — iOS used a page screenshot because no apple-touch-icon was found. Add a crisp 180x180 PNG via <link rel="apple-touch-icon">.
App opens in Safari with the address bar — the manifest display is not standalone, or the legacy apple-mobile-web-app-capable meta is missing. Add both.
Service worker not caching on iPhone — your site is not served over HTTPS, or the service-worker scope is wrong. Service workers require a secure origin and a scope that covers the pages you cache.
App Store rejection — a bare WebView wrapper falls foul of Guideline 4.2. Add native features that a plain website cannot provide before resubmitting.

Conclusion

Making a website an app on iPhone comes down to how much you need. For instant, personal access, Add to Home Screen via Safari is the recommended path — no code, under a minute, every iPhone. For an installable, offline-capable experience, build a Progressive Web App with a manifest and service worker, keeping iOS limits in mind. And when you genuinely need an App Store listing, wrap the site in a native WKWebView and add real native value. Whichever route you choose, validate it on real iPhones across iOS versions before you ship.

Frequently Asked Questions

Can you turn any website into an app on iPhone?

Yes. Any website can be added to the iPhone Home Screen through Safari's Share menu, creating a tappable, app-like icon. For a richer, installable experience the site must add a web app manifest to qualify as a PWA, but the basic Home Screen shortcut works for every site.

Does Add to Home Screen create a real app?

Not a native app. It creates a web clip — a shortcut that opens the site full screen without the address bar. It launches like an app but runs the live website, so it is not downloadable from the App Store and cannot use most native device APIs.

Do Progressive Web Apps work on iPhone?

Yes, iOS Safari supports PWAs with a manifest, service workers, offline caching, and full-screen launch since iOS 11.3. Apple does limit features such as push notifications (iOS 16.4+ for installed PWAs only), background sync, and storage, so plan around these constraints.

How do I publish a website as an app on the App Store?

Wrap your site in a native WKWebView container using Xcode or a no-code wrapper, then submit the build to App Store Connect. Apple rejects apps that are only a thin web wrapper, so include native features such as push notifications, offline mode, or device integrations.

Why does my web app icon look wrong on iPhone?

iOS uses the apple-touch-icon link tag for Home Screen icons, not the favicon. Add a 180x180 PNG referenced by a <link rel="apple-touch-icon"> tag in the page head. Without it, iOS falls back to a low-resolution screenshot of the page.

What is the Open as Web App toggle when adding to Home Screen?

Introduced in iOS 16.4, this toggle appears in the Add to Home Screen sheet. Left on, the icon launches the site full screen in its own window and can receive web notifications. Turned off, the icon simply opens the page in a normal Safari tab instead of a standalone app view.

Can a website app on iPhone send notifications?

Yes, but only for sites added to the Home Screen as web apps on iOS 16.4 or later. Once installed and granted permission, the web app can send push notifications like a native app. A site opened in a normal Safari tab, or the older non-standalone shortcut, cannot deliver web push on iPhone.