Как исправить фавикон WordPress, который не отображается в браузерах?

Favicon — это небольшой значок, который отображается в строке заголовка браузера. Браузеры используют этот значок для отображения вкладки при закреплении веб-страницы. Некоторые поисковые системы также показывают значок в результатах поиска, что делает его фирменным значком для веб-сайтов. Google является хорошим примером того, что большинство из нас может найти простой значок G, обозначающий веб-сайт Google Search. Однако есть много причин, по которым ваш значок WordPress может не отображаться в таких браузерах, как Google Chrome. Если вы изо всех сил пытаетесь решить проблему, вот несколько вариантов, которые вы можете попробовать.

Фавикон WordPress в браузере

Ниже показано, как значок будет отображаться в браузере настольного компьютера Google Chrome.

Значок в строке заголовка Chrome
Значок в строке заголовка Chrome

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

Фавикон на закрепленной вкладке
Фавикон на закрепленной вкладке

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

Фавикон в приложении iPhone Safari
Фавикон в приложении iPhone Safari

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

Исправить фавикон WordPress, который не отображается в Google Chrome

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

1. Проверьте настройки WordPress Favicon.

WordPress позволяет добавить значок на ваш сайт. После входа в панель администратора перейдите в раздел «Внешний вид> Настройка> Идентификация сайта» и загрузите изображение своего значка. В отличие от стандартных размеров изображений значков, значок сайта WordPress должен быть размером 512 x 512 пикселей.

Вариант фавикона в WordPress
Вариант фавикона в WordPress

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

2. Удалите фавикон вашей темы.

Многие коммерческие темы предлагают настраиваемую панель тем для загрузки логотипа и значка. Если вы уже используете функцию значка сайта по умолчанию WordPress, обязательно отключите настройки вашей темы для значка. Это поможет избежать дублирования использования одной и той же функции в разных местах, что потенциально может сбить с толку браузер, не отображающий значок.

3. Используйте плагин Favicon.

Рекомендуемый размер значка для отображения в строке заголовка браузера — 16 x 16, 32 x 32 или 48 x 48 пикселей. Однако WordPress предлагает использовать 512 x 512 пикселей, поскольку WordPress использует тот же значок, что и значок мобильного приложения. К сожалению, этот больший размер изображения может вызвать проблемы с его правильным отображением. Поскольку вам нужны изображения разных размеров для разных устройств, вы можете попробовать такие плагины favicon, как RealFaviconGenerator.

  • Сначала установите и активируйте плагин на своем сайте.
Установите плагин RealFaviconGenerator
Установите плагин RealFaviconGenerator
  • Перейдите в меню «Настройки> Favicon» и включите «Отображать уведомления об обновлениях», чтобы получать информацию при наличии обновления плагина.
Настройки Favicon
Настройки Favicon
  • Перейдите в раздел «Внешний вид> Фавикон» и выберите свой фавикон в Медиатеке. Если у вас нет значка, оставьте поле «URL основного изображения» пустым и нажмите кнопку «Создать значок».
Выбрать изображение из библиотеки
Выбрать изображение из библиотеки
  • Это приведет вас на сайт разработчика, где вы можете создать значок, используя другой параметр. Мы рекомендуем создать значок с помощью бесплатного инструмента для создания значков и загрузить его в качестве основного изображения.
Выберите изображение с компьютера
Выберите изображение с компьютера
  • Прокрутите вниз и нажмите кнопку «Создать свой значок и HTML-код».
Создать Favicon и HTML
Создать Favicon и HTML
  • Вы автоматически вернетесь в панель администратора и увидите предварительный просмотр ваших изображений на разных платформах. Вы также можете мгновенно проверить свой значок, чтобы увидеть, как он выглядит в браузере.
Предварительный просмотр и проверка значка
Предварительный просмотр и проверка значка

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

Свяжите метатеги в исходном коде
Свяжите метатеги в исходном коде

Вы можете попробовать этот плагин, чтобы добавить файл favicon.ico размером 48 x 48 пикселей, если значок сайта WordPress по умолчанию не работает на вашем сайте. Кроме того, плагин поможет вам создавать значки для разных устройств, таких как iOS и macOS Safari. Единственное, вам нужно поддерживать плагин активным, чтобы постоянно использовать значок на вашем сайте.

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

4. Загрузка значка вручную

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

  • Подготовьте изображение своего значка с помощью бесплатного инструмента для создания значка. Убедитесь, что изображение имеет формат .ico, .gif или .png и имеет размер 16 x 16 пикселей.
  • Войдите на свой веб-сервер с помощью FTP или используйте приложение File Manager на панели хостинга и загрузите изображение значка в корневой каталог вашей установки WordPress. Если вы хотите загрузить изображение из библиотеки мультимедиа в панели администратора, убедитесь, что указан правильный путь к файлу.
  • Если у вас есть сомнения, откройте файл изображения в браузере. У вас должна быть возможность получить доступ к изображению, как и к любым другим изображениям на вашем сайте.
  • Теперь перейдите в «Внешний вид> Редактор тем» и найдите файл header.php вашей темы.
  • Вставьте приведенный ниже код в файл header.php вместе с другими метатегами.
<link rel="icon" type="image/png" href="https://www.webnots.com/favicon.png">
  • Он должен выглядеть, как показано ниже, и не забудьте использовать правильный URL-адрес для изображения вашего значка.
Вставить метатег ссылки в файл темы
Вставить метатег ссылки в файл темы
  • Нажмите кнопку «Обновить файл», чтобы сохранить изменения.
  • Если вы не хотите редактировать файл темы для этой цели, вы можете использовать плагины, такие как Insert Headers and Footers, и вставить приведенный выше код в область раздела заголовка.

Теперь откройте свой сайт и убедитесь, что значок отображается в строке заголовка.

5. Удалите значок хостинга по умолчанию.

Еще одна проблема с favicon заключается в том, что многие хостинговые компании, такие как Bluehost и HostGator, используют свои собственные значки на некоторых страницах. Например, когда вы просматриваете изображения или исходный код, вы увидите значки HostGator и Bluehost вместо значка вашего сайта.

Хостинговая компания Favicon
Хостинговая компания Favicon

Этого не происходит с SiteGround и другими хостинговыми компаниями. Что вы можете сделать, так это проверить установку root, чтобы увидеть, есть ли какой-либо доступный значок, и заменить его своим собственным значком. В противном случае обратитесь в службу поддержки хостинга, чтобы проверить, можно ли вообще решить эту проблему.

Другая проблема может возникнуть из-за расположения значка. На нашем сайте мы используем отдельный поддомен для хранения всех медиафайлов. Это может создать проблему, если вы не укажете правильный путь к изображению в значении href мета-ссылки. Поэтому убедитесь, что указан правильный путь, и убедитесь, что ваше изображение доступно в указанном вами месте, чтобы избежать каких-либо проблем.

6. Фавикон в Mac Safari

Некоторые браузеры, такие как Safari в macOS, работают иначе. Вы можете включить или отключить значок в соответствии с вашими потребностями. Ознакомьтесь с нашей статьей о том, как включить значок в Safari, и убедитесь, что вы включили этот параметр, если ваш браузер предлагает эту функцию.

7. Очистите кеш сайта и браузера.

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

  • Очистите кеш на своем сайте, если вы используете плагины кеширования, такие как WP Rocket, W3 Total Cache и т. Д.
  • Затем выйдите из панели администратора и нажмите «Control + Shift + Delete» в Windows или «Command + Shift + Delete» в macOS. Откроется всплывающее окно очистки истории просмотров. Выберите параметры «История просмотров» и «Кэшированные изображения и файлы» и удалите их.
  • Теперь откройте свой сайт и убедитесь, что в браузере отображается правильный значок.
Удалить кешированные файлы в браузере
Удалить кешированные файлы в браузере

На мобильных устройствах вам нужно перейти в раздел настроек или истории и очистить данные о просмотре.

Заключительные слова

Раньше фавикон использовался только браузерами. Однако один и тот же тег мета-ссылки используется для разных значков, таких как apple-touch-icon для iOS. Поэтому рекомендуется использовать все необходимые значки на своем сайте и проверить, работают ли они в браузере и на других устройствах. Значок сайта WordPress по умолчанию может быть недостаточным в этом случае, и вам нужно использовать свои собственные метатеги или использовать тему или плагин, которые предлагают эту функцию.

Похожие записи

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

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