Рубрики
WordPress

Favicon сайта на WordPress: какой должен быть формат и размеры, как сделать и добавить на сайт?

Мой опыт основан на практике SEO-оптимизации и веб-разработки WordPress-проектов. Им я и хочу поделиться.

Что такое favicon и почему он важен?

Favicon (от favourite icon) — это маленькое изображение, которое браузер отображает во вкладке рядом с названием страницы, в закладках, в списке недавно посещённых сайтов и даже на рабочем столе мобильного устройства, если пользователь добавит сайт в «быстрый доступ».

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

Какой должен быть формат favicon?

На практике существует несколько форматов, у каждого — своя роль.

ICO — устаревший, но всё ещё нужный

Формат .ico — исторический стандарт для favicon. Его поддерживают абсолютно все браузеры, включая очень старые версии Internet Explorer. Внутри одного .ico-файла можно хранить сразу несколько размеров: 16×16, 32×32 и 48×48 пикселей. Браузер сам выберет подходящий.

Когда использовать: если вам нужна максимальная совместимость и вы не хотите думать о поддержке устаревших браузеров — делайте favicon.ico.

PNG — современный и удобный

Формат .png поддерживается всеми актуальными браузерами и является предпочтительным для новых проектов. Он поддерживает прозрачность (важно для логотипов с фигурным силуэтом) и хорошо масштабируется.

Когда использовать: PNG — основной формат для WordPress-сайтов. WordPress принимает PNG-файл как Site Icon и сам генерирует нужные размеры.

SVG — вектор с оговорками

SVG-favicon выглядит идеально на любом экране, включая Retina и 4K, потому что масштабируется без потери качества. Однако поддержка SVG-favicon до сих пор не универсальна: Safari начал поддерживать его лишь с версии 12, а Internet Explorer не поддерживает совсем.

Когда использовать: только как дополнение к ICO или PNG, но не как единственный формат.

WebP и AVIF — не подходят

Эти форматы оптимальны для обычных изображений, но не предназначены для favicon. Поддержка в контексте иконки сайта у них минимальная. Использовать не стоит.

Какие размеры нужны?

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

РазмерНазначение
16×16Вкладка браузера (классический favicon)
32×32Закладки, адресная строка в Windows
48×48Рабочий стол Windows (при создании ярлыка)
180×180Apple Touch Icon (iOS, добавление на экран)
192×192Android Chrome, PWA-иконка
512×512Splash screen для PWA, используется Google

Практический совет: создайте исходный файл размером не менее 512×512 пикселей в PNG или SVG. Из него вы сможете сгенерировать все остальные размеры. WordPress при загрузке Site Icon автоматически создаёт варианты 512×512 и 192×192.

Как создать favicon?

Способ 1. Вручную в графическом редакторе

Если у вас есть логотип в векторном формате (.ai, .eps, .svg), откройте его в Adobe Illustrator, Figma или Inkscape и экспортируйте в PNG размером 512×512. Убедитесь, что логотип хорошо читается на маленьком размере: убирайте мелкие детали, тонкие шрифты и сложные градиенты — при масштабировании до 16×16 они «сливаются».

Главная ошибка при создании favicon вручную — взять логотип «как есть» без адаптации. Часто приходится делать упрощённую версию: только символ, монограмму или первую букву бренда.

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

Сервисы для генерации favicon принимают исходный PNG или SVG и выдают готовый набор файлов всех нужных размеров вместе с HTML-кодом для вставки:

  • favicon.io — простой и бесплатный, поддерживает текст, эмодзи и загрузку изображения.
  • RealFaviconGenerator — профессиональный инструмент с предпросмотром на разных устройствах и платформах, генерирует весь необходимый HTML-код.
  • Figma + плагины — если вы работаете в Figma, есть плагины для экспорта favicon-набора прямо из макета.

Рекомендация: используйте RealFaviconGenerator — он наиболее полный и сразу показывает, как иконка будет выглядеть в Windows, macOS, iOS и Android.

Как добавить favicon на WordPress-сайт?

В WordPress есть три способа добавить favicon, и они отличаются по уровню контроля.

Способ 1. Через Кастомайзер (рекомендуется для большинства)

Это официальный, встроенный способ. WordPress называет favicon «Иконка сайта» (Site Icon).

Пошаговая инструкция:

  1. В административной панели перейдите в Внешний вид → Настроить (или Customize).
  2. Найдите раздел «Идентификация сайта» (Site Identity).
  3. Нажмите «Выберите иконку сайта».
  4. Загрузите изображение PNG размером 512×512 пикселей (это минимальный рекомендуемый размер, WordPress сам обрежет его до нужных вариантов).
  5. Если изображение больше 512×512, WordPress предложит обрезать его — выберите нужную область.
  6. Нажмите «Опубликовать».

После этого WordPress автоматически добавит в <head> сайта необходимые теги:

<link rel="icon" href="/wp-content/uploads/.../favicon-32x32.png" sizes="32x32" />
<link rel="icon" href="/wp-content/uploads/.../favicon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="/wp-content/uploads/.../apple-touch-icon.png" />

Способ 2. Через Full Site Editor (для блочных тем)

Если вы используете блочную тему (Twenty Twenty-Three, Twenty Twenty-Four и подобные), кастомайзер заменён на Site Editor.

  1. Перейдите в Внешний вид → Редактор.
  2. Кликните на иконку «Стили» или перейдите в Настройки сайта.
  3. Найдите «Иконка сайта» и загрузите нужный файл.

Способ 3. Ручная вставка кода в functions.php или <head>

Этот способ даёт максимальный контроль и подходит для разработчиков, которые хотят подключить полный набор favicon от RealFaviconGenerator.

Добавьте код в файл functions.php вашей дочерней темы:

function my_custom_favicon() { ?>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <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="manifest" href="/site.webmanifest">
<?php }
add_action('wp_head', 'my_custom_favicon');

Файлы при этом загружаются вручную через FTP или файловый менеджер в корневую директорию сайта.

⚠️ Важно: не редактируйте functions.php основной темы — при обновлении темы изменения потеряются. Всегда используйте дочернюю тему или плагин типа Code Snippets.

Типичные проблемы и как их решить?

Favicon не отображается после добавления

Причина: кэш браузера. Браузер сохраняет favicon агрессивно.

Решение: откройте сайт в режиме инкогнито, или очистите кэш браузера (Ctrl+Shift+Del), или добавьте к URL параметр ?v=2: https://yoursite.com?v=2.

Favicon отображается только на главной, но не на других страницах

Причина: скорее всего, в теме прописан жёсткий путь к favicon, а не динамическая функция.

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

Иконка размытая

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

Решение: создайте новый вариант иконки специально для маленьких размеров — упрощённый, с меньшим количеством деталей.

Старый favicon продолжает отображаться после замены

Причина: кэш на стороне CDN или кэширующего плагина (WP Rocket, W3 Total Cache и др.).

Решение: зайдите в настройки кэширующего плагина и очистите кэш. Если используете Cloudflare — сделайте «Purge Everything» в панели Cloudflare.

Чек-лист:

Чтобы favicon работал правильно и поддерживал авторитетность сайта:

  • [ ] Иконка отражает брендинг — логотип или монограмму компании
  • [ ] Хорошо читается на размере 16×16 без мелких деталей
  • [ ] Исходный файл в формате PNG, размер 512×512 пикселей
  • [ ] Добавлен через встроенный инструмент WordPress (кастомайзер)
  • [ ] Отображается корректно во всех основных браузерах (Chrome, Firefox, Safari, Edge)
  • [ ] Отображается на мобильных устройствах при добавлении на рабочий стол
  • [ ] Кэш очищен после смены иконки
  • [ ] Проверен через Google Search Console → «URL Inspection» → посмотрите, какой favicon видит Googlebot

Итог

Favicon — это небольшая, но значимая деталь. Хорошо сделанная иконка укрепляет доверие пользователей, улучшает узнаваемость бренда и завершает профессиональный облик сайта. Для WordPress достаточно одного PNG-файла 512×512, загруженного через кастомайзер — это покрывает 95% потребностей большинства сайтов. Если же вы строите PWA или хотите максимальную кросс-платформенную поддержку — используйте RealFaviconGenerator и подключайте полный набор иконок вручную через functions.php дочерней темы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *