One of the big peeves that I had with the new iPhone and iPod Touch firmware update yesterday was that Apple doesn’t give much control over the webclip icons. That’s when you bookmark a website to the home screen, and the iPhone snaps a screenshot of the upper-left corner of the screen to assign as the icon.
As it turns out Apple also made a way for website publishers to customize the icon that gets used, and as you can see in the screenshot it works pretty well. I highly recommend that all website publisher take a few seconds to make their icon look pretty.
How do you do it? Create a PNG image (recommended 57×57 pixels), name it apple-touch-icon.png, and then throw it in the website’s root folder. You can also get a little more technical by adding a “link” attribute to the <head> portion of your site:
<link rel="apple-touch-icon" href="/imgs/apple-cybernet.png" />
Using this method you can place the icon in any directory you want. A larger image can be used if you so desire, and the iPhone will scale it down as needed. It should also work with other file formats, such as JPEG, but I didn’t test them all.
The only thing you need to watch out for is the clipping that Apple does to the icons. It’s really a matter of playing with it, but generally it looks like the iPhone shaves a few pixels off of each side for the icons. And don’t forget that the corners are automatically rounded in addition to the uncontrollable glassy appearance.
Now I’m just keeping my fingers crossed that more websites will catch on to this, because I love bookmarking the sites onto my home screen!