Создание и продвижение сатйов
8 342 225 01 68 Пермь, ул. Нефтяников, д. 27, оф. 22
Веб-разработка

Apple-touch-icon и apple-touch-icon-precomposed, подружи свой сайт с яблоком

Время чтения статьи: около 4 мин.
Автор:
Масалкин А.В.
Опубликовано:
13 июля 2015 г.
Просмотров:
53

Те кто со мной знаком, знают, что кроме Wordpress я работаю еще с рядом других CMS. В частности у меня есть несколько своих проектов на Drupal. По какой то причине мне захотелось посмотреть системный журнал на одном из сайтов. И к своему удивлению я обнаружил множество запросов к файлам apple-touch-icon.png и apple-touch-icon-precomposed.png.

Apple-touch-icon и apple-touch-icon-precomposed

Но так как у меня этих файлов небыли, сервер выдавал ошибку.

Что яблочные опять придумали?

Не стыдись учиться в зрелом возрасте: лучше научиться поздно, чем никогда.

Эзоп

Мне стало интересно что это за файлы и зачем они вообще нужны. В итоге оказалось, что apple как всегда позаботилась о своих пользователях, и дала возможность добавлять на рабочий экран ссылку на ваш сайт. Эта ссылка отображается в виде значка, как любое другое приложение работающее на iOS. Такого рода закладки называются Web Clips, о том как их делать, будет описано в конце статьи.

Как показать яблоку, что я о нем подумал.

Самый простой способ это закинуть в корень сайта иконку в png формате, с именем apple-touch-icon.png. Это способ для самых ленивых.

Более продвинутый способ, это когда иконку мы закидываем в какую-то папку на сервере. Тогда нужно прописать в шаблоне следующий тег:

<link rel=“apple-touch-icon” href=“/icons/icon.png”>

Хочу чтобы на всех устройствах Web Clips смотрелись на 5 баллов.

Линейка устройств у apple весьма разнообразна. В связи с этим у нас возникают проблемы с разрешением устройств, где то оно 480x320, а где-то 1024х768. А мы хотим чтобы икона выглядела одинаково красиво на всех устройствах.

Заглянув в спецификацию apple, обнаружил что можно на сайте указать несколько тегов, с иконками разного разрешения. На момент написания данной статьи, публикую рекомендации от Apple.

<link rel=“apple-touch-icon” sizes=“76x76” href=“/icons/apple-touch-icon–76x76.png”>

<link rel=“apple-touch-icon” sizes=“120x120” href=“/icons/apple-touch-icon–120x120.png”>

<link rel=“apple-touch-icon” sizes=“152x152” href=“/icons/apple-touch-icon–152x152.png”>

<link rel=“apple-touch-icon” sizes=“180x180” href=“/icons/apple-touch-icon–180x180.png”>

Подготовив все иконки нужных размеров, вы можете быть уверены, что будут использоваться те иконки, которые наиболее гармонично будут смотреться на текущем мобильном устройстве.

Вот как выглядят мои иконки:

Apple-touch-icon и apple-touch-icon-precomposed

Зачем мне заморачиваться еще и из-за этих иконок?

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

Но немного поразмыслив, меня осенило. А ведь Apple молодцы. По сути благодаря этим иконкам, вы обретаете лояльную аудиторию у своих блогов и сайтов. Согласитесь, что вы не будете захламлять свой рабочий стол ссылками на чей то сайт, если он вам не понравился. А если вас добавили, значит к вам будут заходить и скорее всего не один раз. Поэтому стоит задуматься над этими иконками.

Техническая сторона

Человек заходит на ваш блог или сайт. Ему он очень нравится, и он решает сделать Web Clips вашего сайта. После этого идет запрос на ваш хостинг или сервер, в поиске файла apple-touch-icon-precomposed.png. Если он не находится, запрос меняется на apple-touch-icon.png. Если и его нет, то девайс делает скриншот вашего сайта, и из верхней части дизайна, делает иконку. Ну а сервер формирует вам запрос, что небыли найдены файлы apple-touch-icon-precomposed.png и apple-touch-icon.png.

В чем отличие apple-touch-icon-precomposed.png и apple-touch-icon.png.

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

Если вам хочется блеснуть индивидуальностью, и вы разработали иконку в своей стилистике, тогда называйте файл apple-touch-icon-precomposed.png и apple-touch-icon.png

Как сделать Web Clips на iOS устройствах?

Каждый владелец яблочной техники может создать сколько угодно Web Clips. Для создания клипсы моего блога, вам необходимо открыть safari на своем мобильном устройстве, и вбить в адресную строку адрес моего блога. После того как блог откроется, на панели ищем вот такой значок.

Apple-touch-icon и apple-touch-icon-precomposed

Жмем на него, появится следующая панель:

После того как блог откроется, на панели ищем вот такой значок

на ней нам интересна иконка со знаком плюс - «На экран «Домой»». Жмете на нее.

Вылезет запрос, как назвать клипсу и адрес в сети. Жмите добавить.

После того как блог откроется, на панели ищем вот такой значок

И все, клипса на мой блог у вас на панели.

После того как блог откроется, на панели ищем вот такой значок

Нет ничего сложного.

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

Отправляя форму, я даю согласие на обработку персональных данных