Шпаргалка по фавикону
— (с англ.) любимая иконка, значок для избранного.
— это иконка сайта, которая отображается на вкладке браузера вместе с названием страницы, а также в результатах поиска Яндекс, в Google — нет:
Область использования фавикона не ограничивается браузерами и поисковыми системами (не только Яндекс). В общем смысле он играет роль графического идентификатора проекта / ресурса.
Характеристики фавикона
«традиционно» — не значит обязательно (см. ниже); но по традиции, в большинстве случаев, делается именно так.
Создание, поиск и конвертация фавиконов
Программы, работающие с форматом ico : GIMP .
Онлайн сервисы: XIconEditor.Com (создание и конвертация), FindIcons.Com (поиск и конвертация).
Установка фавикона на сайт
Для установки готового (имеющего соответствующие имя и формат) фавикона на сайт, нужно просто загрузить его в корень проекта, а затем несколько раз обновить страницу в браузере.
Общий адрес фавиконов большинства ресурсов выглядит так: протокол :// домен / favicon.ico (http://w3.org/favicon.ico)
Фавикон не отображается / обновляется
- Если после установки фавикона на сайт он не появился / обновился, значит нужно очистить кэш текущей страницы. Это делается с помощью комбинации клавиш Ctrl+F5 . Данная комбинация обновляет страницу вместе с кэшированными данными. Работает она во всех популярных браузерах.
- Если очистка кэша не помогла, значит нужно убедиться в правильности расположения фавикона, открыв его через адресную строку браузера: протокол :// домен /favicon.ico Если фавикон открылся, но предыдущий, значит нужно обновить само изображение, открытое в обозревателе, с помощью всё той же комбинации клавиш Ctrl+F5 . Если же фавикон не открылся или обновление изображения не помогло, значит иконка находится не в корне проекта, а где-то в другом месте; поэтому её нужно переместить или закачать заново куда следует.
- Если выполнение описанных выше действий не привело к ожидаемым результатам, то остаётся только очистить кэш браузера «вручную» и фавикон точно должен появиться / обновиться, так как иначе что-то сделано не так, как указано выше.
Другое место расположения фавикона
Фавикон может располагаться не только в корне сайта, но и в любой другой папке, и даже на другом ресурсе. В этом случае в HTML-код страницы, между <head> и </head> , нужно добавить следующую строку:
rel=»icon» атрибут, который определяет отношения между текущим документом и файлом, на который делается ссылка (это нужно для того, чтобы браузер и поисковый робот правильно использовали последний); в данном случае его значение означает, что ссылка указывает на иконку сайта. type=»image/x-icon» — изображение в формате ico . href абсолютная или относительная ссылка на файл с фавиконом.
Другой формат фавикона
Вместо формата ico можно использовать фавикон формата gif или png . В этом случае, в коде выше, нужно изменить значение атрибута type (MIME -тип) на image/gif или image/png соответственно:
Использовать в качестве фавикона можно любые форматы изображений, поддерживаемые браузерами.
Для фавикона с именем favicon в формате ico , который находится в корне сайта, указывать его местоположение и его тип необязательно — элемент <link> , в этом случае, вовсе не нужен.
Favicon not showing up
But for some reason it doesn’t want to show in Firefox. It did work in IE, but I’m more concerned about getting it working in Firefox.
12 Answers 12
Suddenly I found answer here
You should add «?» to your favicon path and it works! Even with path such as images/favicon.ico . Just try:
<link rel=»icon» href=»/images/favicon.ico?» type=»image/x-icon»>
Other browsers works too.
Remember to restart mozilla, because of it’s own cache, that is not connected with css and other caching.
updated:
Another way is set redirect from favicon.ico to /images/favicon.ico (301 works)
I can see it in Chrome, Firefox, and IE. My friend had a problem like this when we were testing back in college. It was just a weird caching thing that made her think it wasn’t working right. I’m sure that everyone besides you will be able to see that it works fine.
Try opening the Dev Tools (CMD + Option + i on Mac) and hard refresh the page (hold the refresh button until options appear).
You could always try restarting your browser after clearing the cache and see if that helps.
Установка Favicon
Внимание! Основные требования от Яндекса для favicon
-формат SVG
-размер 120 x 120px
Почему иконка не отображается в поисковиках?
Вам нужно подождать пока поисковой робот проиндексирует сайт. Обычно это занимает 3-4 недели.
Как добавить иконку favicon.ico
1)Переходите на сайт https://perfecto-web. -generator.html
2)Выбираете размер 120px х120px
3)Выберите файл (.png или .jpg)
4)Нажмите на кнопку "Создать favicon"
5)Скачайте.
6)Переименуйте изображение на favicon
7)В Сайт-Редактор шаблонов нажимаете на кнопку "Добавить файлы" и загрузите скаченное изображение
8)Убедитесь, что название совпадает со скриншотом ниже 
9)Обязательно, обновите страницу админ панели и страницы магазина. Ваша иконка появилась. 
Как добавить иконку favicon.svg
1)Подготовьте иконку размером 120px х 120px и назовите ее favicon (Вы можете скачать ее в интернете и подогнать по размерам в Photoshop, illustrator или Figma)
2) В Сайт-Редактор шаблонов нажимаете на кнопку "Добавить файлы" и загрузите изображение
3)Убедитесь, что название совпадает со скриншотом ниже 
4)Перейдите в шаблон HTML и найдите строки
По стандарту в обоих строках присутствует название favicon.ico
Замените его на favicon.svg, а так же измените тип файла с image/x-icon на image/svg+xml
5)Обязательно обновите страницу админ панели и страницы магазина. Ваша иконка появилась.
Как сделать иконку из png в svg формате
1)Подготовьте иконку png размером 120px х 120px с названием favicon
2)Прейдите на сайт https://onlineconver. mat/png-to-svg/ выберите изображение иконки, выберите в SVG. Конвертируйте изображение.
3)Скачайте
Причины почему не отображается иконка favicon на сайте
1)Неверное название изображение при загрузке на Сайт
Неверно: favicon.ico.svg, favicon.svg.ico, 07bdfac330d036a9bd212aef80b5888a и т.д.
Верно: favicon.ico или favicon.svg
2)Неверный размер
Верно: 120px х 120px
3)Неверно прописаны строки в шаблоне HTML
Если иконка favicon.ico строки должны быть такими (одинаковое название в обеих строках)
Если иконка favicon.svg строки должны быть такими
4)Иконка некорректно отображается. Как это проверить?
Перейдите в Сайт-Редактор шаблонов Файлы и найдите вашу favicon.ico или favicon.svg. Нажмите на нее.
Если в новом окне изображение иконки появилось, то все хорошо.
Если открылось подобное сообщение, то ваша иконка некорректна. Вероятно она другого формата. Например, называется favicon.svg, а формат имеет .ico 
Прикрепленные изображения
Сообщение отредактировал Foxis_10: 25 Октябрь 2021 — 09:41
Добавлена информация про image/svg+xml
Фавикон не отображается на всех страницах IE?
Фейвикон не работает на некоторых страницах в IE. Но favicon работает на этих страницах, а также в других браузерах (протестированных в Firefox и Chrome).
Страницы, не отображающие значки в IE: ссылка — ошибка favicon в IE
Страницы, показывающие значок в IE: ссылка — favicon works
10 ответов
Вы отметили вопрос тегом doctype. Это ключ к тому, что может произойти.
Я уверен, что проблема связана с неправильными тегами HTML (или XHTML) в документе, который IE не смог отобразить значок. У меня уже было много «несвязанных» проблем из-за неправильного содержимого. Я предполагаю, что в этом случае документ, который не может отобразить значок, вызывает в IE «своего рода» режим «quirks».
К сожалению, в обоих документах так много проблем, что трудно понять, что именно вызывает запуск определенного режима IE quirks, что вызывает проблему с favicon.
Документ, в котором работает favicon, вызывает 61 ошибку и 3 предупреждения в службе валидации разметки W3C.
Документ, в котором favicon не работает в IE, поднимает 98 ошибок и 25 предупреждений в службе валидации разметки W3C.
Таким образом, вероятно, это одна из этих дополнительных 37 ошибок и 22 предупреждений в неудачном документе favicon, который делает IE слишком запутанным и неспособным разбирать вещь в целом.
Я не нырнул в ошибки и предупреждения, потому что их слишком много. Но я уверен, что если валидация прошла, на обеих страницах появятся значки.