Вроде бы такая мелочь, что и особо рассказывать нечего, но все таки есть вопросы по этой теме. Раскрываем тему.

Именно иконки помогают найти нужную вкладку или привлечь внимание посетителей из поисковиков.

Как подключить favicon?

Универсальный вариант

Этот вариант будет работать во всех браузерах:

<link rel="shortcut icon" href="/favicon.ico" />

Файл

.ico

должен быть размером 16×16 или 32×32.

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

<!-- Все браузеры, но IE 9.0+ -->
<link rel="icon" type="image/vnd.microsoft.icon" href="/image.ico" />

<!-- Все браузеры, но IE 9.0+ -->
<link rel="icon" type="image/x-icon" href="/image.ico" />

<!-- Все браузеры, но IE 11.0+ -->
<link rel="icon" href="/image.ico" />

<!-- Все браузеры, но IE 11.0+ -->
<link rel="icon" type="image/gif" href="/image.gif" />

<!-- Все браузеры, но IE 11.0+ -->
<link rel="icon" type="image/png" href="/image.png" />

Внимательные читатели заметили, что

shortcut

в

rel

параметре присутствует только для IE ниже 9 версии.

Кроме того

Зачастую, браузеры ищут иконку в корне сайта и без объявления ее в коде страницы. Таким образом, если вы не указывали

favicon.ico

через html-тег, но она находится в корне сайта, то браузеры будут все равно ее отображать.

Поддержка форматов иконок

Mozilla Firefox:

.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG;

Google Chrome:

.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG,


.APNG


;

Apple Safari:

.ICO, .PNG, .GIF,


Анимированный .GIF


, .JPEG,


.APNG;


;

Internet Explorer:

.ICO, .PNG*, .GIF*,


Анимированный .GIF

,

.JPEG

,

.APNG


;

Opera*:

.ICO, .PNG, .GIF, Анимированный .GIF, .JPEG, .APNG***;

——————

* — Только с версии 11.0

** — Только с версии 7.0

*** — Только с версии 9.5

Другие размеры и иконки для смартфонов

Для устройств от Apple разработчики предлагают создать несколько иконок разного формата. Одни будут использоваться в iPhone, iPad, другие в iMac и MacBook. Ну и конечно, высокое разрешение иконок нужно для корректного отображения на Retina дисплеях:

<link rel="apple-touch-icon" href="/icons/apple-icon-57.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180.png">

А для телефонов под управлением Android можно указывать иконки в разрешениях 120×120 или 192×192:

<link rel="icon" sizes="192x192" href="/icons/icon-192.png">
<link rel="icon" sizes="128x128" href="/icons/icon-128.png">

Готовый шаблон

Вот такой готовый код для быстрой вставки favicon на сайт для всех устройств:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

<link rel="apple-touch-icon" href="/icons/apple-icon-57.png">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180.png">

<link rel="icon" sizes="192x192" href="/icons/icon-192.png">
<link rel="icon" sizes="128x128" href="/icons/icon-128.png">

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

Уделяйте внимание мелочам! Именно из мелочей складывается общее ощущение и восприятие.