Adding bookmark icon on home screen IPhone, IPad, IPod Touch and Android

On 8 Mar, 2012 in HTML with Comments

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.

don’t use

  • 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="" />

For Non Glossy Icon,link image with relation apple-touch-icon-precomposed.

<link rel="apple-touch-icon-precomposed" href="" />

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


Add all three icons so that IPhone can choose the best

<link rel="apple-touch-icon-precomposed" href="">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="">

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.

Tags: , , , , , , ,


  1. Great tutorial.. helped me a lot while adding favicons and apple touch icons