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]
10 Comments
Leave a comment
About
Dan Dickinson is a 27 year old living in Astoria, Queens, New York City. He works in the odd intersection of collaborative tech and education. Writing about emerging technologies, New York City, gaming culture, and awkward anecdotes, his blog is updated only semi-frequently but always overzealously.
Indexed
Search
Recent Comments
- Adam "rampage" Meltzer on The Week Of Awesome Food: Chez Panisse
- Alan Hogan on Quicksilver Trick: Strip Clipboard Formatting
- Jason on The Week Of Awesome Food: Bistro 33
- mhaithaca on The Week Of Awesome Food: Bistro 33
- Adam "rampage" Meltzer on 1461 Days Ago
- ???? on Super Smash Brothers Brawl Friends Code
- Dan Dickinson on Super Smash Brothers Brawl Friends Code
Movable Type 4.1
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.