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

Главная » Верстка » Apple-touch-icon и apple-touch-icon-precomposed, подружи свой сайт с яблоком
Самолетная 614022 Россия, Пермь +79630195620
Верстка
Apple, Твой брэнд
7744

Те кто со мной знаком, знают, что кроме 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. Это способ для самых ленивых.

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

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

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

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

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

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



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

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



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

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

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



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

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



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

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

Черкни и ты пару строк

А вы знали для чего нужны apple-touch-icon.png? Сами делаете клипсы на своих мобильниках? Или теперь будете делать? Планируете ли после прочитанного поставить подобные иконки на своих сайтах и блогах? Как вам кстати моя иконка?:) Жду ваших ответов!

Не забывайте делиться информацией с друзьями,  они это оценят! Просто нажмите на одну из кнопок соцсетей!

Подписка на блог MASALKIN.NAME
Не упусти шанс получить отличные бонусы!

100% конфидециальность, адреса электронной почты не разглашаются и не предоставляются третьим лицам для коммерческого или некоммерческого использования.

Благодарность читателям

Спасибо что прочли эту статью до конца, надеюсь та информация что была изучена вами, оказалась для вас полезной. Если в ходе изучения возникли вопросы, то смело задавайте их в комментариях, я обязательно на них отвечу!

P.S. Не забудь подписаться на блог, тебя ждет много интересного и полезного!

Удачи!

x

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение