Для установки значка в моем html-коде используется следующее:
<link rel="icon" type="img/ico" href="img/favicon.ico">
Однако значок не отображается. Почему?
Примечание:
Я подтвердил, что файл находится на диске по правильному пути.
Почему не отображается мой фавикон?
Ответы (4)
- Это действительно
.icoили просто имя ".ico"? - В каком браузере тестируете?
Самый простой способ получить фавикон — поместить значок с именем «favicon.ico» в корневую папку. Это просто работает везде, код вообще не нужен.
Если вы должны иметь его в подкаталоге, используйте:
<link rel="shortcut icon" href="/img/favicon.ico" />
Обратите внимание на / перед img, чтобы убедиться, что он привязан к корневой папке.
person
Rich Bradshaw
schedule
16.03.2013
Довольно часто у автора нет доступа к корню сервера; таким образом, этот путь далеко не самый легкий, он может быть невозможен.
- person Jukka K. Korpela; 16.03.2013
Должен признать, что у меня никогда не было сервера без доступа к корневому каталогу — звучит ужасно!
- person Rich Bradshaw; 16.03.2013
@Jukka прав в случае веб-приложений Java. Хотя в других отношениях они полностью независимы друг от друга, они обычно развертываются в своем контейнере сервлетов (например, Tomcat), так что они отображаются как подкаталоги корневого уровня под одним и тем же именем хоста, и автор HTML обычно не знает, что установщик решит вызвать каждый из них.
- person Glenn Lawrence; 20.04.2015
Я думаю, стоит отметить, что иногда браузер сильно кэширует фавиконы. После добавления тега ‹link› попробуйте просмотреть исходный код страницы и щелкнуть ссылку href=. Это позволит вам увидеть, верна ли ссылка.
- person rideron89; 19.02.2018
Попробуй это:
<link href="img/favicon.ico" rel="shortcut icon" type="image/x-icon" />
person
Cris
schedule
16.03.2013
я уверен, что вы, вероятно, пробовали это, но попробуйте очистить кеш браузера. иногда фавиконки могут быть довольно липкими.
- person gmartellino; 16.03.2013
попробуйте поместить изображение в корень вашего приложения и получить к нему доступ по адресу href=~/favicon.ico
- person Cris; 16.03.2013
Фавиконы работают только тогда, когда они обслуживаются веб-сервером, который правильно устанавливает MIME-типы для обслуживаемого контента. Загрузка из локального файла может не работать в хроме. Загрузка с неправильно настроенного веб-сервера работать не будет.
Веб-серверы, такие как lighthttpd, должны быть настроены вручную для правильной установки типа mime.
Из-за вероятности того, что присвоение mimetype не будет работать во всех средах, я бы посоветовал вам вместо этого использовать встроенный файл ico base64, закодированный . Это также ускорит загрузку, поскольку уменьшит количество HTTP-запросов, отправляемых на сервер.
В системах на основе POSIX вы можете кодировать файл в base64 с помощью команды base64.
Чтобы создать строку ico в кодировке base64, используйте команду:
$ 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" />
person
timthelion
schedule
21.02.2018
Действительно хорошее решение. Спасибо!
- person Bogdan M.; 21.06.2018
Попробуйте добавить атрибут 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">
person
Iswanto San
schedule
16.03.2013
Добавление профиля ничего не изменит, и это больше не действительный HTML. Ваше редактирование проясняет ситуацию. Проблема скорее всего в том, что ему не хватает a/before img.
- person Rich Bradshaw; 16.03.2013
Следует также отметить, что согласно странице Википедии на Favicon,
rel="icon" type="image/x-icon" совместим только с Internet Explorer 9+, где rel="shortcut icon" (как показано выше в принятом ответе) совместим практически со всеми версиями Internet Explorer.
- person ub3rst4r; 05.01.2015
type(недопустимый тип интернет-медиа), но, вероятно, это не имеет никакого эффекта. - person Jukka K. Korpela schedule 16.03.2013@replyкомментировать, чтобы пользователи получали уведомления. Подробную информацию о том, как они работают, см. в разделе Как работают комментарии @ответы? в FAQ. - person robinCTS schedule 21.02.2018