Как обновить иконки в браузере

Обновлено: 06.07.2024

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У меня есть приложение Grails, работающее локально, используя свой собственный tomcat, и я только что изменил favicon на новый. Проблема в том, что я не вижу его ни в одном браузере. Появляется старый фавикон, или я вообще не получаю никакого фавикона, но не мой новый. Я не думаю, что это проблема Грааля как таковая, скорее проблема с фавиконами.

Что должно произойти с фавиконок? Как они должны работать? У меня есть множество закладок в моем браузере, которые имеют неправильные значки, и они никогда не кажется, чтобы освежиться. Как заставить сервер / браузер прекратить их кэширование? Кажется довольно глупым всегда кэшировать их, учитывая, что они обычно только 16x16. Почему бы просто не загружать их с каждым посещением страницы? Это не совсем огромные накладные расходы.

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

наведите курсор на tab
Щелкните Правой Кнопкой Мыши
выберите "перезагрузить"
ваш фавикон теперь должен быть обновлен

переименуйте файл favicon и добавьте заголовок html с новым именем, например:

Если вы используете PHP, вы также можете использовать MD5-хэш фавикона в качестве строки запроса:

таким образом, фавикон всегда будет обновляться, когда он был изменен.

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

Если в windows и с помощью chrome, выйдите из панели задач (Ctrl+Alt + Delete) и убейте все экземпляры, а затем перейдите.

C:\Users\your_username\AppData\Local\Google\Chrome\User Data\Default

или.

%appData%/../Local/Google/Chrome/User Data/Default

и удалить файлы Favicons-journal, Favicons

затем запустите chrome

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

Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.

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

Подключение

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

Почему именно набор, а не одну иконку? Дело в том, что браузеры и экраны развиваются и не стоят на месте. Чем современнее браузер, тем более современный формат он может поддерживать. Например, вы можете подумать, что можно подключить только одну SVG-иконку и браузер уже сам правильно отрисует её, но не все браузеры до сих пор поддерживают SVG-формат для фавиконок. На таблицу совместимости SVG-фавиконок можно посмотреть тут.

Обязательная фавиконка

Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.

Для подключения нужно добавить в <head>:

Обратите внимание на две детали: размер и расположение.

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16? Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.

Расположение. Фавиконку в формате ico обязательно нужно класть в корень проекта, как это показано в примере выше. Дело в том, что любой веб-сервер незаметно для вас всегда ищет favicon.ico в корне проекта и пытается её подключить к сайту.

Дополнительные необходимые фавиконки

Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:

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

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

Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:

Для устройств Apple

Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.

Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:

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

Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из <head>, что сделает разметку более читаемой.

Манифест

Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.

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

Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).

Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки < и заканчиваться закрывающей скобкой>.

Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:

Осталось добавить фавиконки по шаблону:

Если иконок несколько, то их нужно добавить через запятую:

Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру. Например, из 512 до 256.

src — путь до иконки;

type — тип иконки;

sizes — размер иконки.

Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:

Откуда брать фавиконки и как их приготовить

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

Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:

Не добавлять фавиконки в проект.

Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.

Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.

При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.

Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.

Итоговый способ подключения фавиконки:

manifest.webmanifest

Таким способом мы будем поддерживать самые старые браузеры и самые новые.

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

Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

Возможность видеть в Safari иконки сайтов значительно упрощает взаимодействие со вкладками. Ведь по фавиконам можно быстро определить необходимую вкладку, просто посмотрев на значок. Аналогично можно поступать и в списке закладок, и в истории. Как только эта возможность появилась, ею сразу же стали пользоваться многие. Но замечали ли вы, что иногда значки сайтов отсутствуют или отображаются неправильно? В этом материале мы расскажем как обновить значки веб-сайтов в Safari на Mac.

Как удалить кэш иконок сайтов в Safari

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

1. Закройте Safari и выйдите из приложения.

2. Используя Finder, нажмите Переход → Переход к папке… в строке меню.

/Library/Safari/Favicon Cache/ во всплывающем окне и нажмите Перейти.

4. Выберите все элементы в папке кэша и переместите их в корзину. Вы можете выбрать всё с помощью сочетание клавиш ⌘Cmd + A и потом перетащить это в корзину или же щелкните правой кнопкой мыши по выделенному и выберите «Переместить в корзину».

5. Очистите корзину или удалите из нее эти элементы.

6. Откройте Safari.

Папка кэша значков Safari будет перестраиваться при посещении веб-сайтов. И вам нужно будет посетить сайты (обновить страницы), которые вы сохранили ранее, чтобы для них появились значки. Но те из них, которые отображались неправильно или отсутствовали, должны будут показываться правильно.

Альтернативный вариант

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

Откройте веб-сайт с неправильным значком в частном окне Safari. Вы можете легко сделать это, щелкнув правой кнопкой мыши Safari в доке и выбрав «Новое частное окно» или выбрав Файл → Новое частное окно в строке меню.

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

Этот вариант исходит от форума сообщества Apple. Этот метод срабатывает не для всех пользователей, но его можно и попробовать.

Как включить отображение значков (фавиконов) в Safari

Напоминаем, что для включения значков в Safari на Mac надо выполнить следующие простые шаги:

1. В запущенном и открытом Safari нажмите Safari → Настройки… в строке меню.

2. Перейдите на панель «Вкладки».

3. Установите флажок «Отображать значки веб-сайтов на вкладках», чтобы включить значки.

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

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

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

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

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

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

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

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