Добавление значка на статическую HTML-страницу - PullRequest
545 голосов
/ 30 марта 2012

У меня есть несколько статических страниц, которые являются просто чистым HTML, которые мы показываем, когда сервер выключается.Как я могу поместить созданный мной значок (он имеет размер 16x16 пикселей и находится в том же каталоге, что и файл HTML; он называется favicon.ico) в виде значка вкладки?Я прочитал википедию, посмотрел несколько уроков и реализовал следующее:

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

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

Обновление

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

Ответы [ 17 ]

5 голосов
/ 29 апреля 2015

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

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

поместите значок избранного в корневой каталог ..

4 голосов
/ 11 июня 2015

как дополнительная заметка, которая может помочь кому-нибудь когда-нибудь.

Вы не можете ничего отобразить на странице раньше:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

не загрузит ico

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

отлично работает

3 голосов
/ 03 августа 2016

Я использовал convert -resize 16x16 img.png favicon.ico (на linux konsole), чтобы конвертировать мое изображение, и добавил <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> в мой заголовок, и все работает идеально.

1 голос
/ 27 марта 2019

Обратите внимание, что если ваш сайт работает как subfolder, то есть:

http://localhost/MySite/

Вам нужно будет это учесть. Если вы делаете это из приложения ASP.NET, все, что вам нужно сделать, это добавить ~ в начало URL:

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
1 голос
/ 02 октября 2015

Если вы добавите значок favicon в корневую папку / папку с изображениями с именем favicon.ico, браузер автоматически поймет и получит его как favicon. Я протестировал и работал. Ваша ссылка должна быть www.website.com/images/favicon.ico

Для получения дополнительной информации смотрите этот ответ:

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

0 голосов
/ 05 ноября 2017

Обратите внимание, что FF не может загрузить значок с избыточным // в URL-адресе, например /img//favicon.png.Проверено на FF 53. Хром в порядке.

0 голосов
/ 11 февраля 2017

Попробуйте использовать <link rel="icon" type="image/ico" href="images/favi.ico"/>

...