brandonballentine.com

Several months ago, I wrote a short tutorial on creating an iPhone Web Clip Icon for your website. No doubt some people who have tried creating their own icons have noticed that the graphic sometimes looks slightly different when actually viewed on an iPhone.

I recently stumbled across an old blog post that explains why this happens and even offers a nice Photoshop template to help visualize what the end result will look like. According to the post, “The iPhone cuts off 1 pixel on the left and right and 3 pixels at the bottom of your icon.” The PSD template features guides for centering your graphic and a layer that mimics the embossed look of the final icon.

To use the template, simply create your graphic on any layer under the overlay layer. Toggle visibility on the overlay later to simulate the glossy effect the iPhone automatically adds to webclip icons. When you’re happy with what you see, remember to make the overlay layer invisible and export your icon in PNG format with the file name apple-touch-icon.png.