Safari on iOS includes a feature that allows you to add a website to your device's homescreen for easy access. Obviously, just as any other thing on the homescreen, the link to the website includes an icon. By default, iOS will take a small preview of the website and use that as the icon on the homescreen. However, you can easily change that by adding some code to your header. Here's how to do that:
First, you're going to need to pick the image you'd like to use. Resize the image to have a resolution of 72 x 72 and save it (being sure to keep the original, un-resized image also). Then, resize the same image to have a 114 x 114 resolution and save that as well. Next, upload the images (all three of them) to where you're going to be hosting them (image uploading service, server, etc.)
After you do that, head over to your HTML code and find the <head></head> section. Add the following code into that section:
<link rel="apple-touch-icon" href="LINK TO ORIGINAL IMAGE" /> <link rel="apple-touch-icon" sizes="72x72" href="LINK TO 72 x 72 IMAGE" /> <link rel="apple-touch-icon" sizes="114x114" href="LINK TO 114 x 114 IMAGE" />
Note: Remember to change the capitalized text in the code above to links to your images.
The original image will be used as a backup case. The 72 x 72 image will be used for the iPad and the 114 x 114 image will be used for devices with a Retina display (like the iPhone 4).
Other notes
- By default, iOS automatically adds a gloss and rounded edges effect to your image when it's on the homescreen. To make sure this works correctly, be sure that the original image you're going to use is perfectly square and doesn't have any pre-gloss effect added.
