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

у меня есть несколько static pages это просто чистый HTML, который мы показываем, когда сервер идет вниз. Как я могу поместить favicon, который я сделал (это 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 для тестирования сайтов. Согласно Википедии .ico является лучшим формат приложение, которое работает на всех типах браузеров.

обновление

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

15 ответов


Вы можете сделать 16x16 .png, а затем используйте один из следующих фрагментов между <head> теги ваших статических HTML-документов:

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

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

тем не менее, я обычно иду на второй из ваших примеров:

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

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

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

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


для меня работает следующее...

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

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

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

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


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


как рекомендовано W3.org можно использовать


<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"/>

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

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

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


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

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


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

вы не можете Эхо ничего на страницу раньше:

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

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


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


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

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

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


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


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