HOWTO: iPhone Webclip Icons

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:

<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]

pepe1969

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.

mfarney

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

Guest

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.

Sam

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.

Chris

This won't work for me :(

TravisN

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

Dan Dickinson

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".

https://me.yahoo.com/a/mkgbwtw

I whipped up this website you can use to make webclip icons for OTHER sites. So if there’s a site that does not have one yet that you’d like to make your own for so your iPhone’s icon isnt’ so drab, head over to http://webclipicons.info/

jordandobson.myopenid.com

Ive also created a simple and sexy Photo Speed Dialer for your home screen.

http://madebysquad.com/iphone-photo-dial/

Read more about it at SquadBlog: My iPhone Photo Dialer Icon Creator.

easy_trigger

Thanks! This is great and really easy to use :)

carin.smith.myopenid.com

Thx for the informative article.

I currently use IconEdit2 to create icons. It is an award-winning easy-to-use and powerful icon editting and icon making tool. And I find it on http://www.sharewarecheap.com/IconEditsoftware2101.html

I just wonder that what tool do you use for icon creating?

makentosh

It appears that the 2.0 software has fixed the rendering problems. 57x57 is now actually 57x57 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 57x57 png at my site.

synchrom.myopenid.com

I built an icon size test page that makes it easy to try different icon sizes interactively. Far as I can see, 60x60 is as good as it gets.

monkeyfoot7

from a graphics angle, it appears that Apple crops off 1 pixel on the left and right and 3 pixels at the bottom of the 57x57 PNG graphic. i made a PSD template with an overlay you can download if it helps:

http://www.iphoneminds.com

http://openid.aol.com/prsop200

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.

iPod Touch

Wow, this works! Thanks.

Peter Zich

Hey drew, I made a more complex version with a more user-friendly interface the 15th, I guess we had the same idea.

http://pz2.ucls.uchicago.edu/webclipIcons.js

drewmclellan.net

If you want to add your own WebClip icon for sites that don’t already have one of their own, I’ve knocked up a quick bookmarklet to enable you to do just that.

How to set up an Apple touch icon for any site

Hopefully people will find it useful!

http://www.jkg.in/openid/bv74z

Bah…reading is overrated. :P

/coat

—Anonymous Coward

Dan Dickinson

keithisfatomg:

You do realize that that TUAW article, and the bit you quoted, is quoting the article you just commented on, right?

keithisfatomg

There’s an easier way to do it

*  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.)

http://www.tuaw.com/2008/01/15/create-custom-iphone-and-ipod-touch-webclip-icons/

Noel Heikkinen

Outstanding. I just added a Webclip to my site. Thanks for your help!

Tangentially Related:

About Dan

Categories

Yearly Archives