Шпаргалка по фавикону
Что такое фавикон
FAVorite ICON — (с англ.) любимая иконка, значок для избранного.
Фавикон — это иконка сайта, которая отображается на вкладке браузера вместе с названием страницы, а также в результатах поиска Яндекс, в Google — нет:
Область использования фавикона не ограничивается браузерами и поисковыми системами (не только Яндекс). В общем смысле он играет роль графического идентификатора проекта / ресурса.
Характеристики фавикона
- Фавикон традиционно располагается в корне сайта и имеет:
- имя —
favicon; - формат —
ico; - размер — 16×16 px.
«традиционно» — не значит обязательно (см. ниже); но по традиции, в большинстве случаев, делается именно так.
Создание, поиск и конвертация фавиконов
Программы, работающие с форматом ico: GIMP.
Онлайн сервисы: XIconEditor.Com (создание и конвертация), FindIcons.Com (поиск и конвертация).
Установка фавикона на сайт
Для установки готового (имеющего соответствующие имя и формат) фавикона на сайт, нужно просто загрузить его в корень проекта, а затем несколько раз обновить страницу в браузере.
Общий адрес фавиконов большинства ресурсов выглядит так: протокол://домен/favicon.ico (http://w3.org/favicon.ico)
Фавикон не отображается / обновляется
- Если после установки фавикона на сайт он не появился / обновился, значит нужно очистить кэш текущей страницы. Это делается с помощью комбинации клавиш Ctrl+F5. Данная комбинация обновляет страницу вместе с кэшированными данными. Работает она во всех популярных браузерах.
- Если очистка кэша не помогла, значит нужно убедиться в правильности расположения фавикона, открыв его через адресную строку браузера: протокол://домен/favicon.ico Если фавикон открылся, но предыдущий, значит нужно обновить само изображение, открытое в обозревателе, с помощью всё той же комбинации клавиш Ctrl+F5. Если же фавикон не открылся или обновление изображения не помогло, значит иконка находится не в корне проекта, а где-то в другом месте; поэтому её нужно переместить или закачать заново куда следует.
- Если выполнение описанных выше действий не привело к ожидаемым результатам, то остаётся только очистить кэш браузера «вручную» и фавикон точно должен появиться / обновиться, так как иначе что-то сделано не так, как указано выше.
Другое место расположения фавикона
Фавикон может располагаться не только в корне сайта, но и в любой другой папке, и даже на другом ресурсе. В этом случае в 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 не используется вообще, так как современные браузеры сами могут определять формат изображений.