Что такое favicon?

Favicon (англ. Favorite Icon), как многие наверняка знают, это такая иконка в специальном формате, которая отображается в адресной строке, при посещении какого-либо сайта, например этого, вкладке браузера или в его закладках (“Избранном”). Обычно она хранится в корневой папке сайта и называется favicon.ico.

Какая от фавиконов польза?

Использование этой иконки имеет множество положительных сторон. Во-первых, эта иконка запоминается посетителям порою лучше, чем название сайта. Посмотрите на изображение, какая иконка вам не знакома?

Примеры брендовых фавиконов (Опера, Мозилла, Виндоус, Одноклассники и т.д.)

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

Ещё одна положительная сторона использования фавиконок в том, что при просмотре сайтов в браузере и открытии множества вкладок, вы не видите заголовка страниц полностью, зато вам доступна иконка и вы сразу с легкостью можете определить ту вкладку, куда вы хотели кликнуть (использование правила “Не заставляй меня думать“).

Отображение иконок favicon во вкладках браузера

Яндекс, в отличие от других поисковых систем, что мне больше всего в нем нравится, отображает этот фавикон для каждого сайта в результатах поиска. Таким образом, это один из рычагов управления кликабельности вашего сниппета. Изображение всегда привлекает внимание пользователя и, даже если ваш сайт будет не на первых позициях в результатах поиска, к вам перейдут больше посетителей, чем на сайт рядом с вашим без favicon.

Отображение фавиконок в результатах поиска Яндекс

Исходя из сказанного о лучшей кликабельности сайта с фавиконом, вот пара советов, чтобы улучшить этот CTR:

  • Применяйте фавикон, на который хочется кликнуть (если не используете логотип компании);
  • Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, …). По запросу “одноклассники” я недавно наблюдал в выдаче яндекса деда мороза 🙂
  • Иконка должна соответствовать тематике сайта.

Как Яндекс работает с фавиконками?

Алгоритм работы Яндекса с иконками примерно следующий:

1. Специальный Яндекс.Бот, отвечающий за сбор и обновление иконок, поочередно, по своему расписанию, запрашивает главную страницу сайтов в своем индексе для нахождения в коде HTML пути к favicon.ico. Этот бот носит название “Yandex/1.02.000 (compatible; Win16; F)”.

2. Если в коде не обнаружено использование фавикон, тогда берется путь по умолчанию http://www.website.ru/favicon.ico.

3. Иконка загружается на сервер Яндекса (favicon.yandex.net), предварительно над ней проводится операция преобразования к формату PNG 16×16 пикселей. После этого шага иконка доступна по адресу

http://favicon.yandex.net/favicon/devaka.ru

где последняя часть является именем нужного домена (введите yandex.ru, например).

4. Бот, в зависимости от частоты обновления вашего сайта, периодически перепроверяет иконку, чтобы его база всегда содержала текущие пиктограммы.

По своим логам я заметил, что на необновляемом сайте бот заходит примерно раз в месяц:

213.180.207.227 – - [03/Oct/2008:15:03:34 +0300] “GET / HTTP/1.1” 200 3844 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [28/Nov/2008:18:34:42 +0200] “GET / HTTP/1.1” 200 3844 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [03/Dec/2008:09:39:38 +0200] “GET / HTTP/1.1” 200 3844 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [07/Dec/2008:03:20:33 +0200] “GET / HTTP/1.1” 200 3844 “-” “Yandex/1.02.000 (compatible; Win16; F)”

На частообновляемом сайте, например на этом блоге, робот Яндекса проверяет иконку 5 раз в месяц, приблизительно раз в неделю.

213.180.207.227 – - [31/Aug/2008:01:02:06 +0300] “GET / HTTP/1.1” 200 35269 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [05/Sep/2008:11:51:15 +0300] “GET / HTTP/1.1” 200 33993 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [09/Sep/2008:20:12:00 +0300] “GET / HTTP/1.1” 200 33830 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [14/Sep/2008:08:19:29 +0300] “GET / HTTP/1.1” 200 33784 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [21/Sep/2008:06:04:33 +0300] “GET / HTTP/1.1” 200 33828 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [28/Sep/2008:07:53:32 +0300] “GET / HTTP/1.1” 200 33930 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [03/Oct/2008:01:06:09 +0300] “GET / HTTP/1.1” 200 33361 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [10/Oct/2008:05:02:48 +0300] “GET / HTTP/1.1” 200 32254 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [15/Oct/2008:13:29:02 +0300] “GET / HTTP/1.1” 200 33625 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [19/Oct/2008:09:08:18 +0300] “GET / HTTP/1.1” 200 35325 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [25/Oct/2008:03:37:18 +0300] “GET / HTTP/1.1” 200 41338 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [08/Nov/2008:20:15:54 +0200] “GET / HTTP/1.1” 200 41112 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [13/Nov/2008:23:12:28 +0200] “GET / HTTP/1.1” 200 40033 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [18/Nov/2008:20:36:50 +0200] “GET / HTTP/1.1” 200 39307 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [27/Nov/2008:20:45:06 +0200] “GET / HTTP/1.1” 200 46447 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [06/Dec/2008:21:49:34 +0200] “GET / HTTP/1.1” 200 50510 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [19/Dec/2008:07:53:10 +0200] “GET / HTTP/1.1” 200 49363 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – - [24/Dec/2008:09:58:38 +0200] “GET / HTTP/1.1” 200 44062 “-” “Yandex/1.02.000 (compatible; Win16; F)”

Желательно, чтобы иконка в HTTP заголовках возвращала Content-Type: image/x-icon, хотя на данный момент Яндекс умеет работать и с gif, png и другими форматами тоже. Для каждого сайта апдейт фавиконок происходит по своему расписанию.

Как сделать favicon.ico?

Для того, чтобы сделать свою пиктограмку, можно воспользоваться специальными сервисами по генерации иконок, например: http://www.favicon.cc/. Либо вы можете заказать дизайн favicon у специальных дизайнерских web-студий, они вам сделают пиктограмку профессионально и по теме. Также вы можете нарисовать иконку сами в фотошопе. Для сохранения изображений в photoshop в формате .ico, необходимо поставить специальный плагин (”скачать для windows“).

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

Используйте для этого приведенный ниже HTML код в теге <head>

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

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

P.S. Анимированные иконки преобразуются в статические PNG.
P.P.S. Иногда Яндекс плохо обрабатывает прозрачность, например для google.