Фавикон не отображается — руководство по устранению неполадок
Вы загрузили значок, но на вкладке по-прежнему отображается обычный глобус или старый логотип. В этом руководстве рассматриваются наиболее распространенные причины — кеширование, неправильные пути, отсутствующие файлы и конфликтующие теги <link> — в том порядке, в котором вы должны их проверять.
Браузеры кэшируют значки более агрессивно, чем любой другой ресурс. Принудительное обновление (Ctrl+Shift+R или Cmd+Shift+R) устраняет многие ложные срабатывания. Если это не помогло, добавьте один раз строку запроса версии: /favicon.ico?v=2.
Убедитесь, что файл существует по URL-адресу, запрашиваемому браузером. Откройте /favicon.ico прямо в новой вкладке. Ошибка 404 означает, что файл развернут не там, где вы думаете, что характерно для сборок SPA, которые обслуживают только index.html.
Проверьте пути к ссылкам <link rel="icon">. Абсолютные пути (/favicon.ico) работают на каждой странице; относительные пути (favicon.ico) разбиваются на вложенных маршрутах, таких как /blog/post.
Если вы используете CDN, очистите пути к значкам после развертывания. Некоторые CDN кэшируют ответы 404 для /favicon.ico, когда файл отсутствовал во время первого запроса.
Несколько тегов <link rel="icon"> могут сбить с толку старые браузеры. Сначала поместите favicon.ico, затем варианты PNG/SVG с явными атрибутами типа и размера.
WordPress, Shopify и статические хосты внедряют свои собственные теги. Просмотрите исходный код страницы и найдите rel="icon" — частая причина — повторяющиеся или переопределенные теги.
Предупреждения о смешанном контенте HTTPS блокируют URL-адреса значков HTTP на защищенных страницах. Передавайте каждый значок через HTTPS.
При локальной разработке некоторые браузеры отказываются обновлять значки, пока вы не очистите данные сайта для localhost.
Как это работает
- 1
Проверьте URL-адрес файла
Откройте /favicon.ico в новой вкладке — ожидайте 200, а не 404.
- 2
Проверьте теги <head>
Посмотреть источник; подтвердите одну каноническую ссылку favicon.ico и отсутствие опечаток.
- 3
Перебрать кэш один раз
Добавьте ?v=2 в href, разверните, обновите, а затем при необходимости удалите запрос.
Попробовать сейчас
Проверьте свой живой значок
Онлайн-тестер faviconЧастые вопросы
Почему мой значок работает локально, но не работает в рабочей среде?+
Производственные сборки часто выводятся в подкаталог или префикс CDN. Убедитесь, что развернутый путь соответствует вашему <link> href и что файл включен в выходные данные сборки.
Как скоро Google обновит мой значок в результатах поиска?+
Повторное сканирование Google может занять от нескольких дней до недель. Убедитесь, что значок имеет размер не менее 48×48, квадратный и общедоступен по стабильному URL-адресу.
Скрывает ли блокировка рекламы или режим конфиденциальности значки?+
Редко для сторонних иконок. Сторонние прокси-серверы favicon могут быть заблокированы; Самостоятельно размещаемые значки в вашем домене не затрагиваются.
Стоит ли удалять кеш значков браузера?+
Очистите данные сайта для своего домена в настройках браузера или протестируйте в приватном окне с отключенным кешем.