C выходом iPhone для владельцев сайтов остро встал вопрос об оптимизации их ресурсов для нового устройства. В этом году масла в огонь подлил и выход iPad. Оба эти устройства, а точнее их операционные системы(iOS) позволяют для наиболее посещаемых вами сайтов выносить их иконки на домашний экран.

Чтобы добавить иконку сайта на рабочий стол iPhone, достаточно нажать в Safari на кнопку “+” и телефон предложит сохранить ссылку на сайт. В случае если иконка специально для iPhone отсутствует, будет добавлен скриншот страницы сайта.

Выбираете пункт меню – Добавить в “Домой”.

Изменяете название на любое удобное вам

Чтобы добавить iPhone иконку для вашего сайта, вам не потребуется много времени, особенно если иконка у вас уже имеется.

Требования к изображению, которое станет иконкой сайта для iPhone:

  • изображение в формате PNG;
  • размер 57 x 57 пикселей, с острыми углами(если размер изображения больше – iOS порежит изображение);
  • не должно быть никаких бликов или отражений в изображении;
  • не использовать прозрачность.

Если вы хотите подробнее почитать о требованиях к иконкам сайтов на iPhone, вы можете заглянуть в официальное руководство от Apple.

Оригинал иконки выглядит так:

Использование иконки

После того как мы обзавелись иконкой, у нас есть два способа использовать ее на сайте.

Залить в корень сервера

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

Проставить ссылку в заголовке страницы

Вы можете сослаться на файл иконки в заголовке страницы, таким образом вы можете включать свои иконки в k.st директории. Эта техника позволяет вам писать собственные темы для различных движков (например, WordPress) и использовать для каждой темы свою иконку сайта.

HTML код для иконки без эффектов:

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

HTML код для иконки с эффектами:

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

Все, теперь у вашего сайта есть иконка.

Чтобы сделать свои сайты более iPhone ориентированными, вы можете воспользоваться плагином для WordPress (WP-Touch-iPhone-Theme), который добавит в блог поддержку темы, предназначенной специально для мобильных устройств.

Популярность: 67%