Как добавить значок в WordPress

Начиная с WordPress 4.3, ядро ​​предоставляет функцию Иконка сайта, которая обрезает, изменяет размер и вставляет правильные теги <link>. Для стандартных сайтов плагин не требуется.

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

Эта функция заменяет ручную загрузку favicon.ico для большинства блоггеров, агентств и магазинов WooCommerce.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

В wp-admin перейдите в «Внешний вид» → «Настройка» → «Идентификация сайта» → Иконка сайта.

Нажмите «Выбрать Иконка сайта» и загрузите квадрат PNG размером не менее 512×512 пикселей. WordPress показывает живую обрезку — разместите логотип внутри безопасной квадратной области.

Нажмите «Опубликовать». Ядро выводит значок apple-touch, различные размеры PNG и метатеги при следующей загрузке внешней страницы.

Для значков отдельных разделов или брендов подкаталогов отфильтруйте get_site_icon_url() в дочерней теме functions.php.

Пример варианта использования: сеть с несколькими сайтами, в которой каждому дочернему сайту требуется отдельная отметка, но используется одна тема. Возвращать разные URL-адреса на основе blog_id.

Опытные команды могут исключить мета-значки сайта из очереди по умолчанию и распечатать пользовательские теги <link> в header.php, но это дублирует работу, и ядро ​​уже работает хорошо.

Отдельный блог: загрузите PNG размером 512×512 через Customizer. Готово — ни FTP, ни редактирования .ico.

Магазин WooCommerce: тот же процесс; проверьте значок на страницах оформления заказа и учетной записи, а не только на главной странице. Плагины кэширования иногда задерживают CSS, но редко блокируют теги значков.

Безголовый WordPress: теги Иконка сайта появляются только на страницах, отображаемых с помощью PHP. Ваш внешний интерфейс Next.js должен объявить свои собственные теги <link> в этой архитектуре.

Подготовка → производство: повторно загрузите или перенесите идентификатор носителя. Абсолютные URL-адреса значков жестко запрограммированы только в том случае, если вы понимаете недействительность кэша CDN.

Популярные плагины SEO также могут предоставлять настройку favicon. Не настраивайте SEO-плагин и Иконка сайта по-разному — выберите один источник истины.

Плагины кэширования (WP Rocket, W3 Total Cache) не должны блокировать файлы значков, но они могут кэшировать HTML без новых тегов до очистки.

Плагины Favicon имели смысл до WordPress 4.3. В 2026 году они станут избыточными, если только вам не понадобится анимированная или запланированная замена значков.

Какой тип файла мне следует загрузить? PNG является самым безопасным. WordPress принимает JPG, но при этом теряется прозрачность.

Минимальный размер? официально 512×512; более крупные источники уменьшают масштаб нормально.

WordPress создает favicon.ico? Он выдает размеры PNG и метатеги. Браузеры по-прежнему получают выгоду от размещения настоящего .ico в корне веб-сайта через хостинг или дочернюю тему.

Мультисайт: каждый сайт имеет свой Иконка сайта в своем Customizer. Сетевые администраторы устанавливают параметры для каждого сайта, если только тема не фильтрует URL-адреса глобально.

Браузеры кэшируют favicon отдельно от HTML. После публикации в WordPress выполните принудительное обновление или протестируйте в приватном окне.

Добавляйте ?ver=2 к URL-адресам значков, только если вы прокручиваете теги вручную. URL-адреса Иконка сайта включают аргументы запроса, которые изменяются при повторной загрузке.

Очистите кеш объекта WordPress и все CDN (Cloudflare, Jetpack Boost), если HTML все еще ссылается на старый URL-адрес вложения.

Если вы перенесли домены, найдите в базе данных старые URL-адреса значков в сериализованных параметрах — некоторые импортеры пропускают siteicon_id.

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

Нет значка в результатах Google: Google использует собственный кеш; запросить переиндексацию в Search Console после обновления Иконка сайта.

Значок на рабочем столе, но не на iPhone: iOS требуется значок Apple Touch; убедитесь, что Иконка сайта опубликован, а не просто сохранен как черновик в Customizer.

Белая рамка вокруг логотипа: загружен JPG с белым фоном вместо прозрачного PNG.

Управляемые хосты WordPress (WP Engine, Kinsta, SiteGround) кэшируют HTML на периферии. После изменения Иконка сайта очистите все кеши на панели управления хоста.

Оранжевые облачные прокси Cloudflare могут кэшировать HTML без кэширования /wp-content/uploads/icons — обычно это нормально, но очищается при изменении URL-адресов прикрепления значков.

Многоязычные плагины (WPML, Polylang) по умолчанию не дублируют Иконка сайта для каждого языка. Один значок обслуживает все локали, если вы не фильтруете URL-адреса.

Установка Bedrock или Headless может привести к перемещению загрузок. Подтвердите URL-адреса мультимедиа во внешней точке HTML, где их ожидает ваша CDN.

Если вы выполняете статический экспорт (Simply Static, WP2Static), повторно создайте экспорт после изменения значка, чтобы офлайн-HTML получал новые идентификаторы вложений.

Только пользователи с возможностью настройки (обычно администраторы и редакторы стандартных установок) могут изменять Иконка сайта. Авторы не могут поменять знак без повышенных прав.

На нескольких сайтах суперадминистраторы могут загружать общесетевые темы, но Иконка сайта остается для каждого сайта, если только пользовательский код не использует один URL-адрес вложения.

Аудит сторонних тем администратора, которые скрывают Внешний вид → Настроить. Возможно, вам придется повторно включить Customizer или использовать глубокую ссылку Customizer ?autofocus[section]=title_tagline.

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

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

Плагины членства, которые заменяют шаблоны внешнего интерфейса, по-прежнему должны вызывать wp_head(), чтобы выводить мета-выходы Иконка сайта.

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

Шаблоны электронной почты не используют Иконка сайта. Логотип электронной почты WooCommerce — это отдельная настройка в разделе «Внешний вид» → «Настройка» → «WooCommerce».

Если вы ранее загрузили favicon.ico по FTP в корневой каталог Интернета, Иконка сайта не удалит его. Браузеры могут непредсказуемо предпочесть один источник другому.

Выберите один подход: либо полагаться на выходные данные Иконка сайта PNG, либо оставить в корне созданный вручную ICO с соответствующим дизайном. Удалите дубликаты после контроля качества.

Классические темы с жестко закодированной ссылкой rel=icon в header.php могут противоречить ядру Иконка сайта. Удалите ручные теги при включении Иконка сайта.

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

Задокументируйте выбранный подход в своем модуле Runbook, чтобы следующий разработчик не добавил второй конфликтующий плагин favicon.