Как сделать favicon для сайта: полный гайд 2026

Kuznya Studio 19.09.2026 0

Откройте любую вкладку браузера — рядом с названием сайта маленькая иконка. Откройте закладки — она же. Посмотрите в поиске — она же перед ссылкой. Это favicon. Мелочь, которую замечают только когда её нет.

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

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

Что такое favicon и зачем он нужен

Favicon (от англ. favorites icon) — маленькая иконка сайта, которую браузер показывает в разных местах:

  • Во вкладке браузера рядом с названием страницы
  • В закладках
  • В истории посещений
  • В поисковой выдаче Яндекса и Google рядом с сайтом
  • На рабочем столе телефона при добавлении сайта как ярлыка
  • В списке приложений Android, если сайт — это PWA

Самый важный момент — поисковая выдача. Яндекс и Google показывают favicon перед каждой ссылкой. Без иконки ваш сайт в списке из десяти конкурентов смотрится «серым пятном». С иконкой — выделяется и запоминается.

Это не «красиво» — это доверие. При прочих равных пользователь кликнет на тот результат, где есть узнаваемая иконка.

Какие форматы нужны в 2026 году

Раньше хватало одного файла favicon.ico. Сегодня этого мало — разные устройства требуют разного.

ФайлРазмерГде используется
favicon.ico16×16 / 32×32Старые браузеры, поисковая выдача
favicon-16x16.png16×16Вкладка браузера
favicon-32x32.png32×32Вкладка на Retina-экранах
apple-touch-icon.png180×180Рабочий стол iPhone/iPad
android-chrome-192x192.png192×192Домашний экран Android
android-chrome-512x512.png512×512PWA, сплэш-скрин
site.webmanifest—JSON-манифест для Android

Плюс — SVG-favicon (современный вариант): один файл favicon.svg, масштабируется на любое разрешение. Поддерживается Chrome, Firefox, Edge. Для Safari — нужен PNG-fallback.

Требования к картинке для favicon

Прежде чем делать иконки — нужен исходник. Требования к нему:

  • Размер: минимум 512×512 пикселей. Лучше 1024×1024 или больше
  • Форма: квадрат
  • Формат исходника: PNG или SVG (для логотипов)
  • Стиль: простая иконка с крупными элементами

Важно: на 16×16 пикселей видно только крупные формы. Если в логотипе много текста, тонких линий или деталей — на маленьком размере получится «каша». Хорошие favicon — простые: буква, символ, одна крупная фигура.

Как сделать favicon — 3 способа

Способ 1. Онлайн-генераторы

Раньше самый популярный способ — загрузить картинку, получить архив с иконками. Известные сервисы:

  • RealFaviconGenerator — мощный, но англ. и сложный интерфейс
  • Favicon.io — англ., ограничен в настройках
  • Favicon Generator от Яндекса — простой, но только базовый .ico

Плюс: быстро.
Минус: англ. интерфейс, часто с рекламой или лимитами.

Способ 2. Photoshop / Illustrator

Открываете картинку, уменьшаете до нужных размеров, экспортируете каждую вручную. Долго, но полный контроль.

Минус: на 16 иконок уйдёт 30+ минут. И всё равно нужен ещё конвертер в .ico — Photoshop его не сохраняет.

Способ 3. Наш генератор favicon — бесплатный, на русском

Мы сделали свой: /tools/favicon-generator/

Что умеет:

  • Один клик — и получаете все 9 файлов сразу
  • ZIP-архив с готовой структурой
  • Внутри — файл html-head.txt с готовым HTML-кодом для вставки
  • Внутри — README.txt с инструкцией
  • Внутри — site.webmanifest для Android/PWA
  • Автоматическая обрезка в квадрат, если картинка не квадратная
  • Принимает PNG, JPG, WebP до 5 МБ
  • Не хранит файлы на сервере

Как использовать:

  1. Откройте /tools/favicon-generator/
  2. Перетащите картинку — минимум 512×512
  3. Нажмите «Сгенерировать favicon»
  4. Скачайте ZIP-архив
  5. Распакуйте в корень сайта
  6. Скопируйте HTML из html-head.txt в <head> сайта

Готово. Через пару минут браузер и поисковики подхватят иконки.

Куда класть файлы

Все файлы из архива идут в корень сайта — туда, где лежат index.php или index.html.

/ваш-сайт/
├── index.php
├── favicon.ico
├── favicon-16x16.png
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest

Не нужно их никуда вкладывать — только корень. URL будут вида https://сайт.ru/favicon.ico.

Как подключить в HTML

Откройте файл html-head.txt из архива — там готовый HTML. Вставьте его в <head> каждой страницы, перед закрывающим тегом </head>:

<head>
    <meta charset="UTF-8">
    <title>Название страницы</title>

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="manifest" href="/site.webmanifest">
</head>

Важно: если у вас CMS (WordPress, Kuznya и т.д.) — код вставляется в шаблон header.php или через настройки темы, чтобы применилось на всех страницах сразу.

Как проверить, что favicon работает

1. Открыть сайт в браузере

Favicon должен появиться во вкладке. Если нет — нажмите Ctrl+F5 (жёсткая перезагрузка).

2. Проверить через DevTools

F12 → вкладка Network → обновите страницу → введите в фильтр favicon. Должен быть запрос favicon.ico со статусом 200. Если 404 — файл не лежит в корне или указан неверный путь.

3. В поисковой выдаче

Яндекс и Google подхватывают favicon в течение 1-3 дней после установки. Если через неделю в выдаче нет — зайдите в Яндекс.Вебмастер → «Внешний вид» → «Favicon» и запросите переобход.

Частые проблемы

Favicon не отображается

  • Файл не в корне сайта — проверьте путь /favicon.ico
  • Неправильный MIME-тип — некоторые серверы отдают .ico как text/plain. Проверьте .htaccess или настройки хостинга
  • Кэш браузера — Ctrl+F5 или откройте в инкогнито

Показывается старый favicon

Браузеры агрессивно кэшируют favicon. Решение — сменить имя файла (например, favicon-v2.ico) и обновить ссылку в HTML.

В поиске favicon серый

Поисковики обновляют favicon редко. Запросите переобход через Вебмастер / Search Console.

Как автоматизировать в Kuznya CMS

Мы в своём движке Kuznya CMS сделали загрузку favicon частью админки. Загружаете картинку в настройках — движок сам создаёт все нужные размеры и подставляет в <head>. Не нужно вручную ни генерировать, ни подключать.

Это часть подхода «всё готово из коробки» — клиент не думает о технических деталях, они уже решены.

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

Итог

Favicon — маленькая деталь, но её отсутствие заметно. Правильный набор иконок = доверие пользователей + узнаваемость в поисковой выдаче.

Быстрый чек-лист:

  • ☐ Есть исходник 512×512 или больше
  • ☐ Сгенерированы все 6 иконок + манифест
  • ☐ Файлы лежат в корне сайта
  • ☐ HTML-код вставлен в <head>
  • ☐ Проверено в DevTools (Network → favicon → 200)
  • ☐ Переобход запрошен в Яндекс.Вебмастер

Проще всего — через наш генератор. Одна картинка → готовый комплект за минуту.