Creating an iPhone Website Icon

With the latest software update to the iPhone, it is now possible to add ‘WebClips’ to your home screen. This is essentially a quick bookmark to a website, complete with an icon. By default, the iPhone will take a tiny screenshot of the site to use as an icon – with a little work however, you can customize the icon used to make it look just as you’d like.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Design Resources

There are two simple steps to create an icon:

  • Create a 57x57px PNG file to use as the icon – pick something bold that well respresents your site
  • Name it ‘apple-touch-icon.png’ and place it in the root HTML folder of your site

The great thing is that the iPhone will automatically alter the WebClip icon to fit the style of the other icons, adding rounded corners and the glossy effect.

To apply the icon a different way, you can insert a element similar to within the element of the page.

If you notice a slight delay after clicking the ‘Add to Home Screen’ button on your iPhone it is simply that the icon is being downloaded. Give it a few seconds!

For the official guide, you can have a look at the Apple iPhone Dev Site.