Skip to main content
Темплейты для Drupal
Apple Touch Icons

Apple Touch Icons на вашем сайте

Когда пользователь заходит на сайт с Macbook, iPhone или iPad (c iOS, в общем), браузер запрашивает файл - некий аналог favicon, который нужен для создания красивой иконки на домашнем экране (home screen).

Сначала запрашивается файл apple-touch-icon-precomposed.png. Этот файлик нужен в том случае, если вы хотите полностью контролировать внешний вид иконки, и предотвратить добавление глянца и скругления углов. Если такого файла нет, браузер обращается к файлу apple-touch-icon.png. В этом случае эффекты накладываются автоматически.

Как сделать apple touch icon на своем сайте?

Это очень просто: нужно лишь добавить в <head>...</head> строку:

<link rel="apple-touch-icon" href="img/touch/apple-touch-icon.png" />
или
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-precomposed.png" />

Добавление -precomposed запрещает автоматическое наложение эффектов глянца и скругления углов.

Поскольку у "яблочных" девайсов очень разные разрешения экрана, стоит позаботиться о том, чтобы иконку оптимизировать для разных моделей iPhone, iPad, iPod. Вот такие размеры используются:
  • 114 x 114 — iPhone, iPod touch высокого разрешения
  • 144 x 144 — iPad высокого разрешения
  • 57 x 57 — iPhone, iPod touch
  • 72 x 72 — iPad

И соответственно, задать apple touch icon в соответствии с этими размерами.

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png" />

Атрибут sizes - обязателен. По умолчанию используется иконка 57x57px.

Как сделать apple touch icon на Drupal?

Это еще проще: модуль Touch Icon добавляет в настройки темы оформления (admin/apperance/settings/your_theme) настройку для apple touch icon в блоке, где находятся настройки логотипа и favicon.

Можно обойтись без модуля, добавив соответствующие теги в html.tpl.php
 

9

Comments

Andrey's picture
Andrey

а зачем делать такие извращения? любой айфон или самсунг(вписываем сюда свою модель) способен отображать сайт как есть. компания эппл никогда не делала специальной версии сайта для своих устройств.компания самсунг делает мобильный сайт только для закачки приложений и все....зачем городить огород? одно время увлекался монетизацией мобильного траффика на такой версии сайта у себя,но в какой-то момент плюнул и сделал 1 версию сайта универсальную.

Мария Шерскова's picture
Мария Шерскова

А в чем именно тут извращения? И откуда взялась отдельная мобильная версия? Без иконок этих можно и обойтись. Вероятно те, кто пользуется айфонами даже и не заметят. Но меня раздражает 404 ошибка в логах - я ее устранила. Не вижу в этом ничего из ряда вон выходящего. И да, я не "яблочник", пользуюсь презренным андроидом. :)

P.S. Android, кстати, эти apple touch иконки также распознает.

 

Andrey's picture
Andrey

у меня на тест есть вся техника:) я и не яблочник и не поклонник "андрюши" если че)))
просто я сторонник унифицированного и простого.

Andrey's picture
Andrey

кстати это....у тебя в новом дизайне кнопочка поиска поехала(скрин http://img-fotki.yandex.ru/get/9761/87814726.a5/0_9a698_45d82fa0_L.png). Может имеет смысл поставить поиск от яндекса?там и плагин-пингер есть для индексации хорошей.Это так...занудствую тут:)

Мария Шерскова's picture
Мария Шерскова

Не люблю я поиск от яндекса, да и от гугля тоже. Не знаю даже почему. А кнопочку да, поправлю, спасибо :)

Andrey's picture
Andrey

ну...мое дело предложить:))))просто мне было интересно на белорусском и российском проектах потягаться таким образом с маститыми порталами по некоторым запросам-удалось:)

Мария Шерскова's picture
Мария Шерскова

А можно поподробнее про результаты экспериментов? Можно на почту или в личку в социалках. Или если в блоге есть про это - ссылочку. Если это, конечно, не секрет :)

Andrey's picture
Andrey

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

u8507801's picture
u8507801

гений)