Tuesday, February 5, 2008 @ 5:51 PM

Since Apple announced custom Web Clips for your website everyone has been scrambling to write articles on how to do it even though almost everything you need to know is on Apple's own iPhone Dev Center site.

If you were paying attention, you noticed I said "almost". What no one has managed to do yet is tell you why your icon looks chopped and funky.

Well, after exhaustive testing, we've figured it out. The iPhone cuts off 1 pixel on the left and right and 3 pixels at the bottom of your icon. It also rounds the corners and overlays a "glossy" appearance that makes it difficult for you to truly showcase your amazing design skillz in Corel Draw. Many people have posted that they created icons with larger dimensions (128x128 or 158x158) to solve the problem. Don't bother. It's a larger download for users and now more difficult for you to figure out how your graphic will render. Apple says build them 57x57. So our advice is to build them 57x57 - or keep reading...

We've created a Web Clip Photoshop template for you to utilize to create your own Web Clip Bookmark Icon masterpiece. The graphic below shows you the opened file. We've included the overlay, rounded corners and guides to help you find the exact center of your icon.



Click here to download

In order to use the template, you'll need to be familiar with Photoshop layers. Make sure you turn off the "overlay" layer before exporting as a PNG. The corners of your icon should NOT be rounded. The iPhone takes care of that.

I realize you may have stumbled across this post trying to figure out how to actually get a web clip icon on your site, so let use save you an extra click and just post Apple's instructions here:



BTW... as of the writing of this post, we have not put up a decent web clip for this site. Cut us a little slack, we've been busy.

//scott

Labels: design, how to, webclip