Add a website to your iphone's home screen

I had an article about how to pin a Web site to the Start menu in Windows, and you can customize icons, colors, and windows push notifications, but Apple has a similar function by adding the link tag to the Head section of the page. In Safari we can easily add a website to the iphone's home screen to make it look like a normal app.

To do this, simply drop a picture named "apple-touch-icon.png" in your site's root directory, just like add Favicon (the icon named "Favicon.ico" is placed in the root of the site, The browser will automatically load and display the website's icon).

If you need precise control, add the following code:

1. In the head section of the Web page, add the following code, where the HREF attribute value is the path to the picture.

<rel= "Apple-touch-icon"  href= "/custom_icon.png"/> 

2. To meet the different resolution of the device display, you can add three different resolutions of the picture: 72 x 57 pixels for the first three generations of iphone and ipod touch,72 x pixels for ipad,114 x 114 pixels for use with retina Display of iPhone4 and ipod Touch and other follow-on products. Control by sizes Property:

<Linkrel= "Apple-touch-icon"href= "Touch-icon-iphone.png" /><Linkrel= "Apple-touch-icon"Sizes= "72x72"href= "Touch-icon-ipad.png" /><Linkrel= "Apple-touch-icon"Sizes= "114x114"href= "Touch-icon-iphone4.png" />

3. Also, avoid adding a highlight effect to iOS by modifying the value of the Rel attribute to "apple-touch-icon-precomposed".

Add a website to your iphone's home screen