How To: Turn Any Website into a Full-Screen App on Your iPhone

Turn Any Website into a Full-Screen App on Your iPhone

Not all websites need a dedicated mobile app, which is why so many don't. Web apps are now designed to scale to different screen sizes, so mobile sites in your web browser are easy to navigate and utilize. Still, there's just something about an app on your iPhone's Home Screen that makes it feel more like an app from the App Store.

If you have an iPhone, you can bookmark a web app on your Home Screen from Safari or, as of iOS 16.4, most third-party browsers. Whatever browser you use, Add to Home Screen gives you a Home Screen icon that looks just like other app icons but is merely a shortcut to the webpage chosen.

Thankfully, many websites code in "standalone" or "fullscreen" display views in their manifest file. If that's the case, as with gadgethacks.com, these websites will open in their own WebView instances when added to your Home Screen via Add to Home Screen. Progressive web apps (PWAs) can even send you web push notifications on an iPhone as of iOS 16.4.

However, many sites do not provide an optimized standalone-like experience on mobile devices. Home Screen bookmarks for unconfigured web apps just open the sites in Safari and act like regular tabs. It's quicker than typing a URL or search term in Safari, but it's the same old Safari experience.

To make every site bookmark on your Home Screen look and feel like a standalone app, we can turn to Shortcuts. The shortcut we'll be using creates a WebClip device management profile you'll install on your iPhone. With the profile, whatever site you set will open the URL as a web app in full-screen view — in its own WebView instance — so there's no URL or search bar and no toolbar at the bottom.

It's technically still a bookmark but won't open as a tab in your regular Safari session. Best of all, it showcases the website in full screen, taking advantage of your entire display and eliminating the distractions that generally appear in Safari and other web browsers.

Required

  • iOS up to date: This shortcut is optimized for iOS 17 and iOS 18, but it will probably work on older iOS versions as well.
  • Shortcuts: Apple's app comes preinstalled on your iPhone, but if you've deleted it, you can reinstall it from the App Store.

Step 1: Install 'Make App from Web URL'

The "Make App from Web URL" shortcut creates a web clip of any site you want. Simply copy a URL to your clipboard, paste it into the shortcut, name your app, choose an icon, and add the web clip as an app to your Home Screen. Alternatively, can you share a webpage directly to the shortcut from your share sheet so you don't have to copy and paste the site's URL. Unlike a regular bookmark, the website won't open in Safari but will appear in its own full-screen window like regular native standalone apps.

You should automatically redirect to Shortcuts, but if you're not, tap "Get Shortcut." When the install page shows up in Shortcuts, you can tap the ellipsis (•••) to preview the workflow. Tap "Add Shortcut" to install it.

Is This Shortcut Safe? Short Answer ... Yes

Developers use configuration profiles to install and test apps that aren't ready or won't ever appear in the App Store on the devices of coworkers, employees, and/or testers. The "Make App from Web URL" shortcut uses this same method to turn your URL into a web clip without a browser, as described earlier.

The shortcut's main component is the WebClip payload XML file that configures and creates the profile you'll install to turn websites into apps. You can see the code below, much of which is self-explanatory.

You can customize the ConsentText string, which is the text that appears right before you install the profile. "Payload" can be a scary word in the digital world, but it's nothing to worry about here. We created generic PayloadUUIDs, and you can choose your own random set of numbers and letters if it makes you feel better.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>ConsentText</key>
<dict>
<key>default</key>
<string>Choose 'Install' and enter passcode if prompted.</string>
</dict>
 <key>PayloadContent</key>
 <array>
   <dict>
     <key>FullScreen</key>
     <true/>
     <key>Icon</key>
     <data>Icon</data>
     <key>IsRemovable</key>
     <true/>
     <key>Label</key>
     <string>Name</string>
     <key>PayloadDescription</key>
     <string>Turn any website into an app on your home screen</string>
     <key>PayloadDisplayName</key>
     <string>Web Clip (Name)</string>
     <key>PayloadIdentifier</key>
     <string>Name</string>
     <key>PayloadOrganization</key>
     <string>Me</string>
     <key>PayloadType</key>
     <string>com.apple.webClip.managed</string>
     <key>PayloadUUID</key>
     <string>1a1a1a1a-1a1a-1a1a-1a1a-1a1a1a1a1a1a</string>
     <key>PayloadVersion</key>
     <integer>1</integer>
     <key>Precomposed</key>
     <false/>
     <key>URL</key>
     <string>URL</string>
   </dict>
 </array>
 <key>PayloadDescription</key>
 <string>Turn any website into an app on your home screen</string>
 <key>PayloadDisplayName</key>
 <string>Name</string>
 <key>PayloadIdentifier</key>
 <string>Name</string>
 <key>PayloadOrganization</key>
 <string>Me</string>
 <key>PayloadRemovalDisallowed</key>
 <false/>
 <key>PayloadType</key>
 <string>Configuration</string>
 <key>PayloadUUID</key>
 <string>2b2b2b2b-2b2b-2b2b-2b2b-2b2b2b2b2b2b</string>
 <key>PayloadVersion</key>
 <integer>1</integer>
</dict>
</plist>

Step 2: Get an Image for the App Icon

While Safari can generate an app icon for websites via the "Add to Home Screen" action, the shortcut we're using here will not, so you'll need an image to use for the icon.

The shortcut allows you to choose any image in the Photos app, so you can download a photo from the web or use an existing one. A small square-sized image works best, but the shortcut will automatically crop any longer-shaped photos down. However, avoid huge images because the shortcut encodes them in base64, increasing the image size. So, it's best to use the website's favicon if you can.

Since I'll be creating an app for our website, I'm using the Gadget Hacks logo.

Step 3: Create the Configuration Profile

As I said before, you can create an app for a website from within the Shortcuts app. You'll just need the website URL in your iPhone's clipboard, or you can type it manually. Alternatively, you can share the website to the shortcut using the share sheet, which can be faster.

It's best to do this only for sites you often use that don't already have a native iOS app or an optimized interface for Add to Home Screen bookmarks.

Option 1: Start from Shortcuts

If you don't want to type the URL manually, open a browser, visit the website, and copy its URL to your clipboard. I'm creating an app for the gadgethacks.com website. However, our website natively supports standalone (full-screen) mode, so you don't need this shortcut to turn it into an app. Instead, just use "Add to Home Screen" from a browser like Safari. A site currently not supporting standalone (full-screen) mode is technologyadvice.com if you want a site to test.

Now, head over to the "Shortcuts" tab in the Shortcuts app and run the "Make App from Web URL" shortcut. When it asks for the website's name, enter it and hit "Done." Then, enter the website's URL and hit "Done."

Next, the shortcut might ask you for access to your Photos app. If so, grant it permission, then choose the image you want to upload as your app icon from the photo picker that appears.

Option 2: Start from Your Browser

Open your preferred browser to the website you want. I'm creating an app for the gadgethacks.com website. However, our website natively supports standalone (full-screen) mode, so you don't need this shortcut to turn it into an app. Instead, just use "Add to Home Screen" from a browser like Safari. A site currently not supporting standalone (full-screen) mode is technologyadvice.com if you want a site to test.

Tap the share icon to open your iPhone's share sheet, then select the "Make App from Web URL" shortcut from the list of actions.

Next, enter the website's name when prompted and hit "Done." The shortcut might ask you for access to your Photos app. If so, grant it permission, then choose the image you want to upload as your app icon from the photo picker that appears.

Step 4: Download the Configuration Profile

Once you select the image for your web app's icon, the shortcut will create the configuration profile and ask you to download it. Tap "Allow" then "Close."

Step 5: Install the Configuration Profile

The final step is to install the configuration profile you just downloaded. To do so, open Settings. You may see a "Profile Downloaded" option near the top of the main Settings view, which you can tap on to take you right there. If not, head to Settings » General » VPN & Device Management, then tap the name of your downloaded profile.

As we discussed earlier, the profile's description states that it contains a web clip. Tap on "Install" at the top right, then enter your passcode when prompted.

The next page will show a message from the developer, i.e., you, which simply lays out the last few steps you took. Hit "Next" to continue, tap "Install" in the top right, and then again at the bottom. Your profile is now installed.

Step 6: Open Your New Web Clip Self-Contained App

Your new web clip app will appear on your Home Screen. If you have iOS set to push new app installs to your App Library without touching the Home Screen, you'll still see this web clip app on your Home Screen since it's not a native app. However, you can still access the web clip from the App Library.

Find and tap on the newly created web clip app icon, and the website will open in its own full-screen WebView, with no navigation bars or other features obstructing your view.

However, if you tap around to go to other pages in the web clip, you'll see in-app navigation bars on the top and bottom to access reader view, request desktop sites, view website settings, share the website, open the page in Safari, and more, just like you would in other in-app web browsers. If you swipe up or down, the nav bars will disappear. This is a limitation of web clips for iOS, as any external links will be opened in a self-contained view.

Removing the Web Clip and Profile

Let's say you no longer want the web clip app and want to remove it. Simply deleting the app icon from your Home Screen is not enough because the configuration profile will continue to exist in your settings. To get rid of both the app and profile, go into Settings » General » VPN & Device Management.

Next, tap the profile and tap "Remove Profile." You'll be prompted to enter your passcode. Finally, tap "Remove" when it appears, and the profile and web clip will be deleted from your iPhone.

Just updated your iPhone to iOS 18? You'll find a ton of hot new features for some of your most-used Apple apps. Dive in and see for yourself:

Cover photo by Nelson Aguilar/Gadget Hacks; Screenshots by Justin Meyers/Gadget Hacks

13 Comments

Very useful. However, I can only create one profile on my iOS device. If you created another profile for another web app, it will replace the first one. How to have multiple profiles so you can have different web as an iOS app on your home screen?

You're right. The original shortcut seems just to replace each profile you install for different sites. You can get around this by replacing the two "Me" strings for PayloadIdentifier with the "Name" variable. That should do the trick. We've updated the guide with a link to an updated shortcut you can download. Thanks for bringing this up!

Hi,
Thank you! So glad with the solution! This becomes a very useful and neat tools!

I am seeing an error:
Bad Profile
This profile is corrupted and cannot be read

Is this something I am doing wrong on my end? Thanks!

I had the same error, but found that if I pasted in the WebClip payload XML myself, I needed to re-link the template variables before it would work. I edited the XML as Text in the Shortcuts app, deleted the places it said "Name", "URL", or "Base64 Encoded" (for the image), and replaced them with the corresponding Shortcuts variable from the accessory above the keyboard.

Thanks for this post, it's a great Shortcut!

Hi Justin,

Is there a way to create more than 1 shortcut at a time and possibly share the profiles to others? I'm wanting to create multiple App Clips but not download and install 13 profiles etc?

Thanks

Does this still work in iOS 15.1? Feels just the same as adding a page to the homescreen.

My problem is that adding to the home screen opens the page perfectly in full screen, but as soon as I click an internal link a Safari header is shown.

I've been using this method to create various apps for certain websites. This morning I noticed every time I open any of the apps made this way that my camera is being activated. The little green dot appears at the top of my phone when I open one of these apps and disappears when I close it. I'm guessing this isn't normal behaviour? Is it something I should be concerned about? I should note I've been using them without concern for about a year.

Yep works fine but would like to know how to share without rebuilding on each phone.

What if I want to do the reverse, turn a website that has been pre-configured by it's makers to only display a link from the home page as full screen without controls into a regular website with controls, so that I get the ability to turn reader mode on?

This doesn't seem to work anymore on iOS 17.1.2. Please make an update. Thanks!

Hi Justin! I wanted to thank you for this very useful feature. However, since the iOS 17.2 update it seems that the shortcut is no longer functional Unfortunately. could you do an update to make it work again? Thank you very much in advance ??

"It's quite simple and you can easily solve it yourself. Edit the Shortcut and move the picture selector upwards so that it's the first call. The Shortcut will then work again in iOS 17.x.

Success,
Patrick

Share Your Thoughts

  • Hot
  • Latest