На сегодняшний день favicon?—?это не просто значок 16x16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования favicon, о которых я расскажу в данной статье.
Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.
Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.
Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.
Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.
Как я уже сказала, формат ICO сегодня уже можно считать устаревшим, но значит ли это, что от него нужно срочно избавиться? Ответ, как всегда, неоднозначный. Есть случаи, когда формат ICO ещё может сослужить вам хорошую службу. Приведу несколько примеров оправданного использования фавикона в формате ICO в разных операционных системах и поговорим об альтернативах.
Начнём, пожалуй, с Windows.
До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.
Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.
Сначала давайте рассмотрим первый способ.
Определение фавикона в устройствах Windows с помощью метаданных в <head>:
Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:
Можно указать цвет фона плитки:
Можно указать имя закрепленного сайта:
Если нет этих метаданных, то в качестве имени используется значение в <title>; страницы.
Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:
Можно даже определить адрес документа:
И тогда независимо от того, какую страницу пользователь перетащил на панель задач, закрепленный сайт будет открывать указанный адрес.
Есть ещё много других метаданных, которые, например, определяют цвета кнопок навигации в браузере или делают плитки динамичными.
Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.
Вызов файла в <head>:
browserconfig.xml
square70x70logo, square150x150logo, wide310x150logo, square310x310logo?—?элементы, внутри которых объявляются изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310x150 исходное изображение имеет размер 558x270.
Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.
Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
С помощью платформы уведомлений Windows сайт может за один раз показывать на плитке до пяти текстовых сообщений или сообщений с изображениями, которые циклически сменяют друг друга. Не будем подробно останавливаться на этих xml-файлах уведомлений. Существует множество шаблонов живых плиток, вот один из них:
То, что написано в кавычках в атрибуте template ?— ?название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.
Подробнее о шаблонах можно узнать на официальном сайте.
В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.
Safari?—?вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.
Если не указывать эту иконку, то браузер будет отображать первую букву домена нашего сайта.
Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.
Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.
Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.
Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы?—?ее скриншот.
Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.
Подробнее прочитать про актуальные размеры для устройств iOS можно на официальном сайте.
Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.
Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.
В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:
Кстати, можно даже установить стиль строки состояния для веб-приложения:
Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.
Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.
Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:
Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;
Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;
Ключ icons?—?определяет массив объектов иконок, может принимать три значения: sizes, src, type;
Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.
Задать цвет можно и через <head>, добавив следующий мета-тег:
Ключ background_color определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;
Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.
Вызов в <head>:
В манифесте есть ещё много других потрясающих параметров, которые сделают из веб-сайта настоящее приложение, но они уже не относятся к нашей теме.
В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.
Есть пакеты для сборки и для Gulp, и для Grunt.
Главное помнить, что сегодня favicon?—?это больше, чем иконка в адресной строке и закладке браузера.
В каком формате должен быть фавикон?
Раньше основным форматом фавикона был формат ICO. Его главная особенность заключалась в том, что файл такого формата мог хранить в себе несколько вариантов размеров иконки. Сейчас формат ICO считается устаревшим, на смену ему пришёл формат PNG с новыми возможностями по взаимодействию с иконкой.
Помимо PNG, поддерживается формат SVG. Но у него, к сожалению, невысокая поддержка на данный момент. Однако этот формат идеально подходит для фавиконов, его использование намного бы упростило нам жизнь. Будем надеяться, что ситуация скоро изменится.
Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.
HTML5 и атрибут sizes
Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.
<link rel="icon" sizes="<ширина>X<высота>">
<link rel="icon" sizes="<ширина1>X<высота1> <ширина2>X<высота2>* | any">
Пора ли отправлять ICO на свалку?
Как я уже сказала, формат ICO сегодня уже можно считать устаревшим, но значит ли это, что от него нужно срочно избавиться? Ответ, как всегда, неоднозначный. Есть случаи, когда формат ICO ещё может сослужить вам хорошую службу. Приведу несколько примеров оправданного использования фавикона в формате ICO в разных операционных системах и поговорим об альтернативах.
Windows
Начнём, пожалуй, с Windows.
До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.
Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.
Сначала давайте рассмотрим первый способ.
Определение фавикона в устройствах Windows с помощью метаданных в <head>:
<meta name="msapplication-TileImage" content="images\tileimage.jpg">
Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:
<meta name="msapplication-square70x70logo" content="images/smalltile.png">
<meta name="msapplication-square150x150logo" content="images/mediumtile.png">
<meta name="msapplication-wide310x150logo" content="images/widetile.png">
<meta name="msapplication-square310x310logo" content="images/largetile.png">
Можно указать цвет фона плитки:
<meta name="msapplication-TileColor" content="#009900">
Можно указать имя закрепленного сайта:
<meta name="application-name" content="Rick and Morty">
Если нет этих метаданных, то в качестве имени используется значение в <title>; страницы.
Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:
<meta name="msapplication-tooltip" content="Title">
Можно даже определить адрес документа:
<meta name="msapplication-starturl" content="./">
И тогда независимо от того, какую страницу пользователь перетащил на панель задач, закрепленный сайт будет открывать указанный адрес.
Есть ещё много других метаданных, которые, например, определяют цвета кнопок навигации в браузере или делают плитки динамичными.
Начиная с IE11 Windows 8.1 и Edge Windows 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="/img/favicons/mstile-70x70.png"/>
<square150x150logo src="/img/favicons/mstile-150x150.png"/>
<square310x310logo src="/img/favicons/mstile-310x310.png"/>
<wide310x150logo src="/img/favicons/mstile-310x150.png"/>
<TileColor>#000000</TileColor>
</tile>
<notification>
<polling-uri src="notifications/contoso1.xml"/>
<polling-uri2 src="notifications/contoso2.xml"/>
<polling-uri3 src="notifications/contoso3.xml"/>
<frequency>30</frequency>
<cycle>1</cycle>
</notification>
</msapplication>
</browserconfig>
square70x70logo, square150x150logo, wide310x150logo, square310x310logo?—?элементы, внутри которых объявляются изображения для различных размеров плитки.
Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310x150 исходное изображение имеет размер 558x270.
Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.
Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.
Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.
С помощью платформы уведомлений Windows сайт может за один раз показывать на плитке до пяти текстовых сообщений или сообщений с изображениями, которые циклически сменяют друг друга. Не будем подробно останавливаться на этих xml-файлах уведомлений. Существует множество шаблонов живых плиток, вот один из них:
<tile>
<visual lang="en-US" version="2">
<binding template="TileWide310x150ImageAndText01"
<image id="1" src="images/image1.png" alt="alt text"/>
<text id="1">Text Field 1</text>
</binding>
</visual>
</tile>
То, что написано в кавычках в атрибуте template ?— ?название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.
Подробнее о шаблонах можно узнать на официальном сайте.
Mac OS
В Mac OS особо не разгуляешься, к сожалению. Если сохранить сайт на рабочий стол в Mac OS, то значок будет отображаться как скриншот страницы с html кодом. Просто так сайт приложением в Mac OS не сделать, но и не будем.
Safari?—?вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff">
Если не указывать эту иконку, то браузер будет отображать первую букву домена нашего сайта.
Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.
iOS
Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.
Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.
<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="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы?—?ее скриншот.
Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.
Подробнее прочитать про актуальные размеры для устройств iOS можно на официальном сайте.
Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.
Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.
В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:
<meta name = "apple-mobile-web-app-title" content = "AppTitle">
Кстати, можно даже установить стиль строки состояния для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.
Android
Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.
Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:
{
"name": "Rick and Morty",
"short_name": "Rick",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#b3adad",
"background_color": "#b3adad",
"display": "standalone"
}
Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;
Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;
Ключ icons?—?определяет массив объектов иконок, может принимать три значения: sizes, src, type;
Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.
Задать цвет можно и через <head>, добавив следующий мета-тег:
<meta name="theme-color" content="#9CC2CE">
Ключ background_color определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;
Ключ display определяет режим отображения веб-приложения. Например, значение standalone, которое мы указали, позволило открывать нам сайт как приложение.
Вызов в <head>:
<link rel="manifest" href="manifest.json">
В манифесте есть ещё много других потрясающих параметров, которые сделают из веб-сайта настоящее приложение, но они уже не относятся к нашей теме.
Автоматизация
В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.
Есть пакеты для сборки и для Gulp, и для Grunt.
Главное помнить, что сегодня favicon?—?это больше, чем иконка в адресной строке и закладке браузера.
Поделиться с друзьями
Комментарии (24)
WorksIsGone
09.06.2017 14:45-2Статья не полная без /apple-touch-icon.png и ко.
OlBol
09.06.2017 15:03+5Я же описала apple-touch-icon.png. Можно поподробнее, что бы ты хотел еще видеть в статье?)
Denai
09.06.2017 14:48+1Не видел mstile, которые бы реально работали как задумано.
Не нашёл в посте указаний на то какой именно файл из перечисленных будет использоваться как favicon в браузере (они же не обязательно все одинаковые)
Цвета фона — они произвольные? Практика подсказывает что нет.OlBol
09.06.2017 15:08У меня все работало как задумано)
Про второй пункт: действительно, можно это добавить. Спасибо.
А что не так с цветами? Какие проблемы возникали?
daggert
09.06.2017 17:48> Не видел mstile, которые бы реально работали как задумано.
Я вот с ними сейчас борюсь. Не могу заставить тайл быть широким и большим, только мелкий и средний…
>Цвета фона — они произвольные? Практика подсказывает что нет.
#HEX? У меня успешно установился кастомный цвет.
copal
09.06.2017 15:48-1Если честно, то статья является лучшей, которую я читал на хабре (в моей ветки) за очень долгое время.
И не смотря на то, что её уровень сравним с начальным, она легко читается и очень информативна.OlBol
09.06.2017 15:54Спасибо, мне очень приятно!
А про уровень верно подмечено: я пока только junior и это моя первая статья)
sumanai
09.06.2017 16:54Отсутствие стандартизации удручает. В итоге распухнет раза в три, если добавить строки под все форматы.
И непонятно, зачем добавлять строки для apple-touch-icon-precomposed.png, если айфон с андроидом всё равно лезут в корень за ними при отсутствии этих инструкций. Подобная самостоятельность даже немного раздражает- лезут куда не просят.OlBol
09.06.2017 17:19Да, но это в том случае, если иконка лежит в корне. А если нет? Я хочу быть уверена, что у меня все будет работать так, как задумано.
И у меня своя файловая структура, иконки у меня не в корне лежат. В корне и без них куча других важных файлов.
slavae
09.06.2017 17:17-2Самый забавный способ работы с favicon я узнал у одного форумного знакомого. Это установка своей иконки на чужой сайт через JS на GreaseMonkey. В данном случае функция ставит картинку Cына человеческого Магрита )
function addFavicon() { var head = document.getElementsByTagName("HEAD")[0]; var link = document.createElement("LINK"); link.href = "data:image/x-icon;base64," + "AAABAAIAEBAAAAEACABoBQAAJgAAABAQAAABACAAaAQAAI4FAAAoAAAAEAAA" + "ACAAAAABAAgAAAAAAEABAAAAAAAAAAAAAAABAAAAAAAAAAAAAP///wBENwQA" + "nq+kAKOwpACcppcAoK+jAJekmQCerp4AmaGOAJOdgQCNmHgAmKiOAJiihgCb" + "n38AkZiAAJGcfQCWnIIAl56CAJ2nlACgqZwApK6fAKe0qgCxwLEAcndBAEtM" + "EwA8KAAAKRUAACELAACanZsAoaqXAI2ZfQCMl3YAjpRyAI+cfgCVpIsAlaGL" + "AJ+rmwCgq5YAhY9wAEdFEwA0GwwAJQQAACYAAAAkAAAANB0jAKawkQCPm4AA" + "k5+AAJWbfwCao4sAl6GIAJKZegCcoYYAnaWKAGJfQQAjAAAALgIIAMnNwACf" + "qJQAo6qgAKKvmACepIkAmaGDAJadfQCSmoEAqK2OAGBZQQBHoT8AOkkQAFA8" + "NwBARB0ANZI6ACeJIgC4zMIAt8OwAKiyqQCpuasAprKkAI6TbwCTmXYAn6J+" + "AFRGMgB2bU8AanVLADtwIgBgiFsASoRSAFOYVABWOzwAIAUAAHFtbACkr54A" + "lqaRAKezqQCWnHIAmp15AJedfgCosIgAWGKHAGCKzwAtdhEAUIJ3AEZdPwBN" + "fyYAMFxKAKizuACbp4EAlZ16AJejgwCmrpUAmJt4AJCZbgCSmXQAmJ1qAE9s" + "wwBxqYgAMYw1ADmMRABQpzIARViTAC8xlQB1enIAn6N2AJ6fdQCboYAAoauR" + "AKGkjwCcoH0AkZd2AJ2feABkfrEAbaulAFrAqwAio1QAKqNCAEaBHQAgK6YA" + "tbuSAJyeewCgpogAn6SCAKWvlQClr54AsbmuALG/sgC6xbgAeo+vAHuprQAe" + "nSUAK58zACyXFQBFei4AOD6YAMPJrQCutqIArbWkAKatmQCot6UArrWfAK20" + "rQCxu7EArL62ALK/qwBfh9oAVIZbADp5AAA6eBAAQ1umAHlxkwC7xakAt8Cy" + "ALO6pwCxvrAAtryqAJWhhwCmr5wAs7qqAKu0pACjr6MAXXKaAFB51ACBqPAA" + "QWXQAB44jQCCfIAAsrifAKitlgCjsJcAqK+ZAKu0mwCeqI8AnKmTAKOtoQCq" + "tacAiJaAAIGBbQCAlckALk6iABcddQCJg6IAW19AAIuLdQClrJQAkpl5AKGn" + "iwChpYYAusKvALLArQDAzsYAm6iZAEtICQBkYlcA6P/vALS8zQDR7e8AxdnU" + "AExLLQAnEAAAdHNlALW/sACus5gAsLaZAKy7sQCDgWkAUU8iADkqAgBRURoA" + "QTQbANv38wBudb0Ag5CzAMvm8AAqHgAARjcTADUjAAA/NQ8Af3xrALvGtQBJ" + "RR0AWlgmAEU4FQBQTCEAPCwAALzP0wCBiscAkqS/ALPNyQAvFgAASUYVAEEs" + "EwBSSxoAUk0TADo1AgBwjIQAEEREAALv8PHy8/T19vf4+fr7/P3f4OHi4+Tl" + "5ufo6err7O3uz9DR0tPU1dbX2Nna29zd3r/AwcLDxMXGx8jJysvMzc6vsLGy" + "s7S1tre4ubq7vL2+n6ChoqOkpaanqKmqq6ytro+QkZKTlJWWl5iZmpucnZ5/" + "gIGCg4SFhoeIiYqLjI2Ob3BxcnN0dXZ3eHl6e3x9fl9gYWJjZGVmZ2hpamts" + "bW5PUFFSU1RVVldYWVpbXF1eP0BBQkNERUZHSElKS0xNTjM0NTY3OCssLCw5" + "Ojs8PT4jJCUmJygpKissLS4vMDEyExQVFhcYGRobHB0eHyAhIgMEBQYHCAkK" + "CwwNDg8QERIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" + "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKAAAABAAAAAgAAAAAQAgAAAA" + "AABABAAAAAAAAAAAAAAAAAAAAAAAAEQ3BP9JRR3/Wlgm/0U4Ff9QTCH/PCwA" + "/7zP0/+Bisf/kqS//7PNyf8vFgD/SUYV/0EsE/9SSxr/Uk0T/zo1Av+su7H/" + "g4Fp/1FPIv85KgL/UVEa/0E0G//b9/P/bnW9/4OQs//L5vD/Kh4A/0Y3E/81" + "IwD/PzUP/398a/+7xrX/usKv/7LArf/Azsb/m6iZ/0tICf9kYlf/6P/v/7S8" + "zf/R7e//xdnU/0xLLf8nEAD/dHNl/7W/sP+us5j/sLaZ/56oj/+cqZP/o62h" + "/6q1p/+IloD/gYFt/4CVyf8uTqL/Fx11/4mDov9bX0D/i4t1/6WslP+SmXn/" + "oaeL/6Glhv+VoYf/pq+c/7O6qv+rtKT/o6+j/11ymv9QedT/gajw/0Fl0P8e" + "OI3/gnyA/7K4n/+orZb/o7CX/6ivmf+rtJv/rrWf/620rf+xu7H/rL62/7K/" + "q/9fh9r/VIZb/zp5AP86eBD/Q1um/3lxk/+7xan/t8Cy/7O6p/+xvrD/tryq" + "/6Wvnv+xua7/sb+y/7rFuP96j6//e6mt/x6dJf8rnzP/LJcV/0V6Lv84Ppj/" + "w8mt/662ov+ttaT/pq2Z/6i3pf+hpI//nKB9/5GXdv+dn3j/ZH6x/22rpf9a" + "wKv/IqNU/yqjQv9GgR3/ICum/7W7kv+cnnv/oKaI/5+kgv+lr5X/mJt4/5CZ" + "bv+SmXT/mJ1q/09sw/9xqYj/MYw1/zmMRP9QpzL/RViT/y8xlf91enL/n6N2" + "/56fdf+boYD/oauR/5accv+anXn/l51+/6iwiP9YYof/YIrP/y12Ef9Qgnf/" + "Rl0//01/Jv8wXEr/qLO4/5ungf+VnXr/l6OD/6aulf+Ok2//k5l2/5+ifv9U" + "RjL/dm1P/2p1S/87cCL/YIhb/0qEUv9TmFT/Vjs8/yAFAP9xbWz/pK+e/5am" + "kf+ns6n/maGD/5adff+SmoH/qK2O/2BZQf9HoT//OkkQ/1A8N/9ARB3/NZI6" + "/yeJIv+4zML/t8Ow/6iyqf+puav/prKk/5ehiP+SmXr/nKGG/52liv9iX0H/" + "IwAA/yYAAP8kAAD/JAAA/yQAAP8uAgj/yc3A/5+olP+jqqD/oq+Y/56kif+V" + "pIv/laGL/5+rm/+gq5b/hY9w/0dFE/80Gwz/JQQA/yYAAP8kAAD/NB0j/6aw" + "kf+Pm4D/k5+A/5Wbf/+ao4v/naeU/6CpnP+krp//p7Sq/7HAsf9yd0H/S0wT" + "/zwoAP8pFQD/IQsA/5qdm/+hqpf/jZl9/4yXdv+OlHL/j5x+/56vpP+jsKT/" + "nKaX/6Cvo/+XpJn/nq6e/5mhjv+TnYH/jZh4/5iojv+Yoob/m59//5GYgP+R" + "nH3/lpyC/5eegv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" + "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"; link.rel = "shortcut icon"; link.type = "image/x-icon"; head.appendChild(link); }OlBol
09.06.2017 17:21Хех, добавлять на сайт фавикон через JS? Очень необычно)
Psychosynthesis
09.06.2017 17:40+1Это скорее стилизация нужного сайта под желаемый вид с помощью расширения.
slavae
09.06.2017 17:54Долгое время на одном популярном сайте не было favicon, может у админа руки не доходили. Тогда один из пользователей написал скрипт, одной из функций которого было и это )
darkdaskin
09.06.2017 20:54Некоторые сайты подобным образом дорисовывают туда разную информацию, например, количество уведомлений. Пример кода.
DenimTornado
10.06.2017 00:21Хочется спросить, why not?) Во-первых, динамика, можно выбирать иконку под разные ОСи и девайсы, во-вторых, можно не держать статику, а просто в коде base64.
Psychosynthesis
09.06.2017 17:38"theme_color": "#b3adad",
"background_color": "#b3adad",
Честно говоря, так и не смог понять на что они влияют. Я так понимаю, будет заметно если отключить «Standalone». По крайней мере для моего сайта разницы не видно особой…
horevivan
10.06.2017 09:24+1Хотелось бы добавить, что *.ico используется как системный значёк в Windows. Т.е. для любой программы, кастомной директории или кастомного ярлыка вам понадобиться .ico.
Мы в приложении для Windows добавили конвертацию наших иконок в *.ico формат. Где-то 60-70% использования данной фичи приходится на иконки для приложений и директорий. Остальное для favicon.ico.
firstL
10.06.2017 09:24http://realfavicongenerator.net/
Этот сервис справляется с задачей? Устарел или нет?
Вроде у них есть и npm пакет.
alexantr
12.06.2017 21:34Сам использовал несколько раз. Результат очень хороший.
Генерирует правильные картинки для плиток Win 10 — с отступами. Только нужно выбрать полный набор размеров: «Small, square icon», «Medium, square icon», «Big, square icon» и «Rectangular icon».
По умолчанию генерирует архив с минимальным набором иконок под последние версии ОС и браузеров.
KYuri
Познавательно, спасибо.