I remember, years ago, I was baffled by the little 16×16 icons that were showing up in my URL toolbar, and it took a surprising amount of searching to find out how to create one. I refuse to let this happen again.
So: if you want to make a custom icon for your website that will show up in the Springboard when a user makes a “webclip”, using their iPhone or iPod Touch, the dirt simple way is:
* Create a 57×57 PNG.
* Name it “apple-touch-icon.png”
* Throw it in the root folder of your website. (Not the root of your server, the root of your web documents.)
Boom. If you add a webclip for vjarmy.com, you’ll see my smiling mug.
If you want more flexibility – perhaps you don’t have access to the site root, perhaps you want to use a different file name or format – you can use a link tag in the head of the document, such as:
<head>
<title>iHelloWorld</title>
<link rel="apple-touch-icon" href="/whatever.jpg"/>
</head>
I’ve tested this with a slightly larger (75×75) JPEG, and it works without trouble – it just scales things down.
If you’re testing this on your iPhone, you may notice a pause of a few seconds before the icon appears when you press “Add To Home Menu”. I’d imagine the icon only downloads when you request to make a webclip, instead of the “request it every time” method used for fetching favicon.ico. (As for why it’s a few seconds – well, that’s EDGE for you. The lag goes away when you use WiFi.)
Apple has more info on their iPhone Dev Center; look at “Create a WebClip Bookmark Icon”.
And don’t worry if your icon design skills aren’t up to snuff, but do worry if you care about the sanctity of your image:
>Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application.
Addendum @ 9PM: I should note another oddity: there’s some degree of clipping off the sides of the icon that can’t really be controlled. I found this by scaling down a circular logo (in EPS format) to 57×57, and there was a noticeable clip on the sides. With that in mind, I recommend adding a pixel or two on the sides if you’re using a circular design. Note that scaling the icon down under 57×57 does not solve this, it merely scales it up to fit the 57×57.
Addendum @ 10PM: Neil Epstein, Technology Director for Gothamist LLC, says 47×47 seems to be the usable area, and that he had best luck with 45×45.
Addendum @ 1/16 7AM: Playground Blues notes that because of the resolution of the iPhone screen, using an oversized image (such as his 158×158 image) may result in a crisper icon. [via HicksDesign]