HOWTO: iPhone Webclip Icons

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]

  • http://www.noelheikkinen.com Noel Heikkinen

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

  • keithisfatomg

    There’s an easier way to do it
    * 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.)
    http://www.tuaw.com/2008/01/15/create-custom-iphone-and-ipod-touch-webclip-icons/

  • http://vjarmy.com/ Dan Dickinson

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

  • http://www.jkg.in/openid/bv74zqcm

    Bah…reading is overrated. :P
    /coat
    –Anonymous Coward

  • http://allinthehead.com/retro/319/how-to-set-an-apple-touch-icon-for-any-site 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://pz2.ucls.uchicago.edu/webclipIcons.js 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

  • iPod Touch

    Wow, this works! Thanks.

  • http://www.rightonblog.net http://openid.aol.com/prsop2000

    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.

  • http://www.iphoneminds.com 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 57×57 PNG graphic. i made a PSD template with an overlay you can download if it helps:
    http://www.iphoneminds.com

  • http://marcus.bointon.com/ 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, 60×60 is as good as it gets.

  • http://www.makentosh.com/ makentosh

    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.

  • 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/IconEdit_software_2101.html
    I just wonder that what tool do you use for icon creating?

  • easy_trigger

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

  • http://madebysquad.com/iphone-photo-dial/ jordandobson.myopenid.com

    I�ve 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.

  • http://webclipicons.info https://me.yahoo.com/a/mkgbwtwv0.2PnqHteh9RySxH

    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/

  • http://www.noelheikkinen.com/ Noel Heikkinen

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

  • 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 from iphone application development

  • 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

    • http://vjarmy.com/ 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”.

  • http://vjarmy.com/ 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”.

  • Chris

    This won't work for me :(

  • Chris

    This won’t work for me :(

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

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

  • zyberjoe

    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.

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

  • 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.
    _________________
    Mathew Farney – Web Hosting

  • Anonymous

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

  • http://www.siminvent.com/ power inverter

    happy new year

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

  • Anonymous

    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.

  • Eric

    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.

  • Jacobson Robert

    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?

    • http://vjarmy.com/ Dan Dickinson

      Robert, please see the paragraph that begins with “If you want more flexibility – perhaps you don’t have access to the site root…”

  • http://vjarmy.com/ Dan Dickinson

    Robert, please see the paragraph that begins with “If you want more flexibility – perhaps you don’t have access to the site root…”

  • http://www.orjinkrem.net orjin krem

    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.

  • http://www.orjinkrem.net orjin krem

    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

  • http://www.tutunex.tk tütünex

    Robert, please see the paragraph that begins with “If you want more flexibility – perhaps you don’t have access to the site root…”

  • http://www.getmehigher.co.uk/ get higher on google

        while developing a small web application . How can we handle user pressing the "go" key while a text 
    

    box is highlighted/ edited by the user as i am facing this issue since two days.