How to Customise an Icon on the iPhone Home Screen

An icon that iPhone users can easily create

iPhone users have the option of adding an icon to their home screen that will take them directly to the URL of a site they are interested in. To do so, they simply tap the "Add to Home Screen" button.

By default, however, the icon will show a thumbnail preview of the page — essentially a screenshot. For a better aesthetic, it is possible to modify this icon. Users will then see your logo, or any image you wish to display, rather than a miniature preview of your page.

Customise your icon

To do this, the first step is obvious: you need to create the icon. The image must measure 150 px × 150 px to be the correct size.
Then save it in .png format, under the name "apple-touch-icon.png".

Then upload it to your FTP web server, in the correct target directory. And that is all there is to it.

Apple automatically generates icons with rounded edges and a glossy effect. To achieve this look, you can use the following code:

This way, you can easily avoid an unappealing visual on users' iPhone home screens.