HOWTO: iPhone Webclip Icons

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 57x57 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 (75x75) 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 57x57, 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 57x57 does not solve this, it merely scales it up to fit the 57x57.

Addendum @ 10PM: Neil Epstein, Technology Director for Gothamist LLC, says 47x47 seems to be the usable area, and that he had best luck with 45x45.

Addendum @ 1/16 7AM: Playground Blues notes that because of the resolution of the iPhone screen, using an oversized image (such as his 158x158 image) may result in a crisper icon. [via HicksDesign]

I remember, years ago, I was baffled by the little 16x16 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 57x57 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:

I've tested this with a slightly larger (75x75) 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 57x57, 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 57x57 does not solve this, it merely scales it up to fit the 57x57. Addendum @ 10PM: Neil Epstein, Technology Director for Gothamist LLC, says 47x47 seems to be the usable area, and that he had best luck with 45x45. Addendum @ 1/16 7AM: Playground Blues notes that because of the resolution of the iPhone screen, using an oversized image (such as his 158x158 image) may result in a crisper icon. [via HicksDesign]

Categories:

Tags:

About Dan

Categories

Yearly Archives