Добавление значка в статическую HTML-страницу

У меня есть несколько static pages, которые являются просто чистым HTML, который мы показываем, когда сервер идет вниз. Как я могу поместить значок, который я создал (это 16x16px, и он сидит в том же каталоге, что и файл HTML, он называется favicon.ico) как значок "Tab". Я прочитал в Википедии и посмотрел несколько руководств и реализовал следующее:

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

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

Обновление

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

Ответ 1

вы можете сделать 16x16 png и использовать

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://eg.com/favicon.png"/>

Ответ 2

Большинство браузеров забирают favicon.ico из корневого каталога сайта, не требуя ответа; но они не всегда обновляют его сразу же.

Однако я обычно использую второй пример:

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

Ответ 3

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

Я создал приложение (faviconit.com), поэтому людям не нужно создавать все эти изображения и правильные теги вручную.

Надеюсь, вам понравится.

Ответ 4

Следующие работы для меня...

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

Ответ 5

Преобразуйте файл изображения в строку Base64 с помощью инструмента, такого как this, а затем замените местозаполнитель YourBase64StringHere в приведенном ниже фрагменте своей строкой и поместите строку в раздел заголовка HTML:

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

Это будет работать на 100% в браузерах.

Ответ 6

Если favicon является изображением типа png, он не будет работать в более ранних версиях Chrome. Однако он отлично справится с FireFox. Кроме того, не забудьте очистить кеш браузера, работая над такими вещами. Много раз, код в порядке, но кеш - настоящий преступник.

Ответ 7

Как рекомендовано W3.org, для достижения этой цели вы можете использовать атрибут rel.

Пример:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...

Ответ 8

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

Ответ 9

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

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

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

Ответ 10

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

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

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

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

Ответ 11

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

Ответ 12

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

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

Нужно ли включать < link rel= "icon" href= "favicon.ico" тип = "изображение/х-значок" / > ?

Ответ 13

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

Ответ 14

<link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
 <link rel="shortcut icon" type="image/png" href="http://exmvple.com/favicon.ico"/>

Это сработало для меня

Ответ 15

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