• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Save your mobile web app with an icon to the Home Screen – iPhone/iPod
 

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

on

  • 1,234 views

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 ...

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 full post download this file or visit the blog post link: http://jbkflex.wordpress.com/2012/04/17/save-your-mobile-web-app-with-an-icon-to-the-home-screen-iphoneipod/

Statistics

Views

Total Views
1,234
Views on SlideShare
1,234
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Save your mobile web app with an icon to the Home Screen – iPhone/iPod http://jbkflex.wordpress.com/2012/04/17/save-your-mobile-web-app-with-an-icon-to-BLOG POST LINK:the-home-screen-iphoneipod/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 youinstall 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. Alsoeach 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 cansave 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 themobile 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 sheetIt 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 ScreenBy 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 valuefor 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 bytapping on the icon then the browser directly loads the app. Saving with default iconTill 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 haveto 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. Thedimensions 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 toadd a new name to your app. Save with custom iconThen 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 showsthe home screen of my iPod with the icon, Icon added to home screenYou 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 ofyour page and specify the absolute or relative path to the custom icon in the hrefattribute. <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 57x 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 anicon 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 allnecessary 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 theSlideShare icon it opens up the site in the browser.