Link favicon: Adding a favicon to a static HTML page

Как установить фавиконку — Вебмастер. Справка

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

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

    <head>
        ...
        <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
        ...
    </head>
    АтрибутОписаниеВозможные значения
    relТип ресурса
    • icon — учитывается большинством браузеров;

    • shortcut icon — учитывается браузером Internet Explorer.

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

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

    • image/gif — для формата GIF;

    • image/jpeg — для формата JPEG;

    • image/png — для формата PNG;

    • image/bmp — для формата BMP.

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

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

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

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

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

  2. Внесите изменения, если это необходимо.

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

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

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

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

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

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

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

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


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

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

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


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

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

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

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

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


Как установить фавикон (favicon) на сайт

#Поисковая выдача #Оформление сниппета

#88

Ноябрь’18

10

Ноябрь’18

10

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

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

Для установки favicon нужно иметь подходящее изображение. Оно должно быть размером 16×16 пикселей и иметь формат .ico. Фавикон можно создать самостоятельно или выбрать из существующих на специальных сайтах.

Данную иконку необходимо загрузить на сервер, где находится ваш сайт. После чего указать на нее ссылку между тегами <head></head>.

Для добавления favicon необходимо разместить следующий html код:

  • <link type=»image/x-icon» href=»/favicon.ico» rel=»shortcut icon»>
  • <link type=»Image/x-icon» href=»/favicon.ico» rel=»icon»>

В атрибуте href указывается адрес соответствующего файла.

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

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

Похожее

Поисковая выдача Оформление сниппета

Оптимизация сниппетов

Поисковая выдача Оформление сниппета

Быстрые ссылки сайта: что это и как их добавить

Поисковая выдача Оформление сниппета

#83

Оптимизация сниппетов

Ноябрь’18

3598

8

Поисковая выдача Оформление сниппета

#54

Быстрые ссылки сайта: что это и как их добавить

Ноябрь’17

4845

9

Поисковая выдача Оформление сниппета

#34

Как изменить описание сниппета в Яндексе

Ноябрь’17

3316

8

Поисковая выдача Оформление сниппета

#33

Как изменить заголовок сниппета в Яндексе

Июль’17

3930

8

html — нужно ли включать?

спросил

Изменено 1 месяц назад

Просмотрено 540 тысяч раз

Я не включил следующую строку кода в свой тег заголовка, однако мой значок по-прежнему отображается в моем браузере:

 
ico" type="image/x-icon " />

С какой целью это включено?

  • HTML
  • Фавикон

1

Если вы не вызываете фавикон, favicon.ico , вы можете использовать этот тег для указания фактического пути (если он у вас есть в каталоге images/). По умолчанию браузер/веб-страница ищет favicon.ico в корневом каталоге.

1

Вы должны сделать и то, и другое, чтобы все браузеры нашли значок.

Назвать файл «favicon.ico» и поместить его в корень вашего веб-сайта — это метод, который «не рекомендуется» W3C:

Способ 2 (не рекомендуется): размещение значка на предопределенный URI
Второй метод указания значка фавикона основан на использовании предопределенного URI для идентификации изображения: «/favicon», который относится к корневому каталогу сервера.

Этот метод работает, потому что некоторые браузеры запрограммированы на поиск фавиконов с использованием этого URI.
W3C — Как добавить фавиконку на свой сайт

Итак, чтобы охватить все ситуации, я всегда делаю это в дополнение к рекомендуемому методу добавления атрибута «rel» и указания его на тот же файл .ico.

6

Я использую его по двум причинам:

  1. Я могу принудительно обновить значок, добавив параметр запроса, например, ?v=2 . так:

  2. В случае, если мне нужно указать путь.

0

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

1

Многие люди устанавливают путь к файлу cookie /. Это приведет к тому, что каждый запрос favicon будет отправлять копию файлов cookie сайтов, по крайней мере, в Chrome. Адресация вашего значка на ваш домен без файлов cookie должна исправить это.

 
 

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

Информация о настройке домена без файлов cookie:

http://www.ravelrumba.com/blog/static-cookieless-domain/

Вам вообще не нужен «favicon.ico» размером 16×16. Используйте элементы HTML , вложенные в ваш элемент . Веб-браузеры будут использовать очень маленькие изображения, но размеры изображений, которые Google требует и поддерживает для их отображения в результатах поиска, кратны 48 пикселям.

Ваша фавиконка должна быть кратна квадрату 48px, например: 48x48px, 96x96px, 144x144px и так далее. Файлы SVG не имеют определенного размера. Любой действительный значок формат поддерживается.

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

Итак, что-то вроде того, что я использую для фавиконов:

 






 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Необходимо добавить тег ссылки для favicon.

ico?

спросил

Изменено 1 год, 7 месяцев назад

Просмотрено 194k раз

Существуют ли какие-либо современные браузеры, которые не обнаруживают favicon.ico автоматически? Есть ли смысл добавлять тег ссылки для favicon.ico?

 
 

Я предполагаю, что включать его в документ HTML необходимо только в том случае, если вы решите использовать GIF или PNG…

  • html
  • favicon

5

Чтобы выбрать другое местоположение или тип файла (например, PNG или SVG) для фавикона:
Одной из причин может быть то, что вы хотите, чтобы значок находился в определенном месте, например, в папке с изображениями или в чем-то подобном. Например:

 <ссылка rel="icon" href="_/img/favicon.png">
 

Это другое местоположение может быть даже CDN, как это делает SO с .

Чтобы узнать больше об использовании других типов файлов, таких как PNG, ознакомьтесь с этим вопросом.

Для целей очистки кеша :
Добавьте строку запроса к пути для целей очистки кеша:

 
 

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


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


Сноска о rel="icon" :
Как указано в ответе @Semanino, использование rel="shortcut icon" — это старый метод, который требовался в более старых версиях Internet Explorer, но в большинстве случаев можно заменить более правильным rel="icon" инструкция. Статья @Semanino основана на правильных ссылках на соответствующую спецификацию, которая показывает, что rel значение ярлык не является допустимым вариантом.

3

Обратите внимание, , что спецификация HTML5 W3C и WhatWG стандартизируют

 
 

Обратите внимание на значение атрибута «rel»!

Значение 9Значок ярлыка 0025 для атрибута rel является очень старым расширением для Internet Explorer и устаревшим .

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

Вы также можете взглянуть на этот замечательный пост: rel=»shortcut icon» считается вредоносным

1

  com/favicon.ico" />
<ссылка rel="icon" type="image/png" href="http://example.com/favicon.png" />
<ссылка rel="icon" type="image/gif" href="http://example.com/favicon.gif" />


 

Все зависит от того, какой формат изображения вы хотите использовать!
, если у вас есть значок вашего сайта, это будет намного лучше для UX!

демо

показать логотип во вкладке браузера

3

Обновление Октябрь 2020:

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

Вот однострочный простой код взломщика , который работал безупречно:

neocities.org/bla123.jpg" size="16x16" type=" image/jpg">

Примечания:

  1. Поместите изображение в папку ROOT (в одной из моих неудачных попыток я не использовал корневой каталог)
  2. Использовать прямую ссылку URL-адреса фавикона (вместо href=»images/bla123.jpg»).
  3. Я поставил этот тег всего под заголовком < > тег в заголовке < >
  4. Я сделал фавикон размером 64×64 px и размером 2,16 КБ

Я тестировал его на Firefox, Chrome, Edge и Opera. ОС: Win 10, Mac OSX, ios и Android. Также у меня не было проблем с обналичиванием, все заработало, как только я обновил страницу.

1

Мы можем добавить для всех устройств с размером платформы

 
 png">











 

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

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

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