Creating A Custom Icon On Your Website For iPhone

The iPhone is not just a cell phone, its main advantage is the possibility to access the internet in its fullness through its Safari browser that comes installed by default. This browser supports the most advanced technologies such as CSS and Javascript and have a website tailored to the size of the iPhone screen that is essential for further extension and the reach of your company.

One way to improve the user experience of iPhone with your site is to provide an icon designed specifically to be included on the home screen of the device, allowing one-touch user to go directly to your site without having to enter the url in the address bar.

This icon should be created according to some very specific rules determined by Apple. The first one refers to the file format, which should be in PNG to take advantage of everything the iPhone can offer.

This should not include the PNG alpha channel transparency and cannot have any gloss or gloss effect, since it will be automatically added to the iPhone. Finally, the file must have the size of 57 x 57 pixels and have straight edges so that the device itself can create rounded corners without causing image distortion.

To install this icon on your website you should follow a very simple procedure. The first step is to put the icon file in the root directory of your site and then rename it to apple-touch-icon.png , which is the default name that the iPhone automatically searches for the site.

You can also use another name for the file, it is enough to include the following line in the header of your HTML file:

<link rel=”apple-touch-icon” href=”/icons/icone_iphone.png” />

With it you cannot just change the file name as well but you can put it in a folder other than the root of your site.

With this tip you can further customize your site to the iPhone.