САЙТЫ ДЛЯ БИЗНЕСА,
WEB-СЕРВИСЫ HIGHLOAD-КЛАССА
Минск
+375 (29) 3-999-109
+375 (33) 3-753-154

Создаем favicon вашего сайта для всех типов устройств

Для начала давайте разберемся, что же такое Favikon.

Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками) — значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, в вкладках и в других элементах интерфейса. Однако зачастую о пресловутой favicon мы задумываемся в самый последний момент и вставляем строчку link тега всего с одним вариантом иконки. Иногда считаем достаточным положить файл favicon в корень сайта, ведь современный браузер в силах самостоятельно найти и подключить вашу иконку. А иногда забываем о favicon вовсе.

В свою очередь favicon не так прост как кажется и имеет не один вариант подключения, отображения и параметров. И если с десктопными браузерами все просто, то для смартфонов иконка может содержать массу различных параметров и размеров. А ведь существуют и совсем экзотические варианты вроде Google TV и т.д. Давайте попробуем разобраться какие вообще бывают варианты 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) создать иконку для вашего сайта для всех типов браузеров и устройств.

Создаем favicon

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

favicon

На вкладке настройки под iOS мы можем указать цвет фона для иконки, а так же указать размер отступов внутри области иконки. Вкладка Dedicated picture позволяет загрузить другой вариант иконки для конкретного типа устройства (аналогично для Android, Windows и Mac OS).

Под андроид настройки немного поинтересней. Можно как и в версии iOS указать цвет фона и отступы, также есть вариант прозрачного фона с фирменной тенью всех стандартных иконок этой ОС. Есть возможность указать конкретное имя приложения. Во вкладке Options мы можем указать URL, на который будет вести наше приложение.

Для закрепленных вкладок в Safari 9 под Mac OS X El Capitan используется новый вариант с svg иконками.

С плиточной системой Windows все немного сложнее. Тут указание цвета фона строго обязательно, а цвет логотипа в большинстве случаев лучше выбрать белый.

favicon

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

Внедрение в шаблон

После установки всех настроек под свои требования, генерируем иконки (нажимаем на кнопку Generate your Favicons and HTML code). В появившемся окне мы увидим несколько вариантов подключения иконок. Чтобы подключить иконки привычным способом в файл HTML, достаточно скачать предложенный архив и вставить специально сгенерированный код между тегами head вашего сайта.

Проверить работоспособоность ваших Favicon можно на том же сайте. На главной странице есть пункт:

favicon

Вводим адрес вашего сайта (доменное имя) и нажимаем на кнопку Check Favicon.

P.S.

Если вы хотите узнать как видят favicon вашего сайта поисковики Яндекс и Google, можно воспользоваться специальными сервисами:

  • Яндекс: http://favicon.yandex.net/favicon/mydomain.com
  • Google: http://www.google.com/s2/favicons?domain=mydomain.com

Где mydomain.com – домен вашего сайта.

Поделиться с друзьями
Facebook
Vkontakte
Twitter
Twitter