Apple touch icon все размеры

Какие нужны фавиконки

30 августа 2017

Фавиконка — это favorite icon, то есть иконка для избранного. Её придумали для IE5 в 99 году, чтобы у сайтов была узнаваемая картинка. Достаточно было бросить в корень сайта файл favicon.ico и браузер сразу её подхватывал и делал красиво. До сих пор все браузеры делают запрос в корень сайта и пытаются найти там файл в формате ICO. Бросил и забыл, расходимся? Рано!

Долгое время всё прекрасно работало. В контейнер ICO можно было зашить много разных иконок: от крошечной монохромной до огромной полупрозрачной. Браузер после скачивания иконки сам выбирал нужный формат. Проблема была в том, формат ICO страшно неэффективный. Если зашить в ICO две PNG-иконки 16 и 32, то иконка будет весить в два-три раза больше, чем исходные файлы. Браузерам приходилось тянуть не только ненужные форматы, но ещё и в неэффективном виде.

Но ICO признали все браузеры и научились подключать его не только из корня сайта, но и из произвольного места. Если указать в голове документа
, то браузер пойдёт не в корень, а туда, куда вы ему показали. Линковать особый адрес приходилось на каждой странице, но это же не проблема — иконка ведь всего одна! Ну правда, что могло пойти не так? Так и жили.

При отсутствии внятных стандартов, за дело взялась Apple. К первому Айфону прилагался прорывной мобильный браузер Safari, который тоже начал искать в корне сайта иконки, но на этот раз в формате PNG и с названием apple-touch-icon. Эту иконку видно в избранном и при добавлении сайта на домашний экран. Бросил в корень второй файл и забыл, расходимся? Нет.

Чтобы иконка была без блика сверху, нужен файл apple-touch-icon-precomposed, ещё один для ретины, потом ещё несколько для всех моделей Айпадов, тройной ретины… и в итоге вам нужно намусорить в корне или в шапке сайта целым ворохом иконок со специальными размерами: 72, 76, 114, 120, 144, 152, 180 и кажется что-то ещё. Чтобы разобраться во всех нюансах тач-иконок, читайте отличное руководство Матиаса Байненса.

Иконки Apple в какой-то момент стали стандартом де-факто. Их начали подтягивать не только другие браузеры, но и другие сервисы, чтобы сделать иконку для вашего сайта. Проблема была в том, что это было слабо документировано, учитывало интересы только одной компании и несло само её имя в формате. Нужен был стандарт.

В HTML5 появилось расширенное описание
: добавился атрибут sizes , чтобы указывать размеры, и атрибут type , чтобы указывать формат иконки. Например, если у вас ICO с несколькими иконками внутри, то укажите все размеры через пробел в sizes . Если иконка векторная — да, так тоже можно — укажите размер any . Главное, не забудьте указать правильные типы. Теперь-то расходимся, проблема решена? Почти.

Для каждой иконки писать свой линк? Сложно! А если хочется фирменный цвет указать, заставку или какие-то особенности работы всего сайта? Не иконками едиными. Вот бы нам конфиг в отдельном файле! Было и такое: browserconfig.xml для плиточных иконок IE11, JSON-манифест для иконок-виджетов табло Яндекс Браузера. Экспериментов было много, но теперь есть и стандартное решение — веб-манифест.

Спецификация Web App Manifest описывает простой JSON-файл, в котором можно указать не только все иконки, их размеры и форматы, но и полностью описать ваш сайт или приложение. Фирменный цвет, цвет фона, язык и направление письма, полное и краткое название, ориентация, режим запуска и другое. Вы подключаете его с помощью
на каждую страницу и браузер сразу всё знает. Хороший инспектор манифеста есть во вкладке Application отладчика Chrome.

А что Apple? Что-что… До сих пор поддерживает свой формат тач-иконок и придумала даже ещё один: новый, нестандартный, как мы любим! С помощью
для закреплённых вкладок Safari и кнопок на тач-баре Макбуков можно указать монохромную векторную маску и цвет для наведения. Спасибо, конечно, за вектор, но неспасибо за очередной велосипед.

Веб-манифест уже так или иначе поддерживают Chrome, Opera, Samsung Internet и Firefox, но пока только на Андроиде. В Edge он тоже скоро появится — разработка в процессе. Пока это будущий способ подключения иконок, а что делать сегодня, вот прямо сейчас? Сочетать всё, что мы знаем.

Для начала, забудьте про ICO, если только вам не нужен IE10. Подключите линком PNG-иконки: простую на 16 и 32 для ретины, чтобы было красиво в браузерной строке и закладках. Дальше подключите линком из корня сайта apple-touch-icon.png размером 180 × 180. Потом подключите веб-манифест, в котором указана иконка на 192 для Андроида. Ну и можно там же упомянуть 16, 32, вектор, цвета и название — пригодится.

Этого вам должно хватить, чтобы было красиво в основных современных браузерах. Но если нужно упороться по мелочам и сделать вот прямо идеально на каждой платформе — мои соболезнования и читайте документацию в описании к видео. Есть ещё сносный онлайновый генератор иконок, но я бы не доверил ему генерировать графику — будет мыльно. А вот код позаимствовать можно.

Ну что, чуда не произошло и всё по-старому: мусор в шапке, мусор в корне? Знаете, нет, я верю, что со временем веб-манифест наведёт порядок, поэтому подключайте его уже сегодня. Вот выбросим мусор и заживём!

Источник

Какой размер для фавиконок использовать?

Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок, которые подходят всем браузерам и всем экранам:

Для сайта на CMS WordPress это может выглядеть так:

1. apple-touch-icon-180×180.png – сразу для всех современных гаджетов и больших экранов, эту иконку будет использовать и iOs, и Android
2. Для обычных браузеров, favicon-32×32.png – средних размеров, можно и больше, но устройства, которые могут использовать большего размера фавикон, возьмут первый вариант apple-touch-icon-180×180.png
3. Все же еще где-то используют IE9 и младше, поэтому приходится использовать такой устаревший формат как favicon.ico , по идее, можно сделать размер и 32х32, но оставим 100% поддерживаемый 16х16.

До этого я использовал такие фавиконки:

Но все эти иконки успешно должна заменить одна apple-touch-icon-180×180.png.

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

На iPhone старых версий размер 180х180 просто сожмется до нужных пропорций.

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

Но самый первый вариант с тремя фавиконами успешно заменяет кучу этих иконок.

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

Источник

Для чего используется Apple Touch Icon в 2019 году?

Apple-touch-icon.png – это миниатюрное изображение, представляющее ваш сайт на устройствах с операционной системой (iOS).

В коде страницы имеет следующий вид:

Это изображение в основном используется на iOS, не распространяется для macOS. Для macOS используется изображение в формате svg, а атрибут rel будет иметь значение mask-icon. Важно это понимать и не путать в будущем.

Также Apple Touch Icon могут использовать другие платформы и приложения. Ведь, как правило, это изображение хорошего качества, имеющее высокое разрешение. Так, например, браузер Chrome на Android может использовать apple-touch-icon.png для сохранения ссылки с сайта на рабочий стол.

Создать его можно с помощью функции Web Clips. Web Clips – это разработка значка веб-страницы на рабочем столе яблочного девайса.

Если вы читаете эту статью на устройстве с установленной iOS и не знаете, как создавать Web Clips, можно сделать это прямо сейчас.

Для браузера Safari

Нажать кнопку «Поделиться»

В появившейся панели нажать кнопку «На экран Домой»

Если вас не устраивает название страницы, можно написать свое, например, 1PS. Затем нажать «Добавить».

Все готово – вот так выглядит Web Clips на рабочем столе устройства.

Однако не все сайты используют Apple Touch Icon. Давайте рассмотрим ситуацию, когда его нет.

Делаем все тоже самое, но на пункте 3 предыдущей инструкции видим такую картину:

Изображение создалось автоматически, но по факту это скриншот верхней части сайта. Вот как Web Clips будет выглядеть на рабочем столе нашего устройства:

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

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

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

Чтобы этого избежать, давайте рассмотрим технические особенности создания Apple-touch-icon.png.

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

При создании Web Clips от устройства на сервер будут отправляться запросы в следующем порядке:

1. В первую очередь к apple-touch-icon-precomposed.png.
2. Если он не найден (от сервера получен ответ 404), то устройство сделает новый запрос к к apple-touch-icon.png.
3. Если и этот способ не увенчается успехом, то устройство сделает скриншот верхней части вашего сайта, и он будет использоваться в качестве Web Clips.

Apple-touch-icon-precomposed.png и к apple-touch-icon.png, в чем различия?

Apple-touch-icon.png позволяет создать изображения, не запариваясь с фирменным оформлением Apple (закругленные рамки, блики). Ваше устройство все сделает самостоятельно.

С помощью apple-touch-icon-precomposed.png вы можете проявить некую творческую жилу и сделать все вручную, однако к этому формату есть свои требования – будьте внимательны.

Размеры для apple-touch-icon

В 2007 году было достаточно размера 57×57, так как было только одно устройство, на котором можно было сделать Web Clips.

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

Если устройство не найдет иконку нужного размера, то оно будет использовать самую близкую по большему размеру иконку.

Необязательно создавать иконки для всех разрешений экранов, достаточно будет сделать иконку размером 180×180, так как другие устройства могут уменьшить размер под свои требования.

Однако не стоит забывать о том, что не только устройства Apple используют Apple Touch Icon, поэтому можно объявить и другие размеры. Указывать размеры нужно с помощью атрибута – sizes.

Таблица размеров

Модель устройства	Размер apple-touch-icon
IPhone – first generation, iPhone 2G, iPhone 3G, iPhone 3GS	57×57
iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone se, iPhone 6, iPhone 6s, iPhone 7, iPhone8	120×120
iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus	180×180
iPad mini	76×76
iPad, iPad mini 2	152×152
iPad Pro	167×167

На сегодняшний день Apple рекомендует дает следующие рекомендации по размерам иконок

Модель устройства	Размер apple-touch-icon
iPhone	120×120 или 180×180
iPad Pro	167×167
iPad, iPad mini	152×152

Можно сделать вывод что устройства первого поколения, и ipad mini уже неактуальны, поэтому для них необязательно прописывать Apple-touch-icon соответствующего размера.

Как прописать в коде apple-touch-icon?

Прописывается в вашего сайта. С помощью тега
, по аналогии с favicon.

Для сравнения напоминание, как прописывается фавикон:

Как прописывается apple-touch-icon:

Использование в поисковой выдаче

22 мая 2019 года Google в своем блоге объявили о редизайне мобильной выдачи.Теперь в результатах мобильной поисковой выдачи будет показываться иконка сайта.

И для этой иконки может быть использован как Apple Touch Icon, так и другие форматы к примеру:

Подробнее о требованиях к иконке тут.

Если вы изменили иконку или создали новую, чтобы в выдаче она обновилась как можно скорее, нужно отправить страницу на повторное сканирование.

Как это сделать, написано тут.

Заключение

Прошло уже много лет с тех пор, как появился первый iPhone и соответственно Apple-touch-icon. Теперь он может быть использован не только для оформления красивого Web Clips, но и для улучшения внешнего вида сниппета сайта в поисковой выдаче Google. А Apple Touch Icon со временем популяризировался и теперь используется другими платформами и приложениями.

Мы рассмотрели только часть возможностей для кастомизации сайта, но у Apple есть еще несколько интересных дополнений, например, Startup Image, Apple Mobile Web App Title и другие вещи, о которых расскажем в следующих статьях.

Если у вас на сайте еще нет Apple Touch Icon, обращайтесь к нам за помощью в отрисовке и размещении на сайте – с радостью поможем.

Источник

Как создать идеальный favicon для сайта

Что такое favicon

Favicon – это небольшой значок, отображающийся рядом с названием сайта в окне браузера или в выдаче поисковика. Его использование позволяет повысить узнаваемость сайта и CTR в поисковой выдаче. Но по сути, задача фавиконки – просто быть симпатичной.

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

Сложно? Давайте разберёмся, и начнем со стандартных значков Favicons. Возьмём небольшой файл, называемый файлом favicon.ico. Один ICO-файл содержит один значок. Размер значка может быть любым, но наиболее употребимы квадратные значки со стороной 16, 32 и 48 пикселей. Раньше такой файл .ico содержал несколько сжатых .png-файлов в разных размерах (потому что ico использовали для ярлыков на рабочем столе). Начиная с введения атрибутов размеров в HTML5, нам больше не нужно сжимать .png-файлы в формат .ico (даже если браузеры все еще поддерживают .ico). Фавиконки теперь .png.

Как добавить фавикон на сайт

Если у вас есть готовый favicon.ico, вам нужно загрузить его в корневой каталог вашего сайта. Для загрузки можно использовать Файловый менеджер или FTP клиент. В хостингах на базе Linux, это обычно каталог public_html. Однако он может отличаться у различных хостингов, или изходя из ваших собственных настроек. В таком случае лучше проконсультироваться у поставщика услуг хостинга.

Как только полученный файл favicon.ico будет загружен в каталог вашего сайта, браузеры автоматически добавят и покажут изображение.

Зачем нужен favicon

Целей создания favicon несколько:

1. Повышение узнаваемости сайта и компании. Уникальный, запоминающийся значок позволяет пользователю быстрее найти ваш сайт среди множества вкладок, открытых в браузере, или среди сайтов в поисковой выдаче.
2. Рост посещаемости сайта из поисковых систем (SEO). За счет яркого, броского значка, отображающегося напротив вашего сайта в поисковой выдаче, большее количество пользователей будут обращать внимание именно на ваш сайт, а не на соседей по выдаче, и кликать на него.
3. Повышение CTR в контекстной рекламе на поиске. Идея та же: благодаря привлекающему внимание значку больше пользователей кликают именно по вашему объявлению. Вы получаете больше переходов на сайт, растет CTR объявлений, снижается стоимость перехода.
4. Имидж. Само по себе отсутствие favicon или наличие стандартной картинки от CMS-системы показывает, что компания не сильно следит за сайтом, или же ее подрядчик по техподдержке/продвижению сайта недобросовестно исполняет свои функции.

Apple Touch Icons

В Apple iOS есть функция добавления иконки сайта на экран. В этом случае ваш сайт будет отображаться на рабочем столе наряду с остальными мобильными приложениями, а иконкой для сайта послужит как раз apple touch icon.

Рекомендуемые размеры Apple Touch icon (px)

Устройство	App Icon	AppStore Icon	Spotlight	Settings
iPhone +6+, 6S+, 7+, 8+, X	180×180	1024×1024	120×120	87×87
iPhone4, 4S, 5, 5C, 5S, 6, 6SE, 6S, 7, 8	120×120	1024×1024	80×80	58×58
Old iPhones1st, 2nd, 3rd Generation	57×57	1024×1024	29×29	29×29
iPad Pro	167×167	1024×1024	120×120	58×58
Retina iPadsMini 2 & 3, Air, 3 & 4	152×152	1024×1024	80×80	58×58
Old iPads1, 2, Mini 1	76×76	1024×1024	40×40	29×29

Как создать favicon самостоятельно

В интернете есть множество сервисов, позволяющих создать favicon онлайн. Приведем примеры нескольких, проверенных нами:

favicon-generator.org

Генерирует favicon для Web, Android, Microsoft, и iOS (iPhone and iPad) из загруженного изображения.

favicon.cc

Еще один хороший генератор фавиконок онлайн.

realfavicongenerator.net

Позволяет проверить все версии favicon на сайте. На сайте есть генератор favicon.

Favicon Cheker

Как проверить фавиконку во всех популярных браузерах сразу? Сервис покажет вашу фавиконку сразу в Chrome, Firefox, Safari, включая родные тёмные темы.

Logo Crunch

Большинство генераторов favicon просто делают масштабирование, что приводит к размытым контурам. В идеале нужно создать отдельный логотип для каждого разрешения. Сrunch делает этот процесс намного проще. Он работает с изображениями, градиентами и сложными текстурированными фонами.

Источник