В этой статье мы рассмотрим, как получить свой собственный значок, который будет отображаться на главном экране iPhone, когда кто нибудь добавит ваш сайт в закладки. Это у вас не займет много времени, зато сделает ваш сайт более профессиональным и мультиплатформенным.

Как выглядит иконка на iPhone

Требования
Вот выдержка из iPhone Dev Center официального руководства для создания иконки.

Чтобы убедиться, что икона подходит для iPhone OS, нужно создать изображения в формате PNG, которое:

Имеет размер 57 х 57 пикселей, с углами в 90 градусов (изображение больше этого расширения будет уменьшено)
Не имеет блеск и глянец
Не использовать альфа-прозрачность

Вот так выглядит иконка, которую сделал я, для своего сайта:

Сама иконка

Использование иконки
Теперь у нас есть иконка. Есть два способа заставить ее работать.

Корневой каталог
Если у вас есть доступ к корневой директории, это самый легкий вариант. Все, что вам нужно сделать, это назвать ваш файл apple-touch-icon.png (или для не глянцевой иконки назвать ее apple-touch-icon-precomposed.png) и поместите его в главный каталог сайта, iPhone сделает все остальное сам.

Ссылка на него
Можно указать ссылку на значок в заголовке вашего веб сайта. Этот способ позволит вам назвать файл любым другим именем, а так же расположить его в другой директории.

HTML код для глянцевой иконки:

<link rel="apple-touch-icon" href="/icons/buildinternet_iphone.png" />

HTML код для не глянцевой иконки:

<link rel="apple-touch-icon-precomposed" href="/icons/buildinternet_iphone.png" />

После того как вы все сделали, ваш сайт можно добавлять в закладки на iPhone.