Connect with us

General Web Design

Have a Website? It’s Time to Add a WebClip Icon

WebClip Icons are strictly for iPhone & iPod Touch users, but since they are quite the popular little devices, website owners might want to think about adding a WebClip icon soon. A WebClip icon is the icon that the iPhone/iPod Touch uses if a user adds your site to their (now customizable) homescreen/s. I would expect that most people who would bookmark BittBox on the iPhone would just read the RSS feed, but as a site owner, I don't want to leave anything to chance. I want my icon to look the way I want it to look, and not rely on the iPhone to do it for me. Think of it as a really big favicon.

Have a Website? It's Time to Add a Web Clip Icon
All you have to do to create your icon is make a 57 x 57px png icon, name it “apple-touch-icon.png” and place it in the root directory of your site. You don't even need to worry about adding the glossy highlight or round corners, the iPhone does all that for you. Safari on the iPhone will now recognize your icon when a user adds your site to their homescreen. The image below is the icon in my root directory. Notice that it's completely square, and has no reflection, compared to what you actually see on the phone (above).
Have a Website? It's Time to Add a Web Clip Icon

If you want to read more about WebClip icons, TUAW has a great post with some links to websites where you can make/submit your icons. Also some very nice icons can be found on freevctor.com

I'm the editor-in-chief of Bittbox.com. I'm a designer and developer by day, and a writer and musician when the feeling strikes. I enjoy vintage advertisements and puzzles with an absurd amount of pieces. Follow me on Twitter.

Click to comment

More in General Web Design

To Top