Skip over navigation

Touch The Icon

By on Apr 9, 2008 in Personal Technology, Web Design

Want to make a custom iPhone/Touch weblip icon for your website? Sure you do! It’s an easy way to say “I’m hip, I’m cool, I’m with it”.

Follow these step by step instructions to achieve some iPhone webclip awesomeness.

Step one: Open your favorite image editor (Photoshop, Fireworks, etc.) and create a 72 dpi document at 200x200px (for a little breathing room).

Step two: Create your background – draw a 158x158px square, give it the color or gradient you’d like and center it in the document.

Step three: Import your company logo, preferably in vector format of some kind (.eps, .png, etc.), scale it to the size you want and place it over your background square.

Step four: Export a 158x158px slice named apple-touch-icon.png and place it at the root directory of your website.

Step five: There is no step five. The iPhone/iTouch software will take care of the rounded corners, drop shadow and “glassy” effect whenever someone decides to add your site to their iPhone home screen. Sweet!


Frustrated that your favorite interwebs destination hasn’t made their own webclip or don’t like the one they have? Here’s how to set up a Touch icon for any site. Fresh!


Hey! This wasn't written by a pod of sea lions! It was written by , who does awesome work at Loud Dog, a digital branding firm in San Francisco that helps businesses express themselves authentically via identities, websites, and marketing collateral.

If you want us to do awesome work for you, if you have a question, or if you're just feeling lonely and want to chat, we want to hear from you!

Get in touch

Leave a Reply

Your email address will not be published. Required fields are marked *