Подключаем favicon на сайт

0 / 5

Автор: Администратор

26.04.2015

Теги: favicon, ico, profile

Что такое favicon

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

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

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

Где можно увидить favicon

в избранном (рядом с закладкой)

во вкладках, справ от названия страницы

на панели закладок

в результатах выдачи поисковых систем

Как добавить на свой сайт favicon

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

Подключение происходит при помощи тэга <link>, со специальными атрибутами, который размещается внутри тэга <head>.

Пример подключения:

<head profile="http://www.w3.org/2005/10/profile">
	<link rel="icon" type="image/vnd.microsoft.icon" href="/favicon.ico">
</head>

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