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,
It will open up an action sheet with all the buttons as shown below. Tap on Add to Home Screen button,
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.
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.
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,
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.