favicon и touch-icon | Минимальные требования

Заморские специалисты различают favicon и touch-icon.

favicon
Значок-эмблема сайта, отображаемая браузером на вкладке, перед названием открытого веб-документа и т.д.
touch-icon
Дословно, touch-icon – сенсорный значок, (от англ. touch – касаться, трогать). touch-icon – расширенное понятие favicon, вошедшее в жизнь веб-мастеров с появлением сенсорных устройств и желанием пользователей закреплять сайты и веб-страницы на начальном экране. Ибо, функционал панели закладок мобильного браузера не так широк, как у настольного ПК, за то «под быстрой рукой у юзера» – практически бесконечно листаемый сенсорный начальный экран.
Файл тачиконки скачивается из сайта операционной системой и используется ею для создания кнопок быстрого вызова сайта на начальном экране сенсорного устройства. В этом главное отличие favicon от touch-icon.
  1. Favicon сайта. ПК-настольные браузеры.
  2. touch-icon iOS Safari
  3. tile (плитка) Windows 8 и 10
  4. Значок тачскрин | Android Chrome
  5. Favicon сайта | Mac OS X El Capitan Safari

Favicon сайта – ПК-настольные браузеры

«favicon» – термин, образованный сокращением от англ. favorite icon – «значок избранного». В сайтостроении, «favicon» – тривиальное имя файла изображений, узнаваемое браузерами и поисковыми роботами. Классический файл значка сайта «favicon» формата ICO находится в корне сайта и содержит сразу три изображения в рекомендуемых размерах: 16x16, 32x32 и 48x48 (px). Допускается (и, желаемо) наличие файлов с тривиальным именем favicon форматов SVG, ICO, GIF, JPEG, PNG и BMP. Размеры изображений постепенно изменяются в сторону их увеличения. На данный момент, Яндекс настаивает на присутствие favicon.png и favicon.svg, размерами 120х120 px.

Помещённые в корневую директорию, файлы «favicon» вышеуказанных форматов не нуждаются в своем объявлении (декларировании) в коде веб-страницы, а их имена – не изменяются никогда. Браузеры и сетевые роботы самостоятельно (без объявления) находят корневой элемент сайта и отображают содержимое favicon в качестве картинки – рядом с закладкой веб-страницы, на открытых и закрепленных вкладках веб-документа, в сниппетах (описаниях) и других элементах пользовательского интернет-интерфейса.

В не рекомендуемом случае расположения favicon вне сайтового корня, в элемент веб-документа <head> добавляем строку с описанием горячо любимого файла-иконки и пути к нему:

<link rel="icon" sizes="размер" type="тип" href="/папка/имя.формат">

touch-icon iOS Safari

Между тегами <head></head> размещаем код линков объявления (присоединения) тач-иконок с обязательным атрибутом rel="apple-touch-icon":

<!-- touch-icon-base iOS Safari -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="/touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="/touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="/touch-icon-ipad-retina.png">
<!-- touch-icon-full iOS Safari -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">

Картинки указанного имени, формата и размера – залить в корень сайта. В противном (не рекомендуемом) случае – прописать в коде новый путь к ним. Имена файлов и формат (.png) – не изменять.

apple-touch-icon.png – базовый файл сенсорной тач-иконки Apple. Имя, формат и размер определен разработчиком iOS Safari, заливать – исключительно в корень сайта. Секция touch-icon-base – обязательна к наличию на адаптивном сайте. Секция touch-icon-full – для заточенных и навороченных мобильных версий, в универсальных адаптивных шаблонах её присутствие не обязательно.

tile (плитка) Windows 8 и 10

Изображения для плиток Windows 8 и 10 и пути к ним объявлены (указаны) в конфигурационном файле browserconfig.xml, обязательно закачанного в корень сайта и подключенного мета-тегом в элементе <head> веб-страницы:

<meta name="msapplication-config" content="browserconfig.xml">

Простейшее и достаточное содержание browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile>
<square70x70logo src="/smalltile.png"/>
<square150x150logo src="/mediumtile.png"/>
<wide310x150logo src="/widetile.png"/>
<square310x310logo src="/largetile.png"/>
<TileColor>#ffffff</TileColor>
</tile></msapplication></browserconfig>

Строка <TileColor>#ffffff</TileColor> задает фоновый цвет. Тривиальные имена файлов изображений, их размеры и формат видно из кода. Менять ничего не нужно. Созданные .png-файлы – качнуть в корень сайта. Относительные пути к файлам прописаны в коде выше: в корень сайта – дорога у всех одна.

Значок тачскрин | Android Chrome

Подобно принципу декларирования (объявления) плиток сайта для Windows 8 и 10, тачиконки (имя, формат, размер, расположение) для тачскрина Android Chrome прописываются в файле manifest.json, расположенному в корне сайта и присоединенному к веб-странице в ее элементе <head> строкой:

<link rel="manifest" href="/manifest.json">;

Содержание (код) файла manifest.json:

{"name": "tehnopost",
"short_name": "tehno",
"icons": [{
"src": "\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},{
"src": "\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},{
"src": "\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},{
"src": "\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},{
"src": "\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},{
"src": "\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}]}

В приведенном коде manifest.json позволительно менять полное и короткое наименование сайта (name и short_name), отображаемое девайсом поверх закрепленной иконки на тачскрине. Соответственно, tehnopost и tehno. Размеры изображений стандартно-принятые (sizes), формат – PNG, расположение картинок и самого manifest.json – в корень сайта. Делаем, заливаем, присоединяем. Если очень хочется заморочиться темой и «запихать» картинки тач-иконок в отдельную папку на сервере – кладем в любое место и прописываем пути-дороги. Пусть Андроид бродит-ищет.

Подобно browserconfig.xml, manifest.json создается в обычном блокноте простым копированием кода «отседава», с последующим сохранением и переименованием полученного файла .txt в manifest.json.

Favicon сайта | Mac OS X El Capitan Safari

В Mac OS, разработчик выдвинул условия: формат картинки – файл SVG, черно-белый цвет, отсутствие градиентов и теней, плюс указание в ссылке color-маски для закрашивания значка при наведении (касании). Иными словами, значок для Mac OS X El Capitan Safari вырисовывается «черным по белому», по-пиксельно. Файл с такими признаками, естесстно – в корень сайта, с обязательным его объявлением в <head>, с указанием атрибута rel="mask-icon":

<link color="#e52038" rel="mask-icon" href="/safari-pinned-tab.svg">

где, color="#e52038" – color-маска значка при наведении, цвет которого передается также, и в touch-bar девайса. О размере заливаемой картинки и атрибуте sizes – ничего внятного в Сети не нашел, за сим – присоединил готовый favicon.svg размером 120х120 px, залитый для сервисов Яндекса.

favicon и touch-icon | Минимально-необходимый код Контроль полученного результата размещения фавиконок: realfavicongenerator.net – бесплатный онлайн-сервис, подсвечивает ошибки и комментирует их. В поле «Check your favicon» вводим адрес сайта или веб-страницы и жмем кнопку «Check».

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

Это важно!

Похожие новости

Добавить комментарий

Автору будет очень приятно узнать обратную связь о своей новости.

Кликните на изображение чтобы обновить код, если он неразборчив

Комментариев 0