How to Create an iPhone or iPod Touch WebClip Icon

by
Tags: Design

Apple Icons Apple’s iPhone and iPod Touch is sweeping across the globe at an unprecedented rate. We all love the touch screen icons, and now with the new update from Apple, which lets you configure your icons and add new ones, it’s become even better and much more popular. But web developers and designers can take it a step further, instead of just settling on a snapshot icon of their sites when added to iPhones or iPod Touch, they can actually customize the icons displayed when added. This allows websites owners the ability to brand the icons shown when their websites are added to the iPhone or iPod Touch, and below I explain how to achieve this in an easy and fast way.

Creating an iPhone or iPod Touch webclip icon is generally quite simple to achieve. Simply choose the desired image you want to display as your icon and save it as a 57×57 pixel .PNG file, you’re now done with the icon. Don’t worry about the round corners or the glossy effect the icons have, the actual device takes care of that for you, all you have to do is focus on the image displayed inside of the actual icon.

Now once you’ve saved the file as a .PNG file, just upload it to your root folder where your website is hosted. Then open up your index file of your site in your favorite editor (or for those of you that use WordPress, access your Header through your theme editor), then simply pop in the following code and save it.

Make sure to add the code between the <head> tags and under the <title> tag. Here’s the code:

For additional reference on how to apply a customized icon for Apple’s iPhone or iPod Touch, below is the official explanation from Apple’s iPhone Dev Center.

“iPhone and iPod touch allow a user to save a WebClip bookmark to your site on their Home Screen.

To specify a bookmark icon for all pages of a web site, place a PNG image named “apple-touch-icon.png” at the root directory of your web server - similar to the “favicon.ico” for site icons.

To override the site bookmark icon on a specific web page, insert a <link> element similar to <link rel=”apple-touch-icon” href=”/customIcon.png”/> within the <head> element of the page.

The bookmark icon dimensions should be 57×57 pixels. If the icon is a different size it will be scaled and cropped to fit.

Safari will automatically composite the icon with the standard “glassy” overlay so it looks like a built-in iPhone or iPod application.”

You’re all set now, enjoy.