Добавление 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) поэтому людям не нужно создавать все эти изображения и правильные теги вручную.
Надеюсь, вам понравится.
преобразуйте файл изображения в строку Base64 с помощью такого инструмента, как этой а затем заменить YourBase64StringHere
заполнитель в приведенном ниже фрагменте с вашей строкой и поместите строку в раздел html head:
<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />
это будет работать 100% в браузерах.
Если favicon является изображением типа png, он не будет работать в старых версиях Chrome. Однако он будет работать отлично в FireFox. Кроме того, не забудьте очистить кэш браузера во время работы над такими вещами. Много раз код просто прекрасен, но кэш-настоящий виновник.
<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
для получения дополнительной информации посмотрите этот ответ:
обратите внимание, что FF не удается загрузить значок с избыточным //
в URL, как /img//favicon.png
. Проверено на FF 53. Chrome в порядке.