tehnopost.info > site > favicon и touch-icon | Минимальные требования |
favicon и touch-icon | Минимальные требованияЗаморские специалисты различают favicon и touch-icon.
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> добавляем строку с описанием горячо любимого файла-иконки и пути к нему:
touch-icon iOS SafariМежду тегами <head></head> размещаем код линков объявления (присоединения) тач-иконок с обязательным атрибутом rel="apple-touch-icon":
Картинки указанного имени, формата и размера – залить в корень сайта. В противном (не рекомендуемом) случае – прописать в коде новый путь к ним. Имена файлов и формат (.png) – не изменять. apple-touch-icon.png – базовый файл сенсорной тач-иконки Apple. Имя, формат и размер определен разработчиком iOS Safari, заливать – исключительно в корень сайта. Секция touch-icon-base – обязательна к наличию на адаптивном сайте. Секция touch-icon-full – для заточенных и навороченных мобильных версий, в универсальных адаптивных шаблонах её присутствие не обязательно. tile (плитка) Windows 8 и 10Изображения для плиток Windows 8 и 10 и пути к ним объявлены (указаны) в конфигурационном файле browserconfig.xml, обязательно закачанного в корень сайта и подключенного мета-тегом в элементе <head> веб-страницы:
Простейшее и достаточное содержание browserconfig.xml:
Строка <TileColor>#ffffff</TileColor> задает фоновый цвет. Тривиальные имена файлов изображений, их размеры и формат видно из кода. Менять ничего не нужно. Созданные .png-файлы – качнуть в корень сайта. Относительные пути к файлам прописаны в коде выше: в корень сайта – дорога у всех одна. Значок тачскрин | Android ChromeПодобно принципу декларирования (объявления) плиток сайта для Windows 8 и 10, тачиконки (имя, формат, размер, расположение) для тачскрина Android Chrome прописываются в файле manifest.json, расположенному в корне сайта и присоединенному к веб-странице в ее элементе <head> строкой:
Содержание (код) файла manifest.json:
В приведенном коде 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":
где, color="#e52038" – color-маска значка при наведении, цвет которого передается также, и в touch-bar девайса. О размере заливаемой картинки и атрибуте sizes – ничего внятного в Сети не нашел, за сим – присоединил готовый favicon.svg размером 120х120 px, залитый для сервисов Яндекса. favicon и touch-icon | Минимально-необходимый код Контроль полученного результата размещения фавиконок: realfavicongenerator.net – бесплатный онлайн-сервис, подсвечивает ошибки и комментирует их. В поле «Check your favicon» вводим адрес сайта или веб-страницы и жмем кнопку «Check». В коде использованы относительное пути к файлам в корень сайта, имена и размеры изображений от разработчика. За сим, выложенный код – абсолютно идентичен для всех сайтов, независимо от движка, домена и протокола. Распечатано на сайте tehnopost.info |