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

Question

Добавление фавикона на статическую 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 для тестирования сайтов. Согласно Википедии .Ико является лучшим формат приложение, которое работает на всех типах браузеров.

обновление

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

609 15

html static favicon

15 ответов:

Comments

Ничего не найдено.

Hazy McGee · Accepted Answer · 2018-03-06 00:44:38

Вы можете сделать 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"/>

Codecraft · Accepted Answer · 2015-08-13 14:26:26

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

однако, я обычно иду на второй из ваших примеров:
<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />

Eduardo Russo · Accepted Answer · 2014-01-16 16:02:47

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

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

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

Jet Blue · Accepted Answer · 2017-07-27 19:44:00

следующее работает для меня...
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

Farshid · Accepted Answer · 2016-01-09 23:31:35

преобразуйте файл изображения в строку Base64 с помощью такого инструмента, как этой а затем заменить YourBase64StringHere заполнитель в приведенном ниже фрагменте с вашей строкой и поместите строку в раздел HTML head:
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
это будет работать 100% в браузерах.

Tanveer Shaikh · Accepted Answer · 2014-08-04 13:34:26

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

Rahul Desai · Accepted Answer · 2017-06-27 20:24:21

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

shilovk · Accepted Answer · 2017-02-07 18:50:21

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

Cyclotron3x3 · Accepted Answer · 2015-04-29 21:18:39

Я знаю его старый пост, но все еще публикую для кого-то вроде меня. Это сработало для меня
<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
поместите значок favicon в корневой каталог..

Anand Dwivedi · Accepted Answer · 2018-04-05 09:00:37

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

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

bart2puck · Accepted Answer · 2015-06-11 23:06:25

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

вы не можете Эхо ничего на страницу раньше:
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
работает отлично

dmx · Accepted Answer · 2016-08-03 13:32:22

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

Sarkhan · Accepted Answer · 2017-05-23 15:18:15

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

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

вы должны включить ?

subindas pm · Accepted Answer · 2018-04-05 03:50:55

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

Étienne Bersac · Accepted Answer · 2017-11-05 22:49:53

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