Вопрос: Почему мой значок не появляется?


Для установки favicon в моем html-коде используется следующее:

<link rel="icon" type="img/ico" href="img/favicon.ico">

Однако значок не отображается. Зачем?

Заметка:

Я подтвердил, что файл находится на диске по правильному пути.


42


источник


Ответы:


  1. Действительно ли это .ico, или это просто называется «.ico»?
  2. В каком браузере вы тестируете?

Самый простой способ иметь значок - разместить значок в папке с корнем в формате favicon.ico. Это работает везде, никакого кода вообще не требуется.

Если вы должны иметь его в подкаталоге, используйте:

<link rel="shortcut icon" href="/img/favicon.ico" />

Обратите внимание / до img для обеспечения привязки к корневой папке.


61



Попробуй это:

<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" />

10



Favicons работает только при обслуживании с веб-сервера, который правильно устанавливает mime-типы для обслуживаемого контента. Загрузка из локального файла может не работать в хроме. Загрузка с неправильно настроенного веб-сервера не будет работать.

Веб-серверы, такие как lighthttpd, должны быть настроен вручную  чтобы правильно установить тип мимики.

Из-за вероятности того, что присвоение mimetype не будет работать во всех средах, я бы предложил использовать встроенный закодированный base64  ico. Это будет загружаться быстрее, так как это уменьшает количество HTTP-запросов, отправленных на сервер.

В системах на базе POSIX вы можете закодировать файл base64 с помощью base64 команда.

Для создания кодированной в кодировке base64 линии ico используйте команду:

$ base64 favicon.ico --wrap 0

И вставьте вывод в строку:

<link href="data:image/x-icon;base64,HERE" rel="icon" type="image/x-icon" />

Замена слова HERE вот так:

<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AERpOgA5cCcA7vDtAF6jSABllFcAuuCvAK2trQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjMzMzMzNxARYzMzMzVBEEERYzMzNhERZxRGMzZxQEA2FER3cRSAgTNxgEEREIQBMzFIARERFEEzNhERARFAATMzYREBEAhBMzMzEYEBFEEzMzNhEQQRQDMzMzcRgEAAMzMzNhERgIEzMzMyERgEQDMzMzMRAEgEMzMzMxERAEEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" rel="icon" type="image/x-icon" />

4



Попробуйте добавить profile атрибут вашего head тег и использование "image/x-icon" для type атрибут:

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">

Если вышеуказанный код не работает, попробуйте использовать полный путь значка для href атрибут:

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="http://example.com/img/favicon.ico">

-1