Фавикон для сайта: как сделать иконку и почему она влияет на клики в поиске

Что такое фавикон и где его видно

Фавикон (от английского favorite icon) — значок сайта. Его видно в нескольких местах:

• во вкладке браузера — когда у человека открыто 15 вкладок, по иконкам он находит нужную;
• в закладках и истории;
• в результатах поиска Яндекса — рядом с названием сайта в сниппете;
• на главном экране телефона, если человек добавил сайт как ярлык;
• в мессенджерах и соцсетях — иногда рядом с превью ссылки.

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

Почему фавикон влияет на клики в поиске

В выдаче Яндекса сниппет — это заголовок, описание, адрес и фавикон. Всё остальное у конкурентов похоже: такие же заголовки «Ремонт квартир в Казани под ключ», такие же описания. Иконка — один из немногих визуальных элементов, которыми можно выделиться.

Как фавикон работает на клики:

1. Заметность. Яркая контрастная иконка притягивает взгляд к сниппету.
2. Узнаваемость. Человек, который уже был на вашем сайте, узнаёт иконку и кликает охотнее.
3. Доверие. Сайт с аккуратной иконкой выглядит ухоженным, без неё — брошенным.

Точной цифры «фавикон даёт +N% кликов» нет: эффект зависит от выдачи, ниши и того, как выглядят соседи. Проверить на своём сайте можно: в Яндекс Вебмастере есть статистика кликабельности по запросам. Сравните CTR за месяц до замены иконки и через месяц после. Как читать эту статистику и что ещё влияет на кликабельность сниппета, мы подробно разбирали в статье сниппет в Яндексе.

Размер фавикона и форматы: таблица

Практический совет: сделайте исходник в SVG или PNG размером 512 × 512 пикселей. Из него получатся все остальные размеры, а SVG сам масштабируется до любого.

Требования Яндекса, которые часто нарушают:

• Иконка должна быть доступна роботу. Если файл лежит в папке, закрытой в robots.txt, или сервер отдаёт ошибку, Яндекс его не увидит.
• Одна ссылка на фавикон. Справка Вебмастера предупреждает: если ссылка на фавиконку прописана в коде несколько раз, робот может выбрать любую. Так в выдаче оказывается старая иконка из забытого тега.
• Без анимации. Анимированный GIF Яндекс не покажет.

Как создать фавикон для сайта

Из логотипа

Самый частый путь. Но логотип почти никогда не подходит как есть. Если в нём есть название компании, в размере 16 × 16 пикселей буквы сольются. Что делать:

1. Выделите знак. Если у логотипа есть графический символ — берите его.
2. Если знака нет — возьмите первую букву названия фирменным шрифтом.
3. Упростите. Уберите тонкие линии, мелкие детали и градиенты. В 16 пикселях они исчезнут.
4. Добавьте фон. Буква или знак на цветном квадрате или круге читается лучше, чем на прозрачном фоне. Особенно в тёмной теме браузера, где тёмная иконка без фона пропадает.
5. Проверьте в реальном размере. Уменьшите картинку до 16 пикселей и посмотрите, узнаётся ли.

Если логотипа ещё нет, фавикон — хороший повод задуматься о фирменном стиле. Как сделать его недорого, мы рассказывали в статье фирменный стиль для малого бизнеса.

Фавикон онлайн бесплатно: генераторы

Если исходник готов, конвертировать его в нужные форматы помогут онлайн-генераторы. Ищите по запросу «favicon generator»: популярные сервисы бесплатны, принимают картинку и отдают набор файлов разных размеров вместе с кодом для вставки в страницу.

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

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

Через код

Если сайт свёрстан вручную или на CMS с доступом к шаблону, добавьте в раздел <head> строку:

html <link rel="icon" href="https://example.ru/favicon.svg" type="image/svg+xml">

Атрибут type должен соответствовать формату файла: image/svg+xml для SVG, image/png для PNG, image/x-icon для ICO. Для поддержки старых браузеров можно дополнительно положить файл favicon.ico в корень сайта. Главное — не оставляйте в коде несколько разных ссылок на старые и новые иконки.

На Тильде

По ответам Тильды фавикон загружают так: «Настройки сайта» → «SEO» → раздел редактирования иконок → «Загрузить файл». Там же можно загрузить дополнительные иконки в PNG: для закладок и ярлыка на iPhone и iPad (152 × 152) и для плиток Windows (270 × 270). После загрузки опубликуйте все страницы, чтобы иконка появилась в коде.

На WordPress

По документации WordPress иконка сайта должна быть квадратной, не меньше 512 × 512 пикселей.

• Блочная тема: «Внешний вид» → «Редактор» → раздел Identity, поле Site Icon.
• Классическая тема: «Внешний вид» → «Настроить» → раздел Site Identity (в русской версии — «Свойства сайта»), поле «Иконка сайта».

WordPress сам нарежет нужные размеры и добавит теги в код. Если в теме или SEO-плагине тоже задан фавикон, проверьте, чтобы в коде страницы не оказалось двух разных иконок. Про WordPress в целом — в статье сайт на WordPress.

Почему фавикон не отображается в Яндексе и как обновить

Самая частая жалоба: «Поставили новую иконку, а в поиске старая или пустая». Причины по порядку проверки:

1. Робот ещё не обходил сайт. По справке Вебмастера, после того как робот загрузил фавиконку, она появится в выдаче в течение двух недель.
2. Не запрошен переобход. В Яндекс Вебмастере запросите переобход главной страницы — это ускоряет обновление иконки до трёх дней. Если сайт ещё не добавлен в Вебмастер, вот инструкция, как это сделать.
3. В коде несколько ссылок на фавикон. Откройте код главной (Ctrl+U в браузере) и найдите все rel="icon". Оставьте одну.
4. Файл недоступен. Откройте адрес иконки напрямую в браузере. Если ошибка 404 или файл закрыт в robots.txt — робот его не получит.
5. Неподходящий формат или размер. Анимированный GIF, прямоугольная картинка, неподдерживаемый формат.
6. Кэш браузера. Если иконка не обновилась во вкладке у вас, откройте сайт в режиме инкогнито. Браузеры долго хранят фавиконы.

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

Условный пример: замена фавикона и CTR

Пример условный, не кейс студии. Сайт клининговой компании в Перми. В выдаче показывался серый значок по умолчанию: фавикон был прописан в коде, но файл удалили при переезде на новый хостинг.

Рост CTR на полпроцента — условная цифра для иллюстрации, в реальности эффект может быть больше или меньше. Но даже 3 лишние заявки в месяц при среднем чеке в 5 000 ₽ — это 15 000 ₽ в месяц за работу на полчаса. Что важнее, это бесплатно: никакая реклама так дёшево клики не даёт.

Чек-лист: фавикон за 30 минут

1. Возьмите знак логотипа или первую букву названия на цветном фоне.
2. Сделайте исходник SVG или PNG 512 × 512 пикселей.
3. Проверьте, что иконка читается при уменьшении до 16 пикселей и на тёмном фоне.
4. Нарежьте размеры через генератор или редактор.
5. Загрузите через настройки конструктора или добавьте строку <link rel="icon"> в код.
6. Убедитесь, что в коде главной ровно одна ссылка на иконку.
7. Откройте адрес файла иконки в браузере — он должен открываться.
8. Запросите переобход главной страницы в Яндекс Вебмастере.
9. Через две недели проверьте выдачу и CTR в Вебмастере.

Фавикон — одна из десятков мелочей, которые складываются в то, как сайт выглядит в поиске. Если хотите, чтобы мы проверили их все разом — от иконки и сниппетов до индексации и скорости, — оставьте контакты.