Categories
Best Of Explained

HOWTO: iPhone Webclip Icons

Quick and dirty instructions for creating iPhone/iPod Touch webclip icons for your site.

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]

39 replies on “HOWTO: iPhone Webclip Icons”

One thing to note if you have SSH or SFTP access to your iPod or iPhone (jailbroken) is that inside the MobileSafari.app reside 3 images used to make the gloss and shape of the webclip icon.
If you edit those you can make your webclip icons match any style you so desire.

It appears that the 2.0 software has fixed the rendering problems. 57×57 is now actually 57×57 and pixel perfect icons are now displayed as expected!
Sites that used the curved icon templates (like mine!) may want to take another look at them since the curved edges no longer match when using a touch device with the 2.0 software installed. I’ve posted my findings and a test checkerboard 57×57 png at my site.

Thanks for the great tutorial man. I was always interested in those small tiny but powerful icons. I have my iPhone for over a year now, but I have never tried to do something like this. It would be an amazing experience for me. I hope I will succeed in doing it. Thanks one more time for the useful post and I will be waiting for other great ones from you.

Sincerely,

Travis Nollson from iphone application development

Thanks for the great tutorial man. I was always interested in those small tiny but powerful icons. I have my iPhone for over a year now, but I have never tried to do something like this. It would be an amazing experience for me. I hope I will succeed in doing it. Thanks one more time for the useful post and I will be waiting for other great ones from you.Sincerely,Travis Nollson

Travis –

Thanks for the feedback. I wasn’t aware that creating Webclip icons would be an “amazing experience” for anyone, but I am pleased to hear that it’s blowing your mind.

Also, thank you for trying to overload the rel=”nofollow” attribute placed on comment links with a rel=”dofollow”. Unfortunately, rel=”dofollow” means nothing to any search engine.

Consider this my next “great one”.

Travis –

Thanks for the feedback. I wasn't aware that creating Webclip icons would be an “amazing experience” for anyone, but I am pleased to hear that it's blowing your mind.

Also, thank you for trying to overload the rel=”nofollow” attribute placed on comment links with a rel=”dofollow”. Unfortunately, rel=”dofollow” means nothing to any search engine.

Consider this my next “great one”.

while developing a small web application using standard html and javascript. How can we handle user pressing the “go” key while a text box is highlighted/ edited by the user.

while developing a small web application using standard html and javascript. How can we handle user pressing the “go” key while a text box is highlighted/ edited by the user.

Just a quick tip I thought I'd throw in here, if you don't want the glass on your iPhone, just change it from “apple-touch-icon” to “apple-touch-icon-precomposed”. Glass, gone.

Just a quick tip I thought I’d throw in here, if you don’t want the glass on your iPhone, just change it from “apple-touch-icon” to “apple-touch-icon-precomposed”. Glass, gone.

Thanks for taking the time to write this tutorial. I managed to create two icons already and I'm not planning to stop yet.
_________________
Mathew Farney – Web Hosting

Thanks for taking the time to write this tutorial. I managed to create two icons already and I’m not planning to stop yet.

All,

Does anyone knows how can I add a web clip icon automatically for a web app.
Maybe a javascript or jquery, any ideas?

Regards
Alejandro.

All,

Does anyone knows how can I add a web clip icon automatically for a web app.
Maybe a javascript or jquery, any ideas?

Regards
Alejandro.

Just tested. If you use the link method instead of just the image it shows up immediately in the iPhone. As mentioned, when only using the image it takes a sec.

I use Contribute to create my web pages (an institutional requirement) and I cannot place an image in my root directory. What is the alternative?

It appears that the 2.0 software has fixed the rendering problems. 57×57 is now actually 57×57 and pixel perfect icons are now displayed as expected!

Sites that used the curved icon templates (like mine!) may want to take another look at them since the curved edges no longer match when using a touch device with the 2.0 software installed. I’ve posted my findings and a test checkerboard 57×57 png at

Comments are closed.