Save your mobile web app with an icon to the Home Screen – iPhone/iPod

Sometimes you may want to save your mobile web app to the home screen of your iPhone/iPod with an icon. Normally for every app that you install iOS creates an icon with a glossy effect and rounded corners in the home screen, and then when you tap on the icon the app starts. Also each icon has a text below it that says the name of the app. For mobile web apps that run in the mobile browser we can do the same. We can save the app to the home screen and also add custom icon to it. In this post I will talk on how to do that.

For the demo I have chosen one of my apps (web application) and I will show you how to save it to the home screen. First launch the app in the mobile browser, I am talking of iPhone/iPod here so open your app in mobile safari. Then tap on the icon as shown in the image below,

Tap on the icon to open the action sheet

It will open up an action sheet with all the buttons as shown below. Tap on Add to Home Screen button,

Tap on Add to Home Screen

By default iOS will create an icon for this app by thumbnailing the current page and also applying rounded corners (10px) and a glossy effect. Type a name in the text box and then tap the Add button on the top right (if you provide a title to your web app then this will be the default value for the text box, but it will truncate it). This will add the app to the home screen. Next time when you launch the app from the home screen by tapping on the icon then the browser directly loads the app.

Saving with default icon

Till now we have seen how to save the app to the home screen with the default icon. Now let’s see how to add a custom icon. To do so you have to upload a .png image with a specific name apple-touch-icon.png to your web root. This will specify a single icon for the entire web site. The dimensions of the icon should be 57 x 57 pixels, you may not add the gloss effect or rounded corners to your icon as iOS will do it automatically.

After putting the icon in the web root if you try to save the app then the icon would appear in the Add window as shown below, edit the text box to add a new name to your app.

Save with custom icon

Then tap on the Add button (top right) to save the app. The icon would appear in the home screen after saving the app. The image below shows the home screen of my iPod with the icon,

Icon added to home screen

You may also want to provide a different icon for a specific page in your web site. For that you will have to add a <link> tag in the head section of your page and specify the absolute or relative path to the custom icon in the href attribute.

<link rel="apple-touch-icon" href="customIcon.png" />

where customIcon.png is a .png image which I want to display in the icon when this page is saved to the home screen. Again it should be of 57 x 57 pixels.

Saving a mobile web app to the home screen is particularly useful when you are building an offline mobile web app. You can save the app with an icon to the home screen. Next time when you tap on the icon the app loads in the browser and starts functioning as it is an offline app and all necessary files are already there in the web cache.

To give you an example I remember the SlideShare mobile web site. You can save it as an app in your phone. And then when you tap on the SlideShare icon it opens up the site in the browser.

5 thoughts on “Save your mobile web app with an icon to the Home Screen – iPhone/iPod

  1. Thanks for this – I followed your instructions and it worked perfectly.
    Tried to load a custom icon and it failed miserably!
    The site I am trying it on is a sub-directory of my main site, so I put the little snippet of code into the sub-directory, with the image in the same directory. I didn’t want to put it in the root, as that is my site and the icon refers to a particular client – all my clients’ sites are in the sub-directory so I can demo them.

    Anyway, do my client’s customers have to go through the same procedure to download the app on to their own phones/
    I assume they do – if I had to provide a download link (which is what my clents want to offer), then I would have to upload the app to the Apple store at $99. Is this right? I don’t mind doing that as I can pass the cost on to my client, I just want to confirm my thinking is correct.

    Cheers,

    Peter

    • Hi Peter,
      Right now as I can understand, you have developed an app that runs in the iPhone safari browser. So, to save the app in the home screen you have to follow the procedure. That’s how we can save a mobile web app into the home screen. After you save it looks like a native app but when you tap on the saved app, it will open up your browser and then load the app. This will be same for your client as well. He/She has to do the same.
      The other way is to use the Open Source Phonegap framework to convert your web app to a native app for it to be downloaded from the App Store. Phonegap will need some work and you might have to change some code. Because it is a framework and has its own set of API’s which you have to follow.
      Thanks.
      Joseph

  2. You’ve made some decent points there. I looked on the net for
    more info about the issue and found most individuals will go along with your views on
    this web site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s