Xiper

Подключить favicon

Автор: Евгений Рыжков Дата публикации:

Задача

Подключить кроссбраузерно и по международным стандартам favicon.

Теория

Favicon (сокращенно от FAVorites ICON — иконка для избранного) — значок веб сайта, картинка, помогающая лучше идентифицировать сайт. Отображается браузером:

  • в адресной строке (перед URL страницы)
    favicon в адресной строке
  • в избранном (рядом с закладкой)
    favicon в избранном
  • во вкладках
    favicon во вкладках браузера
  • в результатах поиска некоторых поисковых систем (например, Яндекс)
    favicon в результатах поиска
  • а также может быть использован в качестве значка на рабочем столе
    favicon на рабочем столе

Основной формат для favicon — ICO. Такой формат поймут все современные браузеры. Более новые и "продвинутые" воспринимают форматы GIF (включая анимированные GIF), PNG, JPEG and APNG.

Размеры и цвета favicon — 16x16 пикселей, 256 цветов или TrueColor. Эта картинка будет отображаться рядом с адресной строкой, в закладках, табах и результатах поиска. Допускается использование нескольких картинок для favicon разных размеров (32х32, 48х48) и форматов, для нормального отображения иконки и на рабочем столе.

Размещение favicon

Ранее можно было favicon.ico разместить только в корне сайта. При этом не обязтельно было подключать favicon в HTML коде, браузер сам находил значок. Сейчас же favicon можно расположить где угодно в файловой архитекутре, указав к нему путь.

Заметка

Использование резервирования расположения на веб сайтах протеворечит архитектуре WWW, сайт лишается гибкости.

Подключение favicon

Подключение производится в секции head, посредством тега <link>.

<head profile="https://www.w3.org/2005/10/profile">
[…]
<link rel="icon" type="image/vnd.microsoft.icon" href="path-to/favicon.ico">
[…]
</head>

Результат. По рекомендациям W3C тегу head добавляем атрибут profile, у которого есть ссылка на документ, поясняющий назначение атрибута rel. Документ https://www.w3.org/2005/10/profile вариант такого пояснения. Можно использовать его, а можно создать свой.

Заметки
  • В году ICO формат был зарегистрирован в IANA как MIME тип image/vnd.microsoft.icon. С тех пор тип image/x-icon является не корректным.
  • IE отобразит значок в адресной строке только после добавления сайта в избранное.
  • если зашли на сайт, где не было favicon, затем его подключили, чтобы увидеть иконку нужно обновить кеш (иногда требуется перезапустить браузер)
Примеры подключения favicon различных форматов
<link rel="icon" type="image/vnd.microsoft.icon" href="path-to/favicon.ico">
<link rel="icon" type="image/png" href="path-to/name-favicon-ico.png">
<link rel="icon" type="image/gif" href="path-to/name-gif-file.gif">
Заметка

В HTML требуется указывать полный путь к файлу favicon, в XHML можно использовать относительный.

Возможен еще следующий вариант подключения, предназначенный изначально для IE:

<link rel="SHORTCUT ICON" type="image/x-icon" href="path-to/favicon.ico">

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

Заметка

Многие используют двойное подключение favicon двумя способами, чтобы наверняка во всех браузерах отобразился:

<link rel="icon" type="image/vnd.microsoft.icon" href="path-to/favicon.ico">
<link rel="SHORTCUT ICON" href="path-to/favicon.ico">

Данный фрагмент хоть и не рекомендован, но пока проходит валидацию.

Полезное

  • генератор favicon
  • генератор genfavicon
  • Favicon.ico FAQ

Материалы

  • W3C - how to add a favicon
  • en.wikipedia
  • ru.wikipedia
  • msdn - how to add a favicon