Adding bookmark icon on home screen IPhone, IPad, IPod Touch and Android
When someone adds your website to home screen as bookmark in iphone, ipad, ipod touch or android,it will take a screenshot of webpage and make the icon look ugly.
we can add custom icon to make it look good.Take a look how bad it is before adding custom icon as shown in the following image
Create a PNG image of your website icon in square shape with 57×57 pixel. if the image is not in square shape iphone will scale it.
- Shiny images
- Glossy images
- Alpha Transparency images
HTML code to set iphone bookmark icon
For Glossy Icon,link image with relation apple-touch-icon.
<link rel="apple-touch-icon" href="http://devw3.com/devw3-icon/57x57.png" />
For Non Glossy Icon,link image with relation apple-touch-icon-precomposed.
<link rel="apple-touch-icon-precomposed" href="http://devw3.com/devw3-icon/57x57.png" />
we can set different icon sizes for IPhone 4(High and Low resolution display) and IPhone 3(Non-Retina Display)
- IPhone 3 and IPod Touch with low resolution and Non-Retina display – 57 x 57 pixels
- IPhone 4 – 114 x 114 pixels
- IPad – 72 x 72 pixels
Best Practice is to add 114×114 so that iphone scale the icon-or-
Add all three icons so that IPhone can choose the best
<link rel="apple-touch-icon-precomposed" href="http://devw3.com/devw3-icon/57x57.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://devw3.com/devw3-icon/72x72.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://devw3.com/devw3-icon/114x114.png">
without HTML code
If you don’t want to write html code for bookmark icon, name the image as apple-touch-icon.png.For Non Glossy Icon change image name to apple-touch-icon-precomposed.png.Place the image(114×114 recommended) in your root directory it can be public_html then iphone will do the rest.