The easy method
The easiest way to add a single icon that suits both types of iPhone screens (standard resolution and Retina Display) and iPad screens is to create a single PNG image with the dimensions 150 x 150 pixels. The filename for the PNG image must be:
You must then upload your new file to the root directory of your website, which is where Safari will look for it when adding the icon to the home screen. e.g. http://www.cellcode.co.uk/apple-touch-icon.png.
After you have uploaded the new icon image, you can then use the instructions earlier in the post to ensure it works properly when adding the icon to your home screen. Notice that by default iOS automatically resizes the icon, applies shimmer and gloss effects to it and then rounds the edges to match the standard icon shape, size and style.
Using the style that suits your icon
You may have noticed that the icon I have used doesn’t look so great with the standard shimmer and gloss effects applied on the home screen – it interferes with the design of the logo. Luckily, Apple understands that there’s a need for icons without the effects applied and they offer us the ability to show the icon as-is by using the following filename for the PNG image in your website’s root directory instead:
Getting the icon exactly as you want it and sizing it correctly for different iOS screen resolutions
If you prefer to have the icon fully rendered exactly as you want it to look for each of the three supported iOS screen resolutions, you’ll need to use Adobe Photoshop or an equivalent package to create the icons for the right sizes. You can download a good Photoshop template to help you make your icons match the required shapes and sizes. When you are happy with the way each icon looks, you’ll need to export the icons with the following filenames and place them in the root directory of your website:
iPhone standard icon (57 x 57 pixels) apple-touch-icon-57×57-precomposed.png
iPhone Retina Display icon (114 x 114 pixels) apple-touch-icon-114×114-precomposed.png
iPad icon (72 x 72 pixels) apple-touch-icon-72×72-precomposed.png
You can keep the default icon apple-touch-icon.png that you created earlier in the root directory of your website alongside these new resolution-specific icons. Usually, third party apps will use the default icon and Safari will automatically look for the icon filename that should suit the device best. Safari will only use the default icon or an incorrectly sized icon if it can’t find a file that best matches the screen resolution.
Having different icons for different pages
So far we have covered specifying icons for a whole website by placing the icon PNG files in the root directory of your website, but Apple also offers the ability to specify icons for individual pages with meta tags. Using this method, you are welcome to name the icon PNG files exactly as you wish because Safari will be looking for the value in the meta tag rather than the image in the root directory. For a single icon that suits all sizes, you should place the following meta tag after the <head> tag and before the </head> tag, where “my_icons/icon_filename.png” is the path location of the icon PNG file that you have created:
<link rel="apple-touch-icon" href="my_icons/my_icon_file_path.png" />
If you have created resolution-specific icons, you should place the following meta tags after the <head> tag and before the </head> tag, replacing the href values with the actual location paths of the icons on your website:
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone-retina-display.png" />
Now you can control the icon used for the home screen depending on whichever page the user wanted to bookmark. It is recommended that you keep the default icon apple-touch-icon.png in the root directory of your website to ensure there is always an icon available if the meta tags are not present on individual pages.