У меня есть несколько 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. Хром в порядке.
