Проверить apple touch icon

Мета-теги HTML для Apple Safari

Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.

Apple Touch Icon

Иконка сайта в iOS на экране закладок и домашнем экране.

Иконки разных размеров указываются атрибутом sizes :

Apple Touch Icon Precomposed

Тоже самое что и apple touch icon , но с наложенными эффектами в стиле iOS с закругленными углами и т.д.

Mask Icon

Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color .

Apple-Mobile-Web-App-Title

При добавлении сайта на домашний экран в iOS задает имя иконки.

Apple-Mobile-Web-App-Capable

В Safari iOS для закрепленных сайтов на экране «Домой» включает полноэкранный режим.

Apple-Mobile-Web-App-Status-Bar-Style

Задает стиль панели состояния при полноэкранном режиме.

Может иметь следующее значение:

default	Белый фон
black	Черный фон
black-translucent	Прозрачный фон и белый цвет иконок и шрифтов

default

black

black-translucent

Apple-Itunes-App

В iOS Safari выводит баннер с приложением в App Store.

Баннер не отобразится, если устройство не поддерживает приложение или оно недоступно для данной локали, подробнее на developer.apple.com.

Format-Detection

В iOS запрещает распознавать номера телефонов и адреса.

Источник

Как создать идеальный 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 делает этот процесс намного проще. Он работает с изображениями, градиентами и сложными текстурированными фонами.

Источник

Используйте фавиконки правильно

Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.

Фавиконка при установке веб-приложения Фавиконка на вкладке в браузере

Подключение

Чтобы иконка начала отображаться, на вкладке нужно подключить файл с графическим отображением иконки. Для правильного подключения иконки нужно использовать обязательные требования браузера и минимальный набор фавиконок, который мы сейчас подробно рассмотрим.

Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.

Обязательная фавиконка

Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.

Для подключения нужно добавить в :

Обратите внимание на две детали: размер и расположение.

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.

Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.

Дополнительные необходимые фавиконки

Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:

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

Если современный веб-браузер умеет работать с векторными фавиконками, то этот формат более предпочтительный: меньший вес, наилучшее качество, поддерживает смену тем, не нужно указывать размер.

Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:

Для устройств Apple

Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.

Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:

Подключив такую иконку, мы также поддержим старые устройства, которые не умеют работать с таким большим размером фавиконки и уменьшать её до нужных размеров.

Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из , что сделает разметку более читаемой.

Манифест

Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.

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

Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).

Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки < и заканчиваться закрывающей скобкой>.

Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:

Осталось добавить фавиконки по шаблону:

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

Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.

src — путь до иконки;

type — тип иконки;

sizes — размер иконки.

Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:

Откуда брать фавиконки и как их приготовить

Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.

Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:

Не добавлять фавиконки в проект.

Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.

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

При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.

Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.

Итоговый способ подключения фавиконки:

manifest.webmanifest

Таким способом мы будем поддерживать самые старые браузеры и самые новые.

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

Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

Источник

Многие блогеры и веб-мастера, которые просматривают логи сервера (или журналы, создаваемые некоторыми плагинами) могли заметить, что часто ошибку с кодом 404 вызывают некоторые весьма интересные файлы с названиями вроде: apple-touch-icon.png и apple-touch-icon-precomposed.png

Что это за файлы такие и как устранить ошибки 404 из-за их отсутствия? Об этом мы и поговорим в данной статье.

Если в отчетах (логах) своего сервера или в журналах плагинов (например, iThemes Security ведет такой журнал) вы обнаруживаете ошибки 404, которые связаны с тем, что не найдены файлы «apple-touch-icon.png» и «apple-touch-icon-precomposed.png» (с префиксом «apple-touch-icon. «), то это означает, что ваш блог посещают с iPhone, iPad или iPod Touch. Эти устройства ищут на сайте данные файлы для того, чтобы посетитель смог сохранить «закладку» сайта на рабочем столе (называется он Home Screen) своего iГаджета. Официально они называются Web Clip Icons.

То есть, эти файлы – это и есть те иконки, которые будут отображаться на Home Screen iДевайса. Что самое любопытное — эти файлы «ищутся» не только в момент добавления сайта на домашний экран, а при каждом посещении. И, если файлов apple-touch-icon.png или apple-touch-icon-precomposed.png не существует, то сервер фиксирует ошибку 404 (не найден файл, к которому было обращение), а это уже отдельная операция, которая требует определенного действия (запись на жесткий диск). И, как следствие – это дополнительная нагрузка на сервер.

Кроме того, если этих файлов нет, то на «рабочем столе» iPhone или iPad будет отображаться не красивенькая иконка, а миниатюра (скриншот) страницы. В общем, выглядит это примерно так:

И если о том, как отображается сайт на хоум скрине iOS-устройств, можно было бы особо себя не озадачивать (хотя, мы же создаем favicon, например, да и посетителей своих уважаем), то о нагрузках на сервер нужно помнить всегда. И по возможности их снижать и избегать.

Вот, для примера, скриншот журнала плагина iThemes Security на одном моем сайте:

Как видно из скриншота, на 19 августа в журнале зафиксировано 190 ошибок 404, связанных с apple-touch-icon. И это не очень уж посещаемый блог. Да и сам журнал я регулярно «чищу».

А вот еще один скриншот, из Google Analytics (эту статистику на указанный сайт я установил недавно, поэтому картина происходящего не совсем целостная):

Я специально оставил на нем данные не только об iOS-девайсах, но и обо всех мобильных устройствах, чтобы наглядно показать, что доля мобильного трафика высока (и она постоянно растет). И уже сейчас составляет примерно 7%, от общего числа посетителей (в моем случае). Это значит, что из ста человек, приблизительно семеро посещают сайт с мобильных платформ. А на долю apple-гаджетов приходится целая треть из них.

Почему я завел речь обо всех мобильных устройствах, а не только об Apple`овских? Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png. Да-да! Несмотря на наличие в названии оных слова «apple». Поэтому негодования многих блогеров, по типу «И чО? Мы теперь должны под «огрызок» подстраиваться? Специальные файлы для них создавать?», выглядят смешно.

Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на «рабочий стол». А следовательно, при простом посещении с Android, при отсутствии данных файлов, ошибки 404 не будут появляться (в отличие от посещений с iOS).

И, как итог всего вышесказанного, можно сделать вывод, что нужно по максимуму адаптировать свои сайты к мобильным устройствам. В особенности, если такие недочеты вызывают ошибки (в нашем примере 404) и лишние нагрузки на сервер.

Так что, давайте исправлять ситуацию.

Первым делом нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно в хорошем разрешении.

Теперь нужно понять: какой размер в пикселях необходим для иконки, и куда ее помещать?

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти «картинки» под разные устройства. На данный момент, в официальной эппловской документации приняты следующие размеры:

• 60 x 60 px — для iPhone
• 76 x 76 px — для iPad
• 120 x 120 px — для iPhone c экранами высокого разрешения (Retina)
• 152 x 152 px — для iPad с экранами высокого разрешения (Retina)

Так вот, самым простейшим способом будет создать иконку, размером 57×57 px 60×60 px, назвать ее apple-touch-icon.png и поместить в корень сайта. При добавлении сайта на домашний экран, iOS сама скруглит ей края и наложит глянцевые эффекты. Если же, вы не хотите наложения этих эффектов (тем более, сейчас «плоский дизайн» в тренде), то следует создать еще и файл apple-touch-icon-precomposed.png. На него будет наложено только скругление.

Размеры иконок сверены и актуализированы на дату 02.11.2015. Буду ли я и дальше корректировать и обновлять статью — не знаю. Поэтому, прежде чем создавать эти иконки, обязательно сверьтесь с официальной документацией Apple, ссылку на которую я давал чуть выше. Также хочу отметить, что информация о формате precomposed актуальна только для операционных систем iOS ниже 7-й версии.

Но вышеописанный метод не совсем правильный, по нескольким причинам:

• мы понимаем, что устройства у всех разные;
• при таком способе, Android-девайсы не смогут поместить на домашний экран данную иконку.

Так что, мы пойдем правильным путем, а именно — вставкой простого html-кода.

Для начала нам нужно будет создать либо четыре файла с вышеуказанными размерами (этот вариант правильней), либо два файла: 144×144 px и 114×114 px 152×152 px и 120×120 px. После чего, их нужно поместить в корень сайта (или в любую удобную для вас директорию), а в head сайта — код:

В случае, если вам не нужны специфические эппловские эффекты, то:

Как видите, при второй схеме используются только два файла, а размеры задаются значением атрибута sizes (используется только в HTML5) /напоминаю, это устаревшая схема/

Итог всех этих несложных манипуляций:

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

На этом все, друзья. В заключение, еще раз повторюсь: если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то хотя бы закиньте в корень сайта картинку (размером 57 на 57 60 на 60 пикселей) с названием «apple-touch-icon.png».

До встречи на страницах блога или в соцсетях!

Источник