Favicon yandex net что это: Фавиконка

Posted:

Сен 25, 2020

Comments:

Favicon yandex net что это: Фавиконка — Поиск. Справка

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

что это, зачем нужен и как создать

Пример полноценного логотипа и фавикона на его основе от дизайнера Mehedi Islam. Источник

Зачем нужен favicon

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

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

С фавиконом бренд запомнят быстрее, поскольку удачно подобранная картинка вызывает ассоциации с ним. Увидев сначала фавиконку, пользователь вспомнит и о бренде.

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

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

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

Правила создания favicon

Чаще всего для фавиконки берут логотип бренда, адаптируя его под маленький размер. Если логотипа нет, можно взять основные (в идеале контрастные) цвета, используемые для оформления веб-ресурса. В этих цветах создают знак, который будет вызывать у потребителя ассоциации с деятельностью компании. Часто это первая буква названия компании.
Мелкие детали на фавиконке не будут видны, поэтому текст и другие маленькие элементы лучше не использовать.
Фавиконка в идеале должна отличаться от конкурентных. Например, яркий цвет или запоминающийся символ, связанный с тематикой бренда, поможет выделить сайт.
Чтобы favicon в разных местах размещения отображался корректно и в хорошем качестве, его лучше создавать в двух вариантах. Для вкладок в браузере и для поисковой выдачи следует сделать фон прозрачным. Во второй версии лучше использовать сплошную заливку фона.
Не менее важно соблюсти и технические требования. Причем для разных браузеров и поисковых систем они свои. Подробнее с условиями вы сможете ознакомиться в справках конкретного браузера, Яндекса или Google. Всю важную информацию о разрешении и форматах значков мы приводим ниже.

Варианты иконок приложения в разных цветах от дизайнера Rohanur Rahman Reon. Источник

Размер фавикона

Фавикон измеряется в пикселях. Требования к размерам определяют, исходя из вида устройства и браузера.

У поисковых систем допустимые размеры и рекомендуемые форматы фавиконок отличаются:

Яндекс рекомендует формат SVG. Он векторный, для него неактуальны конкретные размеры (так как в векторе нет пикселей), и в нем фавикон будет лучшего качества. Можно применять и другие распространенные форматы: ICO, PNG, JPEG и др. Размеры иконок в них — 120×120, 32×32 или 16×16 px.
В Google есть возможность добавлять фавикон только в мобильную версию. Здесь другие требования. Разрешен размер, кратный 48 пикселям, например 48×48 или 144×144 px. При изменении масштаба качество картинки такого размера не пострадает.

Android-гаджеты с браузером Chrome допускают фавиконки формата png и размером 192×192 px. Операционная система Safari для Apple предусматривает множество вариантов png-иконки в зависимости от размера ссылки на сайт: от 57×57 до 152×152 и даже 180×180 px. На размер фавиконки также влияет и формат. Например, для SVG-формата точных размеров для картинки нет, она просто должна быть квадратной.

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

Фавиконки в разных цветах вместе с пакетом вспомогательных иконок для сайта от bisma shaukat. Источник

Форматы фавикона

Растровые форматы ICO и PNG являются основными для фавиконки. Особенность формата ICO в том, что он в одном файле хранит картинки разных размеров. Но современные браузеры умеют подтягивать нужные размеры из разных файлов, поэтому ICO не так распространен, как раньше. Еще одна причина ухода этого формата — большой вес в том случае, если он хранит в себе много иконок разных размеров. Большинство браузеров, ОС и устройств поддерживает формат PNG. Он более распространен, чем ICO, меньше весит и позволяет создать изображение без фона (с прозрачным фоном).

Однако совсем отказываться от ICO не стоит. Некоторые старые браузеры, например Internet Explorer версии 10 и ниже, работают только с этим форматом. А если пользователю понадобится сохранить ссылку на сайт на рабочем столе Windows, ICO-файл тоже придет на помощь. Если вы знаете, что юзеры заходят через старые браузеры или сохраняют ссылки на компьютере, — лучше запастись ICO.

Другие разрешенные форматы иконок — SVG, GIF и JPEG — совместимы не со всеми браузерами. Например, формат JPEG в некоторых системах может отображаться некорректно (совсем без картинки или как «битый» файл).

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

Варианты иконок приложения в разных цветах от дизайнера Rohanur Rahman Reon. Источник

Онлайн-сервисы для создания фавиконки

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

Favicon.by. В программе можно самому нарисовать иконку для сайта по пикселям или подкорректировать уже имеющуюся. Здесь можно загрузить картинку с компьютера или с сайта и потом отредактировать. Просмотр результата возможен до скачивания. В итоге вы получаете фавикон в формате ICO и размере 16×16 px.

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

Favicon.io. Этот сервис позволяет сделать фавикон из текста, картинки и даже эмодзи. Вы можете сами выбрать цвет иконки или общий фон. В результате получаются фавиконы нескольких размеров в формате ICO и PNG. Можно скачать иконку или вставить ее сразу на сайт путем копирования кода.

Пример работы генератора иконок в сервисе Favicon.io. Стрелкой показан будущий вид фавикона в разных размерах.

Faviconit. В приложение надо загрузить картинку (минимальный размер 310×310 px, вес не более 5 Мб). После обработки изображения можно скачать архивом вместе с кодом для вставки.

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

Favic-o-matic. Здесь можно генерировать фавиконы сразу в 20 вариантах размера или в стандартных размерах: 16х16, 32х32 px. Принимаются исходники размером от 310×310 px. Готовый пакет скачивается автоматически с генерацией кода для сайта.

Favicon & App Icon Generator. В программе можно делать фавиконки для операционных систем Android и iOS. Картинку можно выбрать из галереи или нарисовать с нуля. Чтобы улучшить результат, конструктор дает возможность настраивать изображения вручную.

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

Интерфейс сервиса xiconeditor.com с полем для рисования и инструментами

Antifavicon.com. От перечисленных выше программ отличается тем, что фавиконка генерируется из текста, а не из изображений. Чтобы получить картинку, нужно ввести в поле буквы или числа. Можно поменять цвета фона или самого текста. Здесь нет большого выбора инструментов для дизайна, но редактор отлично подойдет, если нужен простой и незатейливый значок.

Дизайнерские favicon от Sanni Joe. Источник

Как добавить фавикон на сайт

Существуют разные способы добавления фавиконки на сайт в зависимости от системы управления сайтом (CMS).

Если сайт без CMS

Между тегами <head>…</head> на главной странице нужно вставить часть кода с адресом фавикона и типом передаваемых данных. Укажите путь к месту хранения картинки (url), имя файла и используемый формат.
Если страница редактировалась не на хостинге, нужно загрузить файл этой редактируемой страницы на хостинг, заменив существующий, и затем сохранить.
Поместите изображение в корневой каталог сайта. Он должен быть доступен по прямой ссылке и отдавать ответ сервера «200 OK». Файл может быть загружен через собственную панель управления или через сторонний менеджер файлов.

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

http://favicon.yandex.net/favicon/mysite.ru — для Яндекса;
http://www.google.com/s2/favicons?domain=mysite.ru — для Google.

Если сайт на CMS

В этом случае фрагмент кода также добавляется между <head>-тегами в файл с шаблоном хедера сайта.

В WordPress можно добавить фавиконку через стандартные настройки:

Зайти в раздел «Внешний вид» аккаунта администратора CMS и кликнуть по «Настройкам».
Затем кликнуть по кнопке с выбором изображения в разделе иконки сайта.
Загрузить изображение.
Щелкнуть на кнопку публикации, чтобы сохранить изменения.

Если сайт сделан на конструкторе

Здесь все просто. Вам надо найти раздел Favicon в настройках сайта, подгрузить изображение допустимого размера и формата, далее разрешить применение и после этого опубликовать страницу сайта заново.

Дизайн логотипа и иконок на фонах различного цвета от Star Wolfy. Источник

Распространенные ошибки

Если фавикон сайта не отображается, это может говорить об одной или нескольких проблемах:

Индексация фавикона поисковой системой еще не произошла. Обычно этот процесс занимает от двух недель до двух месяцев.
Недопустимый размер или формат фавикона. В коде иконки должны быть все обязательные атрибуты.
Код иконки размещен не в том блоке. Корректный блок для размещения фавикона — <head>.
Индексация иконки в файле robots.txt не разрешена. Если это так, исправьте Disallow («Не разрешать») на Allow («Разрешить»).
Недопустимое изображение. На картинке не должно быть запрещенных и похожих на них символов.
Фавикон низкого качества или скопирован. Если вы скопируете иконку с какого-то другого источника или загрузите ее в плохом качестве, поисковая система может проигнорировать ее.
Браузерное кеширование. Чтобы устранить проблему, почистите кеш браузера и затем обновите страницу. Воспользуйтесь сочетанием клавиш Ctrl + F5, чтобы остаться при этом на странице.

ИСКРА —
неделя знакомства
с дизайн-профессиями

бесплатно

ИСКРА —
неделя знакомства
с дизайн-профессиями

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

разжечь искру

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

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

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

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

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

 <голова>
    ...
    
    ...


Атрибут	Описание	Возможные значения
REL	. ярлык используется Internet Explorer.
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-коде несколько раз повторяется ссылка на фавикон, робот выбирает одну из иконок.

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

Убедитесь, что:
- Файл доступен по прямой ссылке (ответ сервера 200 OK). Используйте инструмент проверки ответа сервера.
- Файл не запрещен к индексации (например, директивой Disallow в файле robots.txt). Проверить запреты индексации для самого файла и для каталога, в котором он находится.
При необходимости внести изменения.

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекомендации по формату и размеру фавикона
Как отображать фавикон в сервисах Яндекса?
Как отредактировать или удалить значок?

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

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

Совет. Используйте формат 120 × 120 пикселей или формат SVG, чтобы сделать логотип сайта более четким и заметным в сервисах Яндекса.

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

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

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

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