Фавикон не отображается в браузере

Обновлено: 05.07.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сначала установите и активируйте плагин на своем сайте.

Установите плагин RealFaviconGenerator

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

Настройки фавикона

Перейдите в раздел «Внешний вид> Фавикон» и выберите свой фавикон в Медиатеке. Если у вас нет значка, оставьте поле «URL основного изображения» пустым и нажмите кнопку «Создать значок».

Выбрать изображение из библиотеки

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

Выберите изображение с компьютера

Прокрутите вниз и нажмите кнопку «Создать свой значок и HTML-код».

Создать Favicon и HTML

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

Предварительный просмотр и проверка значка

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

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

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

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

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

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

Подготовьте изображение своего значка с помощью бесплатного инструмента для создания значка. Убедитесь, что изображение имеет формат .ico, .jpg или .jpg и имеет размер 16 x 16 пикселей.
Войдите на свой веб-сервер с помощью FTP или используйте приложение File Manager на панели хостинга и загрузите изображение значка в корневой каталог вашей установки WordPress. Если вы хотите загрузить изображение из библиотеки мультимедиа в панели администратора, убедитесь, что указан правильный путь к файлу.
Если у вас есть сомнения, откройте файл изображения в браузере. У вас должна быть возможность получить доступ к изображению, как и к любым другим изображениям на вашем сайте.
Теперь перейдите в «Внешний вид> Редактор тем» и найдите файл header.php вашей темы.
Вставьте приведенный ниже код в файл header.php вместе с другими метатегами.

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

Вставить метатег ссылки в файл темы

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

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

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

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

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

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

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

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

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

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

Удалить кешированные файлы в браузере

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

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

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

Если в HTML-коде страницы ссылка на фавиконку прописана несколько раз, робот выберет иконку на свое усмотрение.

Проверьте, отображается ли фавиконка в адресной строке браузера при просмотре страниц сайта.

Шаг 2. Проверьте доступность фавиконки для робота Яндекса

Файл доступен по прямой ссылке (ответ сервера 200 OK) — воспользуйтесь инструментом Проверка ответа сервера. Файл не запрещен для индексирования, например в robots.txt с помощью директивы Disallow. Может быть запрещен не сам файл, а каталог, в котором он размещается.

Проверьте, что робот загрузил файл. Это может произойти, когда робот посетит ваш сайт. В течение нескольких дней после добавления фавиконки на сайт перейдите в Яндекс.Вебмастер, на страницу Диагностика  → Диагностика сайта . Если в блоке Возможные проблемы отображается предупреждение о проблемах с фавиконкой, следуйте указаниям:

Ошибка	Решение
Файл отвечает HTTP-кодом, отличным от 200 OK	Проверьте ответ сервера. Ответ должен соответствовать 200 OK. Другие статусы ответа см. в разделе Проверка ответа сервера.
Файл перенаправляет на другой адрес
Неправильный тип данных	Проверьте значение параметра type в ссылке на файл. Он должен соответствовать формату файла.

Ошибка	Решение
Файл отвечает HTTP-кодом, отличным от 200 OK	Проверьте ответ сервера. Ответ должен соответствовать 200 OK. Другие статусы ответа см. в разделе Проверка ответа сервера.
Файл перенаправляет на другой адрес
Неправильный тип данных	Проверьте значение параметра type в ссылке на файл. Он должен соответствовать формату файла.

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

Шаг 3. Проверьте отображение фавиконки в выдаче

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

Чтобы ваш вопрос быстрее попал к нужному специалисту, уточните тему:

Фавиконка не появляется для моего сайта У сайта пропала фавиконка В поиске отображается некорректная или старая фавиконка Теоретический вопрос про индексирование фавиконок

Если все требования по размещению фавиконки выполнены, то для индексирования и появления ее в результатах поиска необходимо около двух недель.

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

Также, проверьте, правильно ли размещена фавиконка. Если она прописана корректно, дождитесь следующего обновления базы фавиконок, это занимает около двух недель.

Такая ситуация возникает, если:

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

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

Фавиконка — это небольшая картинка, которая отображается в сниппете в результатах поиска Яндекса, рядом с адресом сайта в адресной строке браузера, около названия сайта в Избранном или в Закладках браузера .

Пример отображения фавиконки в результатах поиска:

Как фавиконка может отображаться на сервисах Яндекса

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

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

Как изменить или удалить фавиконку

Чтобы фавиконка изменилась в результатах поиска, обновите фавиконку на сайте. Чтобы удалить фавиконку из поиска, удалите файл с сайта. Изменения вступят в силу в течение двух недель после очередного посещения сайта роботом.

Чтобы ваш вопрос быстрее попал к нужному специалисту, уточните тему:

Такая ситуация возникает, если:

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

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

Если человек добавляет понравившийся веб-ресурс в «Избранное», то фавикон также остается перед ссылкой.

Фавикон — это графический файл, путь к которому указывается в метатегах. Он создается в любом графическом редакторе или при помощи онлайн-сервисов.

Как правильно размещать фавиконку

Создайте файл формата ico. Допускаются также еще 4 формата: png, а также gif, bmp и jpeg. Размер файла в пикселях должен быть 16 пикс., 32 или 120 (квадратный).
В head главной странице добавьте код:
Для указания адреса на кириллице применяйте Punycode.
Проверьте отображение иконки в браузере:

Если вы действовали по правилам, и ваш веб-ресурс проиндексирован «Яндексом», то через 2 недели после захода робота на сайт появится ваша иконка.

Как «Яндекс» работает с иконками

Яндекс.Бот Yandex/1.02.000, собирающий фавиконки, по расписанию посещает главную страницу каждого сайта в индексе, где HTML ищет путь к favicon.ico.
Если путь не прописан, бот идет в корень.
Иконка преобразовывается в png размером 16*16, затем загружается на сервер фавиконок.
Бот периодически проверяет иконку заново — частота его захода зависит от частоты обновления вашего веб-ресурса.

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

Как проверить, что фавикон корректно отображается в «Яндексе»

Что делать, если «Яндекс» не видит favicon

Попробуйте открыть фавиконку в браузере по прямой ее ссылке. Если этот файл открывается, значит, все в порядке (сервер отдает 200 ОК).
Если не открывается, проанализируйте, не запрещен ли вышеуказанный файл к индексации в robots.txt, или, может быть, есть ошибка в его названии или в метатегах.
Проверьте логин на посещение веб-ресурса роботом-поисковиком, найдите запись:

Если такая запись есть, значит, робот проиндексировал файл.

Варианты решения проблемы

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

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

Как определить, что сайт под фильтром

Следует устранить все нарушения и проблемы на сайте для того, чтобы выйти из-под фильтров. После этого иконка появится в поиске Yandex.

Проблема с Яндекс.Директ

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

Еще один вариант — иконка может быть не видна, если сайт в выдаче находится очень далеко (за 10 страницей). Работайте над улучшением качества вашего веб-ресурса, используйте белые методы продвижения, и иконка со временем обязательно появится.

– Только качественный трафик из Яндекса и Google
– Понятная отчетность о работе и о планах работ
– Полная прозрачность работ

Читайте также: