Build an iOS Web App...Easy & FREE!

iOS web apps are actually websites on Safari that are saved to the home screen using native tools in iOS. This usually turns the website into a small icon that looks like a webpage and title you enter for easy access. Some websites have special icons called Favicons in their code to make the web app have a special icon like a true app. Some even go further and take the look of a web browser completely away, giving the appearance of a true app to the website.

Wouldn't it be cool to make your website one of these cool web apps? And wouldn't be better if you could do it for free? 
​

First things first

Here are the sites that you will need accounts:

• Weebly for the free website
• Canva for creating the web app icon

There are more ways to accomplish building this customized web app, but I will be using Weebly and building for iOS. 

​If you have never built a website using Weebly, check out this tutorial:

If you have never used Canva before, watch this tutorial:

Points to keep in mind...

• When testing the changes, you need to delete any web app from your site on your iOS device and also clear Website History & Data. If you do not, you will not see changes or updates in the existing web app.
• While Canva does provide a link to your created icon, it is a best practice to download the design and upload to the same website for which you are designing the icon.

​

Step 1

Create an icon in Canva. To do so, create a custom design and size it to 1024x1024px. For the best looking icon on an iOS web app, make the background image white. To make things easier later, change the name of the design to "apple-touch-icon" and download as a png file.
​

Step 2

Create a page in your Weebly website named "images". Make sure to select "Hide in Navigation".

Drag an image place holder to the "images" page and then upload your "apple-touch-icon.png". Fair warning, sometimes the upload process does not like hyphens in the upload. You can rename without the hyphens, you just may need to remember to potentially rename it in the code also. I would recommend trying it a few times or open in something like MacOS preview and export as the same name. This can sometimes remedy the issue and cut down on issues later. Once you click publish, open another web browser tab and go to your iamges web page. It should be your domain plus "/images". Here is what mine looks like: jamesmccrary.com/images. We will come back to this web page later.
​

Step 3

Access your Weebly website's settings for your header code under SEO (Search Engine Optimization). 

Paste in the following code in the header:

<link rel="apple-touch-icon" href="xxxx"/>
<link rel="apple-touch-icon" sizes="72x72" href="xxxx"/>
<link rel="apple-touch-icon" sizes="114x114" href="xxxx"/>

Replace xxxx with your image web location. To find the image location, go back to your web site images page you opened earlier. Right click the image and select "Copy image address" on a Mac or "Copy image URL" in Windows. Once you have completed this step, most iOS devices will scale to the appropriate sized icon image.
​

Step 4

Only completing through step 3 will not yield the best results. Two things occur if you stop there: 

1. Your users will get a default name when they save to home screen that is as long as the website. That doesn't look great as an icon title on an iOS home screen.
2. When your users click the icon on their home screen, it will open in Safari. Not exactly what a true app does.

So, here is the code to place below the icon code in the header (replace xxxx with whatever you want:

<meta name="apple-mobile-web-app-title" content="xxxx">
<meta name="apple-mobile-web-app-capable" content="yes">
​                     
While both lines fix the above two issues, another one will arise. Please move on to step 5 to see the problem and cure.
​

Step 5

Removing the web interface makes your web app look really clean and crisp. However, once the user navigates away from the home page to another page in your site, it will open in Safari. So here is the code you need to place under the other code in the header. No need to edit...just copy and paste:

<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>

Step 6...Test it Out!

Make sure to click save at the bottom right in the settings on Weebly, then click Publish in the top right. Grab your iOS device and go to your website on Safari. Add your website to your home screen.

Let me know your thoughts or if your think I am missing anything...I'm here to help.