Анализируя логи своего сайта, вы можете обнаружить, что на нем регулярно запрашиваются файлы 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"> |
Ну и в заключение бонус: ссылка на онлайн-генерилку кнопок любых размеров с различными эффектами (на английском языке): тыц.