Фавиконка — Вебмастер. Справка

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

Пример фавиконки:

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

  1. Рекомендации по формату и размеру фавиконки
  2. Как фавиконка может отображаться на сервисах Яндекса
  3. Как изменить или удалить фавиконку

Размер: 120 × 120, 32 × 32 или 16 × 16 пикселей.

Формат: SVG (рекомендуемый), ICO, GIF, JPEG, PNG, BMP. Анимация не поддерживается.

Совет. Размер 120 × 120 пикселей или формат SVG позволяют отображать логотип сайта четче и заметнее на сервисах Яндекса.

Как установить фавиконку

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

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

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

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

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

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

Прошло больше двух недель, фавиконка не появилась


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

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

Прошло больше двух недель, фавиконка не появилась


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

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

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

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

Рекомендации не помогли, прошло больше двух недель


Какие нужны фавиконки — Блог HTML Academy

Фавиконка — это favorite icon, то есть иконка для избранного. Её придумали для IE5 в 99 году, чтобы у сайтов была узнаваемая картинка. Достаточно было бросить в корень сайта файл favicon.ico и браузер сразу её подхватывал и делал красиво. До сих пор все браузеры делают запрос в корень сайта и пытаются найти там файл в формате ICO. Бросил и забыл, расходимся? Рано!

Долгое время всё прекрасно работало. В контейнер ICO можно было зашить много разных иконок: от крошечной монохромной до огромной полупрозрачной. Браузер после скачивания иконки сам выбирал нужный формат. Проблема была в том, формат ICO страшно неэффективный. Если зашить в ICO две PNG-иконки 16 и 32, то иконка будет весить в два-три раза больше, чем исходные файлы. Браузерам приходилось тянуть не только ненужные форматы, но ещё и в неэффективном виде.

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

<link rel="icon">, то браузер пойдёт не в корень, а туда, куда вы ему показали. Линковать особый адрес приходилось на каждой странице, но это же не проблема — иконка ведь всего одна! Ну правда, что могло пойти не так? Так и жили.

<link rel="icon" src="images/my.ico">

При отсутствии внятных стандартов, за дело взялась Apple. К первому Айфону прилагался прорывной мобильный браузер Safari, который тоже начал искать в корне сайта иконки, но на этот раз в формате PNG и с названием apple-touch-icon. Эту иконку видно в избранном и при добавлении сайта на домашний экран. Бросил в корень второй файл и забыл, расходимся? Нет.

Чтобы иконка была без блика сверху, нужен файл apple-touch-icon-precomposed, ещё один для ретины, потом ещё несколько для всех моделей Айпадов, тройной ретины… и в итоге вам нужно намусорить в корне или в шапке сайта целым ворохом иконок со специальными размерами: 72, 76, 114, 120, 144, 152, 180 и кажется что-то ещё. Чтобы разобраться во всех нюансах тач-иконок, читайте отличное руководство Матиаса Байненса.

<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="apple-touch-icon-180x180.png">

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

В HTML5 появилось расширенное описание<link rel="icon">: добавился атрибут sizes, чтобы указывать размеры, и атрибут type, чтобы указывать формат иконки. Например, если у вас ICO с несколькими иконками внутри, то укажите все размеры через пробел в sizes. Если иконка векторная — да, так тоже можно — укажите размер any. Главное, не забудьте указать правильные типы. Теперь-то расходимся, проблема решена? Почти.

<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="icon" href="favicon.svg" type="image/svg+xml">

Для каждой иконки писать свой линк? Сложно! А если хочется фирменный цвет указать, заставку или какие-то особенности работы всего сайта? Не иконками едиными. Вот бы нам конфиг в отдельном файле! Было и такое: browserconfig.xml для плиточных иконок IE11, JSON-манифест для иконок-виджетов табло Яндекс Браузера. Экспериментов было много, но теперь есть и стандартное решение — веб-манифест.

Спецификация Web App Manifest описывает простой JSON-файл, в котором можно указать не только все иконки, их размеры и форматы, но и полностью описать ваш сайт или приложение.

Фирменный цвет, цвет фона, язык и направление письма, полное и краткое название, ориентация, режим запуска и другое. Вы подключаете его с помощью <link rel="manifest"> на каждую страницу и браузер сразу всё знает. Хороший инспектор манифеста есть во вкладке Application отладчика Chrome.

{
  "name": "My App",
  "icons": [{
    "src": "64.png",
    "sizes": "64x64"
  }, {
    "src": "128.png",
    "sizes": "128x128"
  }],
  "display": "fullscreen",
  "orientation": "landscape",
  "theme_color": "tomato",
  "background_color": "cornflowerblue"
}

А что Apple? Что-что… До сих пор поддерживает свой формат тач-иконок и придумала даже ещё один: новый, нестандартный, как мы любим! С помощью <link rel="mask-icon"> для закреплённых вкладок Safari и кнопок на тач-баре Макбуков можно указать монохромную векторную маску и цвет для наведения. Спасибо, конечно, за вектор, но неспасибо за очередной велосипед.

<link rel="mask-icon" href="mask.svg" color="red">

Веб-манифест уже так или иначе поддерживают Chrome, Opera, Samsung Internet и Firefox, но пока только на Андроиде. В Edge он тоже скоро появится — разработка в процессе. Пока это будущий способ подключения иконок, а что делать сегодня, вот прямо сейчас? Сочетать всё, что мы знаем.

Для начала, забудьте про ICO, если только вам не нужен IE10. Подключите линком PNG-иконки: простую на 16 и 32 для ретины, чтобы было красиво в браузерной строке и закладках. Дальше подключите линком из корня сайта apple-touch-icon.png размером 180 × 180. Потом подключите веб-манифест, в котором указана иконка на 192 для Андроида. Ну и можно там же упомянуть 16, 32, вектор, цвета и название — пригодится.

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

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

Ну что, чуда не произошло и всё по-старому: мусор в шапке, мусор в корне? Знаете, нет, я верю, что со временем веб-манифест наведёт порядок, поэтому подключайте его уже сегодня. Вот выбросим мусор и заживём!

Как установить фавикон?

  1. Шаг 1. Разместите фавикон на сайте
  2. Шаг 2. Проверьте, доступен ли значок роботу Яндекса
  3. Шаг 3. Проверьте, как отображается фавикон в результатах поиска

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

  1. Поместите файл с именем favicon в корневой каталог сайта. Обратите внимание на рекомендации.

  2. Добавить ссылку на файл в HTML-код главной страницы сайта, в элементе head.

     <голова>
        . ..
        
    ...
    Атрибут Описание Возможные значения
    REL.

  3. ярлык используется Internet Explorer.

  4. href URL-адрес файла Чтобы ввести кириллический URL-адрес фавикона, используйте Punycode. Например, для адреса https://мой-сайт.рф/favicon.ico укажите https://xn—-8sbzclmxk.xn--p1ai/favicon.ico.
    тип Тип данных для отправки. Зависит от формата файла
    • image/svg+xml для формата SVG.

    • image/x-icon или image/vnd.microsoft.icon для формата ICO.

    • изображение/gif для формата GIF.

    • изображение/jpeg для формата JPEG.

    • изображение/png для формата PNG.

    • изображение/bmp для формата BMP.

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

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

  1. Убедитесь, что:

    • Файл доступен по прямой ссылке (ответ сервера 200 OK). Используйте инструмент проверки ответа сервера.

    • Файл не запрещен к индексации (например, директивой Disallow в файле robots.txt). Проверить запреты индексации для самого файла и для каталога, в котором он находится.

  2. При необходимости внести изменения.

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

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

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

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

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

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

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

Прошло больше двух недель, а фавикон так и не появился


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

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

Прошло более двух недель, а фавикон так и не появился


Это может произойти, если:

  • Разные фавиконки сайтов размещены по разным URL. Если к сайту можно получить доступ по URL-адресам с префиксом «www» или без него, а также по протоколам HTTPS и HTTP, убедитесь, что значок значка везде одинаков или что он является правильным для индексации для каждого из сайтов.

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

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

Рекомендации не помогли и прошло более двух недель


allow-dupes.mn — mozsearch

Включить сочетания клавиш
Исходный код
  • Сообщить об ошибке в Firefox :: Installer
Контроль ревизий
  • Постоянная ссылка Y
  • Лог L
  • Сырой R
  • Обвинять
Копировать как Markdown
Другие инструменты
  • HG Веб
  • Покрытие кода

# Известные дубликаты файлов

# Этот файл в идеале должен быть удален, но для некоторых существующих файлов будут разрешены исключения

# См. ошибку 1303184

# ПОЖАЛУЙСТА, НЕ ДОБАВЛЯЙТЕ БОЛЬШЕ ИСКЛЮЧЕНИЙ В ЭТОТ СПИСОК

# средство обновления на osx - ошибка 1311194

LaunchServices/org.mozilla.updater

updater.app/Contents/MacOS/org.mozilla.updater

плагин-контейнер.app/Contents/PkgInfo

updater.app/Contents/PkgInfo

# Дублируется в Linux браузером/branding/branding-common.mozbuild

#ifdef XP_LINUX

браузер/хром/браузер/контент/бренд/icon16. png

браузер/chrome/icons/default/default16.png

браузер/хром/браузер/контент/бренд/icon32.png

браузер/chrome/icons/default/default32.png

браузер/хром/браузер/контент/бренд/icon48.png

браузер/chrome/icons/default/default48.png

браузер/хром/браузер/контент/бренд/icon64.png

браузер/chrome/icons/default/default64.png

браузер/хром/браузер/контент/бренд/icon128.png

браузер/хром/значки/по умолчанию/по умолчанию128. png

#endif

хром.манифест

браузер/chrome.manifest

crashreporter.app/Contents/Resources/English.lproj/MainMenu.nib/classes.nib

crashreporter.app/Contents/Resources/English.lproj/MainMenuRTL.nib/classes.nib

# firefox/firefox-bin это ошибка 658850

@MOZ_APP_NAME@

@MOZ_APP_NAME@-bin

# Значки строк и столбцов дублируются

res/table-remove-column-active. gif

res/table-remove-row-active.gif

res/table-remove-column-hover.gif

res/table-remove-row-hover.gif

res/table-remove-column.gif

res/table-remove-row.gif

res/multilocale.txt

update.locale

# Ошибка 1451016 - Совместное использование кода платежного запроса и автозаполнения только в ночное время.

browser/features/[email protected]/chrome/content/editAddress.xhtml

браузер/хром/браузер/res/платежи/formautofill/editAddress. xhtml

browser/features/[email protected]/chrome/content/editCreditCard.xhtml

браузер/хром/браузер/рес/платежи/formautofill/editCreditCard.xhtml

browser/features/[email protected]/chrome/content/autofillEditForms.js

браузер/хром/браузер/рес/платежи/formautofill/autofillEditForms.js

# Ошибка 1451050 - пустые дампы удаленных настроек (в конечном итоге данные будут заполнены)

браузер/по умолчанию/настройки/основной/example.json

браузер/по умолчанию/настройки/основной/пароль-rules.json

браузер/по умолчанию/настройки/основной/поиск-по умолчанию-override-allowlist. json

браузер/по умолчанию/настройки/основной/url-classifier-skip-urls.json

# Ошибка 1713693 — empty-shim.txt, преднамеренно пустой файл, используемый SmartBlock (0 байт)

#ifdef MOZ_GTK

браузер/функции/[email protected]/shims/empty-shim.txt

удаленные-файлы

#endif

#ifdef MOZ_EME_WIN32_ARTIFACT

gmp-clearkey/0.1/manifest.json

i686/gmp-clearkey/0.1/manifest.json

#endif

# Ошибка 1496075 — переключить поисковые плагины на веб-расширения

браузер/хром/браузер/поиск-расширения/amazon/favicon. ico

браузер/хром/браузер/поиск-расширения/amazondotcn/favicon.ico

браузер/хром/браузер/поиск-расширения/amazondotcom/favicon.ico

браузер/хром/браузер/поиск-расширения/mercadolibre/favicon.ico

браузер/хром/браузер/поиск-расширения/mercadolivre/favicon.ico

браузер/хром/браузер/поиск-расширения/qwant/favicon.ico

браузер/хром/браузер/поиск-расширения/qwantjr/favicon.ico

# Ошибка 1606928 - Нет надежного способа связать значки популярных сайтов с значками в службе поиска.

браузер/хром/браузер/контент/активность-поток/данные/контент/tippytop/favicons/bbc-uk. ico

браузер/хром/браузер/поиск-расширения/bbc-alba/favicon.ico

браузер/хром/браузер/контент/активность-поток/данные/контент/tippytop/favicons/allegro-pl.ico

браузер/хром/браузер/поиск-расширения/аллегро-pl/favicon.ico

браузер/хром/браузер/контент/активность-поток/данные/контент/tippytop/favicons/amazon.ico

браузер/хром/браузер/контент/активность-поток/данные/контент/tippytop/favicons/ebay.ico

браузер/хром/браузер/поиск-расширения/ebay/favicon.ico

браузер/хром/браузер/контент/активность-поток/данные/контент/tippytop/favicons/twitter-com. ico

браузер/хром/браузер/поиск-расширения/твиттер/favicon.ico

браузер/хром/браузер/контент/активность-поток/данные/контент/tippytop/favicons/bing-com.ico

браузер/хром/браузер/поиск-расширения/bing/favicon.ico

браузер/хром/браузер/контент/активность-поток/данные/контент/tippytop/favicons/duckduckgo-com.ico

браузер/хром/браузер/поиск-расширения/ddg/favicon.ico

browser/chrome/browser/content/activity-stream/data/content/tippytop/favicons/google-com.ico

браузер/хром/браузер/поиск-расширения/google/favicon.ico

браузер/хром/браузер/контент/активность-поток/данные/контент/tippytop/favicons/yandex-com. png

браузер/chrome/браузер/search-extensions/yandex/yandex-ru.ico

browser/chrome/browser/content/activity-stream/data/content/tippytop/favicons/yandex-ru.png

браузер/chrome/браузер/search-extensions/yandex/yandex-ru.ico

# Ошибка 1720584 - Удаление дубликатов темы и настройка значков

chrome/toolkit/skin/classic/mozapps/extensions/themeGeneric.svg

браузер/хром/браузер/скин/классический/браузер/настроить.svg

# Ошибка 1718144 - Удаление дубликатов значка лампочки

браузер/функции/webcompat-reporter@mozilla.

Автор записи

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

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