Фавикон: иконка в 16 пикселей, по которой вас находят среди двадцати вкладок

Анатолий Кузнецов

SEO-оптимизатор с 20-летним стажем. Автор блога seo-prodvizhenie-biznesa.ru о продвижении и доработке сайтов.

Откройте у себя в браузере двадцать вкладок — и заголовки исчезнут. От каждой страницы останется квадратик шириной 16 пикселей. Именно по нему человек через три минуты вернётся к вашему сайту или не вернётся, а закроет всё подряд и начнёт поиск заново. Фавикон — этот квадратик — единственный опознавательный знак сайта в половине мест, где он вообще появляется, и при этом он чаще всего либо отсутствует, либо подключён так, что показывается серый глобус.

Работая с сайтами с 2005 года, я привык проверять favicon в первые пять минут технического аудита — не потому, что он тащит позиции, а потому что его состояние сразу говорит, насколько внимательно собирали сайт. Если в <head> висит ссылка на иконку, которой на сервере нет уже два года, там же найдётся и десяток вещей посерьёзнее.

Где иконка сайта показывается на самом деле

Большинство владельцев думают про вкладку браузера и на этом останавливаются. Список мест намного длиннее, и часть из них влияет на клики напрямую:

• Вкладка браузера. При 10+ открытых вкладках заголовок обрезается до нуля, остаётся только иконка.
• Выдача Яндекса. Иконка стоит слева от названия сайта в сниппете — и в мобильной выдаче, и в десктопной.
• Выдача Google. На мобильных фавикон выводится рядом с именем домена над заголовком результата.
• Закладки и панель избранного. Если человек добавил сайт в закладки, там обычно видно только иконку и первые два слова.
• Ярлык на домашнем экране телефона. Здесь работает уже не favicon, а отдельная иконка — apple-touch-icon или иконки из манифеста.

Форматы: что нужно, а что осталось в прошлом

Формат .ico понимается всеми браузерами без исключений, и внутрь одного файла можно упаковать несколько размеров. PNG легче и поддерживает нормальную прозрачность. SVG даёт то, чего не даст растр: одна иконка масштабируется на любой экран, а внутри неё можно прописать медиавыражение prefers-color-scheme и получить знак, который в тёмной теме перекрашивается сам.

Отдельно про размеры. Google в своей документации просит, чтобы иконка была квадратной и кратной 48 пикселям — то есть 48×48, 96×96, 144×144 и так далее, минимально допустимый размер 8×8. Яндексу достаточно 16×16 или 32×32, он сам уменьшает картинку до нужного. Практический вывод: рисуйте исходник в 512×512, из него нарежьте всё остальное.

Сравнение способов сделать иконку

Дальше вопрос, откуда взять саму картинку. Вариантов четыре, и они различаются не ценой, а тем, что вы получите на выходе.

Критерий один: уменьшите картинку до 16 пикселей и посмотрите с расстояния вытянутой руки. Не можете сказать, что изображено, — не сможет и клиент. Тонкие линии и градиенты на таком размере не выживают. Та же логика, по которой не работает серый шрифт в 12 пикселей: технически всё на месте, а глаз ничего не различает.

Порядок действий: от исходника до рабочей иконки

1. Нарисуйте или подготовьте исходник 512×512 в PNG с прозрачным фоном. Если фон должен быть цветным — делайте его прямо в картинке, скруглять углы не надо, системы скругляют сами.
2. Проверьте читаемость: уменьшите до 16×16, посмотрите. Если не читается — упрощайте, убирайте детали, увеличивайте контраст.
3. Нарежьте набор: 16, 32, 96, 180, 192, 512. Любой графический редактор или бесплатный онлайн-генератор фавиконов это делает в один клик.
4. Соберите favicon.ico из 16 и 32 и положите его в корень домена — по адресу вида /favicon.ico. Это важно: роботы и старые браузеры проверяют именно корень.
5. Добавьте ссылки в <head> каждой страницы.
6. Убедитесь, что доступ к ним не закрыт в robots.txt. Если папка с изображениями темы попала под запрет, робот иконку не увидит.
7. Отправьте главную на переобход в Яндекс.Вебмастере, чтобы иконка быстрее обновилась в выдаче.

Как это выглядит в коде

Минимальный рабочий набор в <head> — шесть строк; все они нужны одновременно и не конфликтуют, браузер сам выберет подходящий вариант:

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' sizes='96x96' href='/favicon-96x96.png'>
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>
<link rel='manifest' href='/site.webmanifest'>
<meta name='theme-color' content='#005DAC'>

Если сайт на CMS, лезть в шаблон обычно не нужно. В WordPress иконка ставится через «Внешний вид → Настроить → Свойства сайта → Иконка сайта», и движок сам сгенерирует несколько размеров и вставит теги. Но favicon.ico в корне он при этом не создаёт — этот файл придётся положить вручную по FTP. В большинстве случаев именно из-за его отсутствия иконка в выдаче Яндекса не появляется месяцами.

Фавикон в поисковой выдаче: что на него влияет

Иконку в выдаче показывает не ваш сайт, а поисковик — из своей базы, которую он обновляет отдельным роботом и с задержкой. В Яндексе за это отвечает робот YandexFavicons, в Google — Googlebot-Image. Из этого вытекают четыре требования, которые люди обычно нарушают:

• Адрес иконки должен быть стабильным. Если файл называется favicon-a8f3c.png и хэш в имени меняется при каждой сборке, робот каждый раз видит новый URL и не успевает его закрепить.
• Файл должен отдаваться с кодом 200 без редиректов. Цепочка перенаправлений на иконке — частая причина серого глобуса в сниппете.
• Он должен быть открыт для индексации. Директива Disallow на папку с картинками закроет и его — как устроены такие запреты, я подробно разбирал в материале про файл robots.txt простыми словами.
• Сайт должен быть доступен в момент обхода. Если сервер в этот момент отдал ошибку 503, робот уйдёт и вернётся неизвестно когда.

Сроки: по моей практике Яндекс подхватывает новую иконку в среднем за одну-три недели, иногда дольше. Google обычно быстрее, но тоже не мгновенно. Ускорить напрямую нельзя, косвенно — отправкой главной страницы на переобход и общим порядком с индексацией. Если сайт вообще плохо обходится, иконка будет последним, что робот заметит: сначала стоит разобраться с базовыми вещами по диагностике индексации сайта, а потом уже смотреть на квадратик в сниппете.

Иконка не меняется: где искать причину

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

Отдельная история — перенос домена к другому регистратору и смена хостинга: фавикон при этом теряется чаще, чем кажется, потому что лежит вне основной структуры сайта и про него забывают в чек-листе переезда.

Когда фавикон не нужен и когда он ничего не изменит

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

• Сайт живёт неделю. Разовый лендинг под одно мероприятие, тестовая страница, проверка гипотезы — хватит любой заглушки.
• Сайт закрыт от индексации. Внутренний портал, тестовый поддомен, стенд — в выдаче их нет, значит и половина смысла иконки пропадает.
• У вас проблемы серьёзнее. Если страницы не в индексе, сайт грузится семь секунд, а телефон спрятан в подвале — фавикон стоит в очереди последним. Порядок важнее полноты.

И чего иконка не сделает, сколько её ни рисуй: не повысит позиции, не увеличит конверсию сама по себе, не заменит внятный первый экран. Она работает только на узнавание и только когда человек и так возвращается. Это гигиена, а не рычаг. Если нужен именно рычаг, я обычно начинаю с другого конца — со структуры, скорости и коммерческих факторов, и именно с этим ко мне приходят за продвижением сайта в Яндексе под ключ, а иконка попадает в работу попутно, за двадцать минут.

Коротко

• Иконка нужна в шести местах, не только во вкладке: выдача Яндекса и Google, закладки, история, ярлык на телефоне, превью ссылок.
• Минимальный набор: favicon.ico (16+32) в корне домена, PNG 96×96, apple-touch-icon 180×180. Желательно SVG.
• Google просит размер, кратный 48. Яндексу достаточно 16 или 32.
• Адрес файла должен быть стабильным, отдавать 200 без редиректов и не быть закрыт в robots.txt.
• В выдаче иконка обновляется неделями — это нормально, ускоряется только переобходом главной.
• На позиции не влияет. Это гигиена: делается один раз за час и больше не трогается.

Вопросы и ответы

Сколько весит нормальный фавикон?

Файл .ico с двумя размерами — обычно 3–8 КБ. PNG 96×96 — до 5 КБ. SVG простого знака — 1–2 КБ. Если у вас иконка тяжелее 50 КБ, внутрь попал лишний большой размер или несжатая картинка.

Как проверить, какую иконку видит поисковик?

Проще всего — посмотреть на свой сниппет в выдаче по запросу с названием компании, с телефона и с компьютера. Дополнительно в Яндекс.Вебмастере в разделе диагностики видно, когда робот последний раз обходил главную. Если главная обошлась после замены файла, а иконка старая, — значит, проблема в самом файле, а не в ожидании.

Стоит ли делать это самому или отдать на доработку?

Сама иконка — задача на час, её реально сделать самостоятельно по чек-листу выше. Отдавать имеет смысл, когда правки в шаблон делать боязно или в <head> уже намешано несколько конфликтующих наборов от плагинов: тогда это входит в обычную техническую доработку сайта вместе с остальными мелочами, которые накопились.

Увеличьте позиции и продажи вашего сайта

Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:

01 Бесплатный аудит сайта 02 SEO-продвижение 03 Создание сайтов 04 SEO-статьи для сайта

Получить консультацию

Остались вопросы по продвижению?

Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе и Google.

Связаться со мной →