Create an icon for your iPhone web application: Web Clip Bookmark Icon
11th May 2008If you have developed an iPhone web application you might also want to create a custom icon that can sit on the users home screen, a so called Web Clip Bookmark Icon. This icon is a link to your web application from the home screen and all the user needs to do is tap it to get your application running, making it seem like an inbuilt application. Way faster and easier than opening the browser and typing in your URL, don't you think?
To add this icon on the home screen the user needs to visit your site and then tap the "+" icon at the bottom of the browser and then select "Add to home screen". Once this is done the user can find the icon on the home screen and just tap it to revisit your site. If you as a developer choose not to create a custom Web Clip Bookmark Icon for your iPhone application the iPhone will generate a thumbnail of your site and use that as the icon.
How to create an iPhone Web Clip Bookmark Icon?
It's really simple. Here is what you need to do.
1. Create a 57x57 pixels PNG image and name it "apple-touch-icon.png".
2. Place this file at the root directory of your application.
That's it. That's all you need to do. The iPhone will automatically add the "glassy" effect to your icon so you don't even need to bother about that.
If you need to define a different name or location for your icon you can do so by specifying the name and location in a link tag in the head section of your HTML document like this:
<link rel="apple-touch-icon" href="/customIcon.png"/>
Now go create a sexy Web Clip icon for your iPhone application!
Did you enjoy this post?
If you enjoyed this post you can subscribe to my 
RSS feed to know when I post another article. It would also be great if you bookmarked this post on your favorite social bookmarking site, if you have signed up with any.
[...] Web clip bookmark icon create an icon for use in the home screen (hit + in Safari, then “Add to home screen”) [...]
The article is ver good. Write please more
What exactly does this mean?: "Place this file at the root directory of your application." What is a root directory? Where do I find it? How do I add something to it? Is there a special place or exact text that I need to use to add it there?
Hi Alex,
The root directory is the top-most or main directory of your application. You add files to it using FTP or however else you have uploaded your application to the server.