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]
15 Comments
Leave a comment
About
Dan Dickinson is a 29 year old living in Jersey City, New Jersey. He works in the strange intersection of collaborative technologies, education, and medicine. His passions include finding unexpected paths and connections, music/rhythm video games, and backchannels. This has been his primary (vivid) weblog since February of 2000, seeing infrequent but overzealous updates. [more]
Destinations
Search
Recent Entries
Popular Posts
Recent Comments
- Adam "rampage" Meltzer on The Other Shoe Drops: The PS3 Repair Odyssey
- http://openid.megidolaon.com/rmz on WWDC 2009 Keynote Thoughts
- Adam "rampage" Meltzer on Under The Radar at E3 2009
- Mutant Dog on Under The Radar at E3 2009
- https://me.yahoo.com/a/mkgbwtwv0.2PnqHteh9RySxH on HOWTO: iPhone Webclip Icons
- Stephen on The Mid Bimonthly Weekender Weekend Weekender
- http://openid.megidolaon.com/rmz on The Mid Bimonthly Weekender Weekend Weekender
Movable Type 4.23-en
Outstanding. I just added a Webclip to my site. Thanks for your help!
There’s an easier way to do it
http://www.tuaw.com/2008/01/15/create-custom-iphone-and-ipod-touch-webclip-icons/
keithisfatomg:
You do realize that that TUAW article, and the bit you quoted, is quoting the article you just commented on, right?
Bah…reading is overrated. :P
/coat
—Anonymous Coward
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!
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
Wow, this works! Thanks.
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.
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
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.
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.
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?
Thanks! This is great and really easy to use :)
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.
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/