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.
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Landing Pages & Email
PowerPoint & Keynote
Shopify, Tumblr & More
Icons, Vectors & More
Sans Serif, Script & More
Logos, Print & Mockups
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 theelement 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.