Как настроить корректное отображение favicon сайта на различных устройствах

Как настроить корректное отображение favicon сайта на различных устройствах

Favicon (favorite icon) — маленький значок (обычно логотип или часть логотипа), который отображается во вкладке браузера рядом с заголовком (title) страницы. На сегодняшний день у этой иконки существует еще множество предназначений. В этой статье мы рассмотрим основные из них. А также пройдемся по основным форматам и типам favicon.

Для чего нужен Favicon?

    • Иконка на вкладке браузера
      Сегодня абсолютный стандарт использовать favicon рядом с заголовком страницы во вкладке браузера. Такая простая иконка favicon есть практически у всех сайтов.

    • Иконка в закладках браузера
      Если сохранить страницу сайта в закладках браузера, то рядом с названием сохраняемой закладки будет также отображаться и иконка favicon. Также этот значок будет отображаться в настройках браузера в разделах «Закладки» и «История».

    • Иконка в поисковой выдаче
      Поисковые системы Яндекс и Google выводят favicon слева от ссылки на страницу сайта. Это важный фактор, т.к. на сайты, имеющие favicon, кликают чаще, чем на сайты без favicon.

  • Иконка на рабочем столе компьютера
    Если сохранить страницу сайта на свой компьютер, то будет создана иконка, которую можно, например, вынести на рабочий стол или панель быстрого доступа Windows. Если эта иконка будет представлять собой логотип, то это повысит лояльность к вашему бренду, а также его узнаваемость.

  • Иконка в рейтингах и на стартовых страницах
    При регистрации сайта в различных внешних рейтингах и сервисах, рядом с названием и ссылкой часто также отображается и иконка favicon. Наличие favicon также выгодно выделяет сайт на фоне остальных.

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

Какой должен быть формат файла Favicon?

Изначально, придуманный компанией Майкрасофт формат .ico был стандартом и использовался как в ранних версиях Internet Explorer. Его также поддерживали и считали стандартом и другие браузеры.

Однако на данный момент гораздо чаще для этих целей используются файлы формата .png, что поддерживается стандартом разметки HTML5.

Формат .ico всё еще поддерживается основными браузерами, но считается устаревшим, поэтому всё же рекомендуется использовать для favicon файлы формата .png.

Какой должен быть размер Favicon?

Исторически сложились три стандартных формата favicon: 16х16, 32х32, 48х48. Однако в последние годы веб-платформы развились очень разносторонне, и на сегодняшний день включают в себя смартфоны, планшеты, телевизоры. На всех этих устройствах используются различные браузеры для доступа в интернет. Исходя из этого начали появляться и другие форматы favicon, такие как 96х96, 128х128, 196х196 и некоторые другие.

Очень сильно повлияло на стандарты размеров favicon появление первых iPhone и знаменитых retina-экранов от Apple с удвоенной плотностью пикселей, диктующих свои размеры изображений для favicon.

Проанализировав все возможные варианты устройств и мест использования favicon мы определили следующий набор иконок, которые обязательно должны присутствовать на сайте (значения указаны в пикселях):

Для устройств Apple:

57х57 – iPhone (iOS 6 и ниже, экран Classic)

60x60 – iPhone (iOS 7, экран Classic)

72х72 – iPad (iOS 6 и ниже, экран Classic)

76х76 – iPad (iOS 7, экран Classic)

114х114 – iPhone (iOS 6 и ниже, экран Retina)

120x120 – iPhone (iOS 7, экран Retina)

144х144 – iPad (iOS 6 и ниже, экран Retina)

152x152 – iPad (iOS 7, экран Retina)

180x180 – iPhone (iOS 8 и выше, экран 6 Plus)

Для устройств на Windows:

70х70 – закладки в Edge и плитка в Пуск (размер: Мелкий)

150х150 – плитка в Пуск (размер: Средний)

310х150 – плитка в Пуск (размер: Широкий)

310х310 – плитка в Пуск (размер: Крупный)

Остальные случаи:

16х16 – для закладок браузеров

32х32 – для закладок на панели задач

96х96 – для ярлыков на рабочем столе

Например, на нашем сайте qmedia.by это выглядит следующим образом:

Читайте также
Новые рекламные возможности для магазинов, салонов красоты, сетевых ресторанов и других бизнес-тематик.
Вы потратили время, деньги и силы (нервы), чтобы разработать удобный интернет-магазин, заполнить карточки товаров, заключить договоры с поставщиками, решить юридические вопросы и другие работы. Но ваши усилия могут стать напрасными, если...