iPhone Webclip Icons

While browsing a website on your iPhone/iPad/iPod Touch you can tap the plus icon and select ‘Add to Home Screen’. This creates a shortcut to that URL as an icon that you can delete and move around just like an app. The default icon for a webclip is to screengrab the current page, however you can specify your own icon.

What to do

Create your icon as a 57×57px PNG file and put it in a publicly accessible location on your server (you don’t need to create round corners the OS will do this for you). Then add the following code inside the head tags in your page:

<link rel="apple-touch-icon" href="[PATH_TO_ICON]/webclip.png" />

Now when you save your page as a webclip this will be the icon that’s used on your home screen. Additionally if you want to remove the effects added by the OS, namely 3D borders and reflective shine, use the following:

<link rel="apple-touch-icon-precomposed" href="[PATH_TO_ICON]/webclip-precomposed.png" />