Фавикон для WordPress

WordPress изначально обрабатывает внедрение значков сайта с помощью функции Site Icon, представленной в WordPress 4.3. Когда вы загружаете изображение в Customizer, WordPress автоматически обрезает его, генерирует варианты меньшего размера и вставляет правильные теги `<link rel='icon'>` и `<link rel='apple-touch-icon'>` на каждую страницу. Для подавляющего большинства сайтов не требуется никаких изменений плагинов или кода.

Чтобы получить доступ к настройке значка сайта, войдите в свою панель администратора WordPress и выберите «Внешний вид» > «Настроить». На левой боковой панели нажмите «Удостоверение сайта». В нижней части панели вы увидите поле загрузки значка сайта. Нажмите «Выбрать изображение», загрузите значок, обрежьте его, если будет предложено, и нажмите «Опубликовать». Ваш значок сразу же активируется при следующей загрузке страницы.

WordPress требует минимального размера изображения 512×512 пикселей для значка сайта. Загрузите квадрат PNG с таким разрешением или больше — WordPress автоматически создаст меньшие варианты (16×16, 32×32, 180×180) из источника. Никогда не загружайте маленькое изображение и не ждите, что WordPress увеличит его масштаб; в результате значок на вкладках браузера будет размытым.

PNG — рекомендуемый формат для загрузки значков WordPress. Платформа также поддерживает форматы JPEG и GIF, но JPEG не поддерживает прозрачность, а GIF обеспечивает плохое сжатие фотографических логотипов. Прозрачный фон PNG гарантирует, что ваш значок будет выглядеть четко на фоне любой темы браузера, включая панели вкладок в темном режиме.

Если в вашей теме используется редактор сайта Gutenberg (полное редактирование сайта), путь к значку сайта может немного отличаться. Откройте «Внешний вид» > «Редактор» > «Стили» или используйте настройки блока логотипа сайта. Некоторые темы блоков также предоставляют поле значка на панели «Глобальные настройки». Базовая функция WordPress та же самая — меняется только путь к пользовательскому интерфейсу администратора.

Для расширенного контроля — например, предоставления другого значка в подкаталоге магазина, а не в блоге — вы можете программно переопределить URL-адрес значка сайта. Добавьте это в functions.php вашей темы или в плагин для конкретного сайта: `add_filter('get_site_icon_url', function($url, $size, $blog_id) { return 'https://example.com/custom-favicon.png'; }, 10, 3);`. Это полностью обходит Customizer и позволяет отображать любой значок с любого URL-адреса.

Некоторые плагины для создания страниц (Elementor, Divi, Beaver Builder) добавляют свои собственные настройки значков, которые могут конфликтовать с WordPress Customizer. Проверьте панель настроек сайта вашего конструктора страниц и удалите там все переопределения значков, а затем повторно настройте их через собственный WordPress Customizer. Наличие двух конкурирующих тегов значков на одной странице может привести к противоречивым результатам в разных браузерах.

Для установки WordPress на нескольких сайтах каждый дочерний сайт должен иметь свой собственный значок сайта, установленный индивидуально. Настройки администратора сети не передаются каскадно на дочерние сайты. Если вам нужен общий значок для всей сети, используйте подход с программной фильтрацией и подключите URL-адрес значка сайта на уровне сети с помощью обязательного плагина (mu-plugins).

Плагины кэширования, такие как WP Rocket, W3 Total Cache или LiteSpeed ​​Cache, могут задерживать обновление значков. После изменения значка сайта очистите все уровни кеша: кеш объекта WordPress, кеш страницы, кеш CDN и кеш браузера. Если старый значок сохраняется, добавьте `?v=2` к ссылке на значок вручную в HTML или дождитесь истечения срока TTL кэша.

Чтобы проверить, что WordPress выводит правильные теги значков, щелкните правой кнопкой мыши свой сайт в браузере, выберите «Просмотреть исходный код страницы» и найдите `rel='icon'`. Вы должны увидеть запись favicon.ico и запись apple-touch-icon, указывающие на загруженное вами изображение. Если какой-либо из них отсутствует, возможно, ваша тема переопределяет `wp_head()` — убедитесь, что `<?php wp_head(); ?>` вызывается в header.php вашей темы.

Сторонние SEO-плагины WordPress, такие как Yoast SEO и Rank Math, включают свои собственные социальные метаданные и метаданные схемы, но не мешают значку сайта. Однако, если вы установили плагин для значков значков несколько лет назад до того, как WordPress добавил встроенную поддержку, этот плагин теперь может конфликтовать. Деактивируйте все устаревшие плагины значков перед использованием встроенной опции Customizer.

Для сайтов, размещенных на сайте WordPress.com (в отличие от сайтов WordPress.org, размещенных на собственном хостинге), путь к значку находится в разделе «Мои сайты» > «Настройки» > «Основные» > «Значок сайта». Шаги почти идентичны самостоятельному процессу Customizer, но редактирование тем и плагинов ограничены в зависимости от вашего плана. Загрузите PNG размером 512×512 и сохраните — WordPress.com берет на себя все изменения размера и внедрение тегов.

После установки значка убедитесь, что он работает правильно, используя favicon tester, введя URL-адрес вашего сайта. Это подтверждает, что значок общедоступен и отображается по ожидаемому пути. Также проверьте best favicon size, чтобы понять, какие разрешения генерирует WordPress и нужно ли добавлять их вручную для поддержки PWA.