Clippy

It’s not even funny how difficult it is to get iPhone webclip icons to render right. Trust me, I’ve designed a few icons before and producing iPhone one for this site has definitely proven to be the trickiest in terms of production.

After spending a solid three hours on this thing, I finally managed to lock down the way to produce almost crisp and pixel perfect web clip icon. Unless your design features a checkerboard pattern, I believe this is the closest you can get to taming them pixels on it.

A few notes.

First, forget about the numerous suggestions on the web to use a large image and have the iPhone OS scale it down for a smoother and nicer rendering. It might work for a photographic icon, but if you need it pixel perfect, stick to 1:1. Your playground is 59x60 pixels, so set the document canvas size to that.

Draw your icon inside the area of 57x56 pixels and keep the design aligned to the top and center on the canvas. iPhone rounds the corners for you and adds a single pixel white highlight to the top of the icon.

If you would like to create an outline to the icon, use an inset. Outline similar to iPhone’s Settings icon has an inset of 3 pixels from each side and rounded corners of 8 pixels (33 in Adobe Fireworks). Should you choose a different inset, simply increase or decrease the radius.

I’ve created Adobe Photoshop helper file with notes for you.

— 22 July, 2008