Картинки apple-touch-icon.png и apple-touch-icon-precomposed.png

Вторник, Май 13, 2014, 0:32 | Вебмастеру, Онлайн сервисы | 4 443 просм. | Нет комментариев

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

Певрым делом запрашивается файл apple-touch-icon-precomposed.png. Это картинка, которая сделана по всем правилам «стеклянных» иконок Apple: закругленные углы, тень, блики.

Если картинка с таким именем не находится, начинается поиск файла apple-touch-icon.png. Такую иконку делают  в виде обычной картинки без «стеклянных» эффектов – их наложит сама iOS.

Префикс -precomposed означает также полный контроль отображения кнопки со стороны разработчика, так что вы можете использовать его для картинок, выполненных вовсе не по «стеклянным» канонам, а по вашим собственным вкусам, чтобы добавляемая иконка выглядела так, как хотите вы, а не так как решит iOS.

Соответственно, если вы хотите, чтоб ваш сайт на экранах айпадов представляло не невесть что, а стильная иконка, нарисуйте ее и киньте  в корень сайта. Можно еще на страницах добавить метатег типа

<link rel="apple-touch-icon" href="[путь к иконке]/apple-touch-icon.png">

Это особенно необходимо, если иконка лежит не в корне, а в специальной папке.

Теперь что касается размеров этой иконки. Тут начинается неразбериха. iOS-устройств много, разрешение экрана у всех разное и единого стандарта для размера нет. Говорят, что сам Apple рекомендует использовать в качестве базовой 57х57. А дальше, если есть желание, можно нагенерить целую тучу иконок разных размеров, как-то:

  • 114 x 114 — для iPhone, iPod touch высокого разрешения
  • 144 x 144 — для iPad высокого разрешения
  • 72 x 72 — для iPad

А также 60×60, 76×76, 120×120, 152×152 и т. д.

В этом случае нужно будет для каждого размера иконки использовать свой метатег, в котором явным образом, с помощью атрибута size, указать местоположение и имя иконки соответствующего размера. Например:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad-76-precomposed.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-ipad-120-precomposed.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-152-precomposed.png">

Ну и в заключение бонус: ссылка на онлайн-генерилку кнопок любых размеров с различными эффектами (на английском языке): тыц.

Похожие записи:

Понравилось? Поделись ссылкой с друзьями!

Метки: , , ,

Оставить комментарий


7 − = ноль