Что такое favicon (фавикон) и как правильно его сделать?

Что такое favicon (фавикон) и как правильно его сделать?

Favicon (favorites icon — «значок для избранного») — значок сайта (ресурса в интернет) или какой то одной веб-страницы, который отображается рядом с закладками во вкладках браузеров. Впервые поддержка favicon появилась еще в IE5. Давайте разберемся, для чего вообще нужна фавиконка и как правильно ее создать для настольных и мобильных сайтов.

Для чего нужен фавикон?

По большому счету favicon разработчику и владельцу сайта, в общем-то, и не нужен. Однако он может доставить эстетическое удовольствие (сайты без фавиконок или со стандартными фавиконами CMS воспринимаются, как не законченные).

Кроме того favicon помогает быстрее ориентироваться во множестве открытых вкладок браузера (их у многих открыто от десятка до полусотни одновременно) и закладках избранных веб-страниц. Согласитесь, удобно. Хорошее юзабилити при наличии уникального favicon налицо. Решили, что симпатичная фавиконка вашему сайту все-таки нужна? Тогда пора браться за дело!

Что представляет собой Favicon?

Изначально фавиконки существовали в одном единственном формате – картинка формата .ico размером 16х16 пикселей. И никак иначе.

Слава богу, что те древние времена уже давно минули и мы можем дать выход творческой энергии, подчеркивая стиль своего сайта картинкой любого размера (при необходимости браузер самостоятельно масштабирует favicon до нужных ему размеров). Постарайтесь только соблюдать «квадратные» пропорции.

Как установить фавикон на сайт?

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

На практике фавикон может лежать где угодно в пределах вашего сайта в любом из допустимых форматов. Нужно только прописать в разделе <head> всех веб-страниц строку:

<link rel=”shortcut icon” href=”http://seodu.ru/favicon.ico”

type=”image/vnd.microsoft.icon”>

с явным указанием пути в относительном или абсолютном формате.

Ранее для favicon.ico указывался MIME-тип image/x-icon, теперь же данный формат считается устаревшим и официальное «майкрософтовское» слово гласит, что с 2003 года (после стандартизации формата) файлам .ico соответствует MIME-тип image/vnd.microsoft.icon.

Вместо shortcut icon в атрибуте rel можно указать только icon, однако IE реагирует только на shortcut icon и дружит только с фавиконками формата .ico. Остальные браузеры shortcut в атрибуте rel игнорируют и учитывают только запись icon.

При желании, конечно, вы можете внести в страницы своего сайта дополнительную запись:

<link rel=”icon” href=”favicon.png” type=”image/png”>

Естественно, для каждого типа иконок нужно не забывать указывать соответствующий MIME-тип:

  • image/png – для png
  • image/gif– для gif и т.д.

При несовпадении реального MIME-типа favicon с объявленным на веб-странице, браузер может не отобразить фавикон.

Как сделать хороший favicon для своего сайта?

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

  • используйте 2-3 цвета;
  • избегайте мелких деталей;
  • постарайтесь озобразить простой объект на контрастном фоне в противном случае вместо красивой картинки вы рискуете получить разноцветное квадратное пятно.

Готовый файл фавикона лучше всего сохранить в png или gif, размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета. А вот с получением файла favicon.ico вам придется попотеть.

Дело в том, что этот специфический формат большинство графических редакторов не поддерживает. Выходов тут несколько:

  • можно просто забить на формат ico (но не нужно);
  • воспользоваться онлайн-генераторами фавиконок;
  • создать фавиконку в формате gif и вручную поменять расширение .gif на .ico (будет работать в большинстве браузеров, но упомянутое несовпадение MIME-типов уже гарантировано).

Favicon.ico для мобильных устройств.

Если вы рассчитываете, что на ваш сайт будут заходить пользователи с мобильных устройств, то придется попотеть дополнительно. Дело в том, что Apple как обычно решили блеснуть и придумали свой формат иконок WebClip, который используется браузером Safari в iPhone и iPod.

Для того, чтобы «fovicon для Apple» заработал на вашем сайте, нужно прописать в разделе <head>

<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />

Размер фавикона WebClip изначально составлял 57х57 пикселей. Для iPad рекомендуется использовать значки размером 72х72 пиксела, а для устройств на iOS 4.0 и старше favicon должен иметь размеры 114х114 пикселов. Формат иконок WebClip – png (без использования прозрачности).

Особенность apple-touch-icon заключается в том, что «яблочные» аппараты автоматически придают иконкам фирменный блеск и закругленные края.

Для мобильных устройств на базе Android мобильные иконки WebClip так же поддерживаются, но их размер должен быть 16х16 или 57х57, а прописывать фавиконку для андроидов нужно так:

<link rel=”apple-touch-icon-precomposed”

href=”apple-touch-icon.png” />

Естественно, apple-touch-icon-precomposed будет работать и в Apple, но эффект блеска применяться уже не будет.

Как сделать анимированный favicon?

Да-да, и такой favicon можно сделать и установить на своем сайте. Для этого нужно создать файл анимашку соответствующих размеров и сохранить готовую картинку в формате gif. В большинстве новых версий браузеров эта функция работает. Остальные браузеры пока что «покажут» только «первый кадр» вашего шедевра.

Favicon в Яндексе или как использовать картинку в SEO?

Наш родной и почитаемый поисковик Яндекс показывает favicon.ico как часть сниппета в поисковой выдаче. Бонусов к ранжированию, конечно, эта мелочь не прибавит, а вот глаз пользователя порадуется. Глядишь, и CTR в выдаче немного поднимется, если поиграть с иконкой.

Кстати, за индексацию favicon в Яндексе отвечает «специальный» робот, поэтому не удивляйтесь, если вдруг страницы вашего сайта проиндексируются, а фавиконка не появится или не изменится.

Счетчик