инфохаб «Selection»

Сосредоточьтесь на главном

инфохаб «Selection»

Иконки

Как создать набор иконок favicon для всех устройств

Инструкция по созданию полный набора иконок favicon для любых устройств.

Иконка веб-сайта — важная деталь сайта.

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

 

Какие вообще бывают варианты favicon.

 

Favicon для десктопа
Практически все версии десктопных браузеров опираются на иконки формата 16×16, 32×32 и 48×48 в формате .png или .ico (для старых версий IE только .ico).

 

Favicon для Android
Когда речь касается мобильных устройств, встает важный вопрос разрешения экрана. Как известно, все современный смартфоны имеют параметр плотности пикселей на дюйм - PPI, а это значит иконка одного и того разрешения будет выглядеть по-разному на экранах с различной плотностью. Поэтому браузеры под андроид используют целый ряд различных разрешений для иконки:

36×36 – для экранов с коэффициентом плотности 0.75
48×48 – для экранов с коэффициентом плотности 1
72×72 – для экранов с коэффициентом плотности 1.5
96×96 – для экранов с коэффициентом плотности 2
144×144 – для экранов с коэффициентом плотности 3
192×192 – для экранов с коэффициентом плотности 4

Андроид воспринимает иконки в формате .png, а так же опирается на файл manifest.json который может содержать в себе ряд различных косметических параметров. В случае отсутствия возможных вариантов иконки под андроид, система опирается на иконки apple-touch-icon.

 

Favicon для мобильных устройств Apple

Как и в андроид, устройства Apple имеют различный PPI для разных устройств, в том числе так называемые Retina-экраны. Для разных версий разрешений экрана и версий ОС так же существует ряд различных вариантов иконок:

57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
152×152 – для iPad с ретина дисплеем и iOS версии 7.0
180×180 – для iPhone 6 Plus c iOS версии 8.0

Другие варианты favicon

Существуют также иные нестандартные объявления для иконок, например

IE10 под Windows 8 требует указания цвета фона
IE11 под Windows 8 и 10 принимает несколько различных вариантов иконок, а также параметров настройки опираясь на XML файл browserconfig.xml
Safari под Mac OS X El Capitan требует SVG иконку для закрепленных табов
96×96 – для Google TV
228×228 – для Opera Coast

 

Создание и настройка набора favicon

Существуют различные инструменты для создания и подключения этих разнообразных иконок.

Для тех, кто в своей front-end разработке использует таск-менеджеры такие как Grunt или Gulp, существуют специальные плагины.

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

 

Генератор фавикон для разных устройств realfavicongenerator.net

 

Онлайн-генератор позволяет на основе всего одной вашей картинки (желательный размер исходника не менее 260×260) создать иконку для вашего сайта для всех типов браузеров и устройств.

После загрузки иконки сразу можно увидеть результат обработки. Можно также задать цвет фона, который нужен для определенных устройств.

 

Описание работы с сервисом realfavicongenerator.net в видеоролике youtu.be/q_J2zkhHnCE

 

Подключение фавикон на сайте

После того, как мы настроили  фавикон на все устройства, можно заняться его генерацией.

Далее система нам предложит несколько вариантов подключения, в том числе, и привычный способ подключения через <head> в HTML коде страницы.

Нужно будет просто скачать получившийся архив и вставить код на сайт.

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

Для того, чтобы оценить корректность созданного онлайн фавикона, можно перейти по этой ссылке realfavicongenerator.net

 

Полезности:

Наберите в адресной строке, подставьте вместо site.ru свой домен и увидите, как поисковые системы воспринимают ваш фавикон

Яндекс: http://favicon.yandex.net/favicon/site.ru

Google: http://www.google.com/s2/favicons?domain=site.ru

 


Материалы

 Favicons, Touch Icons, Tile Icons и т. д. Что выбрать? Перевод статьи Филипа Бернарда

habrahabr.ru

 

 

selnew22

Инфохаб "Selection"
Ваш дружелюбный и опытный гид в мире информации 

 

              

Контакты

по вопросам сотрудничества и рекламы

in@infoselection.ru

по другим вопросам

of@infoselection.ru