I’m making this post as much for my own reference as for anyone else’s. As you may or may not be aware, Apple devices (the iPod Touch, the iPhone and the iPad) use their own icons for bookmarked websites and apps, rather than utilizing the standard favicon.
In order to create an icon for use on those devices, you should start with a 114×114 canvas. Apparently the iPod Touch and older iPhones use an icon size around 57×57, the iPad uses a slightly larger resolution and the new iPhone 4 devices use 114×114. Using the 114×114 resolution allows the icon to look great on iPhone 4 devices, and has little impact on the quality of the icon on older devices.
Then, add the icon and save it as a PNG file. By default, any transparent areas within the PNG will be black when displayed on the iDevice screen (since I don’t have a device capable of utilizing custom wallpapers, I can’t explicitly say whether the transparent areas are actually transparent of if they are just black). If you don’t want the background of your icon to be black, you will need to fill it with a solid color.
Also, by default, the iDevices will add the glossy, 3D effect overlaid on the icon. I know it’s possible to override that in some way, but I don’t know how. If you have some insight into this, please share it in the comments.
Finally, when you’re ready to implement the icon, save it as a PNG, upload it to your Web server and add the following code to the head of your Web pages:
<link rel="apple-touch-icon" href="/path/to/icon.png" />
Once you’ve added that code, you can open your website on your iDevice and use the bookmark menu to add it to your home screen. Then, on your home screen, you’ll see the new icon you created.
One Response
The icon file referenced by apple-touch-icon is modified to add rounded corners, drop shadow, and reflective shine.
Alternatively, an apple-touch-icon-precomposed icon may be provided to instruct devices not to apply reflective shine on the image.
Without Apple’s reflective shine