Шпаргалка по фавикону

Что такое фавикон

FAVorite ICON — (с англ.) любимая иконка, значок для избранного.

Фавикон — это иконка сайта, которая отображается на вкладке браузера вместе с названием страницы, а также в результатах поиска Яндекс, в Google — нет: Фавикон на вкладке браузера и в поиске Яндекс

Область использования фавикона не ограничивается браузерами и поисковыми системами (не только Яндекс). В общем смысле он играет роль графического идентификатора проекта / ресурса.

Характеристики фавикона

Фавикон традиционно располагается в корне сайта и имеет:
имя — favicon;
формат — ico;
размер — 16×16 px.

«традиционно» — не значит обязательно (см. ниже); но по традиции, в большинстве случаев, делается именно так.

Создание, поиск и конвертация фавиконов

Программы, работающие с форматом ico: GIMP.

Онлайн сервисы: XIconEditor.Com (создание и конвертация), FindIcons.Com (поиск и конвертация).

Установка фавикона на сайт

Для установки готового (имеющего соответствующие имя и формат) фавикона на сайт, нужно просто загрузить его в корень проекта, а затем несколько раз обновить страницу в браузере.

Общий адрес фавиконов большинства ресурсов выглядит так: протокол://домен/favicon.ico (http://w3.org/favicon.ico)

Фавикон не отображается / обновляется

  1. Если после установки фавикона на сайт он не появился / обновился, значит нужно очистить кэш текущей страницы. Это делается с помощью комбинации клавиш Ctrl+F5. Данная комбинация обновляет страницу вместе с кэшированными данными. Работает она во всех популярных браузерах.
  2. Если очистка кэша не помогла, значит нужно убедиться в правильности расположения фавикона, открыв его через адресную строку браузера: протокол://домен/favicon.ico Если фавикон открылся, но предыдущий, значит нужно обновить само изображение, открытое в обозревателе, с помощью всё той же комбинации клавиш Ctrl+F5. Если же фавикон не открылся или обновление изображения не помогло, значит иконка находится не в корне проекта, а где-то в другом месте; поэтому её нужно переместить или закачать заново куда следует.
  3. Если выполнение описанных выше действий не привело к ожидаемым результатам, то остаётся только очистить кэш браузера «вручную» и фавикон точно должен появиться / обновиться, так как иначе что-то сделано не так, как указано выше.

Другое место расположения фавикона

Фавикон может располагаться не только в корне сайта, но и в любой другой папке, и даже на другом ресурсе. В этом случае в HTML-код страницы, между <head> и </head>, нужно добавить следующую строку:

<link rel="icon" type="image/x-icon" href="путь+к+фавикону">
rel="icon"
атрибут, который определяет отношения между текущим документом и файлом, на который делается ссылка (это нужно для того, чтобы браузер и поисковый робот правильно использовали последний); в данном случае его значение означает, что ссылка указывает на иконку сайта.
type="image/x-icon"
MIME-тип — изображение в формате ico.
href="путь+к+фавикону"
абсолютная или относительная ссылка на файл с фавиконом.

Другой формат фавикона

Вместо формата ico можно использовать фавикон формата gif или png. В этом случае, в коде выше, нужно изменить значение атрибута type (MIME-тип) на image/gif или image/png соответственно:

<link rel="icon" type="image/gif" href="путь+к+gif-фавикону">
<link rel="icon" type="image/png" href="путь+к+png-фавикону">

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

Для фавикона с именем favicon в формате ico, который находится в корне сайта, указывать его местоположение и его тип необязательно — элемент <link>, в этом случае, вовсе не нужен.

На некоторых сайтах (например, WHATWG.Org) атрибут type не используется вообще, так как современные браузеры сами могут определять формат изображений.