How to add iphone icon to your website

Ever since the original iPhone, the mobile Safari browser has featured a nice little option to add an icon for the displayed website on the home screen. It’s a visual bookmark – when the user touches the icon, it will launch Safari and navigate to the website.

Follow these instructions to add a website bookmark to your home screen – it works on the iPhone, iPad and iPod touch, but the screenshots are taken from the iPhone:

1. In Safari, visit the website you want to store as a bookmark icon then touch the action button.

2. On the popup menu, touch the “Add to Home Screen” option.

3. Change the name to suit you. Don’t choose a name that’s too long because it needs to fit under a standard icon. Touch the Add button when you’re ready.

4. You’ll return to the home screen, which is now showing a new icon.

You’ll notice that the icon displays a miniature screenshot of the website. However, if the website offers an iPhone icon, it will actually show the icon instead.

If you have a website and you would like to offer your iPhone, iPod touch and iPad visitors an icon for their home screens, please continue reading for a tutorial on how to do it.

Note: To continue, you should have (a) a basic understanding of an image editor application so that you can open the image you want to use as an icon and resize it to fit specific dimensions, and (b) knowledge of transferring files to your website’s server.

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:
apple-touch-icon.png

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://yourdomain/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.

You’ll also find that some third party apps make good use of the icon if it’s available. For example, this is a screenshot from Reeder for iPad showing the icon for the Cellcode RSS feed:

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:
apple-touch-icon-precomposed.png

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.

Now the icons look exactly as I want them to:

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

view rawgistfile1.htmlThis Gist brought to you by GitHub.

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

view rawgistfile1.htmlThis Gist brought to you by GitHub.

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.