У меня есть несколько статических страниц, которые являются просто чистым HTML, которые мы показываем, когда сервер выключается. Как я могу поместить созданный мной значок (размером 16x16 пикселей и он находится в том же каталоге, что и файл HTML; он называется favicon.ico) в виде значка вкладки? Я прочитал википедию, посмотрел несколько уроков и реализовал следующее:

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

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

Обновить

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

html static favicon Легенда
источник

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

мт

3

Возможный дубликат Как добавить значок вкладки браузера (favicon) для веб-сайта?

Михал Перлаковский,

Ваш пример работает сейчас на Chrome.

Дамжан Павлица

Интересно, что живой веб-сайт обслуживал иконку просто отлично, но при локальном просмотре файла, а не при его обслуживании через локальный сервер (т.к. это простой статический сайт - да!), Иконка не показывалась. Оглядываясь назад, это имеет смысл, серверы автоматически обслуживают его. Добавление <link rel="icon" type="image/x-icon" href="favicon.ico">к head(рядом с вариациями 32, 16 и 180 значков link) решило проблему локально. Поскольку я включил links для значков значков большего размера и манифеста, я не задумывался над тем, почему favicon.icoне появился! :-)

ШерилХоман

934

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

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

Хейзи МакГи
источник

3

Вы пытались поместить "ярлык" в rel = для своих ссылок ico и поместить / before favicon.ico на оба, чтобы указать, что он находится в директории webroot?

Хейзи МакГи

1

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

TheLegend

5

Клянусь - у меня были те же проблемы после добавления кода - браузеру потребовался, возможно, день, чтобы отобразить значок вместо серого поля, которое у него обычно есть - попробуйте сбросить историю кэша браузера и т. Д. И если вы скопировали мой код, убедитесь, что вы поменяйте example.com на ваш домен lol

Хейзи МакГи

2

В верхнем аргументе href есть избыточный /. Как только я удалил это, это работает как очарование. Должно быть: <link rel = "ярлык" href = "favicon.png" type = "image / png">

drpawelo

4

w3.org/2005/10/howto-favicon говорит, что включить profileатрибут в headтег ... это необходимо?

Ракиб

228

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

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

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

Codecraft
источник

это должно быть перед метаданными или тегами сценария ?? или не проблема

TheLegend

2

Пока он находится в разделе <head>, это не должно иметь значения - потому что он не зависит от чего-то другого для работы.

Codecraft

127

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

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

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

Эдуардо Руссо
источник

6

Понравилось приложение, нет bs - прямо к нему, и изображение можно отредактировать перед созданием всех значков +1 для вас, чтобы сэкономить мне кучу времени :)

SidOfc

1

Согласен, это отличное приложение. Хотя я не думаю, что все эти размеры изображений кажутся совершенно необходимыми, мне нравится, что они генерируют их, требуемую разметку и т. Д. Спасибо!

Андреам

Indeead отличное приложение: +1 :. Очень помогло о /

Ренато Гомес

1

Но это собственность.

Ctrl-Alt-Delor

Это не работает, даетWhoops, looks like something went wrong.

Дака

68

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

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

Jet Blue
источник

40

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

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

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

Farshid
источник

3

Я нашел другой инструмент, который выполняет преобразование в JavaScript без передачи данных на сервер: jpillora.com/base64-encoder Кроме того, он обрабатывает несколько файлов путем перетаскивания. Сохраните страницу, чтобы использовать ее локально.

обрабатывать

1

imho, лучшее решение, потому что оно учитывает «статическую HTML» страницу и полностью автономно содержится в документе.

Буффало Рабор

1

Лучшее решение. Работает также с файлами PNG. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />

Саксонский

1

Это приведет к добавлению длинной строки на каждую страницу. Используйте встроенную base64 для небольших изображений, которые редко отправляются пользователю.

frodeborli

Таким образом, ваш favicon никогда не кэшируется, вы каждый раз отправляете всю строку клиенту, IHMHO использует URL, и поэтому кэш браузера выглядит «чище / лучше»

Michiel

34

Использование Синтаксис: _{^{.ico, .gif, .png,.svg}}

Эта таблица показывает, как использовать faviconв основных браузерах. Стандартная реализация использует элемент link с атрибутом rel в разделе документа, чтобы указать формат файла, имя и местоположение файла.

Обратите внимание, что большинство браузеров отдают приоритет favicon.icoфайлу, расположенному в корне веб-сайта (поэтому игнорируются любые теги ссылок значков).

                                           Edge   Firefox   Chrome   I.E.   Opera   Safari  
 ---------------------------------------- ------ --------- -------- ------ ------- -------- 
  <link rel="shortcut icon"                Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/myicon.ico">                                                    

  <link rel="icon"                         Yes    Yes       Yes      9      Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9      Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon"                         Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.gif">                                                     

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

  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/image.svg">

Поддержка формата файла

Следующая таблица иллюстрирует поддержку формата файла изображения для favicon:

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

Реализация браузера

Таблица ниже иллюстрирует различные области браузера, где отображаются значки избранного:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

Файлы значков могут иметь размер 16 × 16 , 32 × 32 , 48 × 48 или 64 × 64 пикселей и глубину цвета 8-бит , 24-бит или 32-бит .

Хотя приведенная выше информация в целом верна, в некоторых ситуациях существуют некоторые вариации / исключения.

^{Смотрите полную статью в источнике в Википедии.}

Обновление: («подробнее»)

См. «Новые» (2019) критерии Google, чтобы определить значок для показа в результатах поиска .
Вы можете получить (программно или вручную) кэшированный значок Google для любого домена с таким URL-адресом, как:https://www.google.com/s2/favicons?domain=stackoverflow.com

Использование вышеуказанного URL-адреса непосредственно в <img>теге возвращает: " ".
Я использовал realfavicongenerator.net пару раз; это очень тщательно, генерирует / настраивает все возможные варианты favicon, которые могут вам понадобиться для максимальной совместимости. (Однако, если вы ищете одно изображение favicon, это может быть не для вас!) Для простого преобразования файлов (например, PNGв ICOи т. Д.) Мне нравится onlineconvertfree.com .

ashleedawg
источник

15

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

Танвир Шейх
источник

1

Хорошо; в любом случае очень трудно установить / сохранить старую версию Chrome

Бен Легжеро,

14

В соответствии с рекомендациями 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"/>

shilovk
источник

7

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

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

Ананд Двиведи
источник

4

Хотя это может сработать, вы не можете использовать image / png в качестве MIME-типа - потому что это неправильно, если вы используете

.ico

5

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

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

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

Cyclotron3x3
источник

4

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

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

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

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

bart2puck
источник

3

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

Эрик Себаста

Да, я просто хотел поместить это здесь на случай, если кто-нибудь столкнется с проблемой. Моя проблема заключалась в том, что «привет» - это какой-то отладочный код, и я немного озадачился.

bart2puck

3

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

DMX
источник

2

Обратите внимание, что если ваш сайт работает как subfolder:

http://localhost/MySite/

Вы должны будете принять это во внимание. Если вы делаете это из ASP.NETприложения, все, что вам нужно сделать, это добавить ~в начало URL:

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

Серж Саган
источник

2

Согласно обновлению OP, оно не показывалось локально, но согласно обновлению OP, как только я загрузил его на сервер, все было в порядке.

Поскольку это простой статический html-сайт, я могу позволить себе роскошь работать на нем без запуска локального веб-сервера.
Веб-сервер, как правило, автоматически обслуживает фавикон, если он есть, по умолчанию.

Но когда веб-сервер не запущен, сам браузер будет не просто читать каталог в поисках дополнительных файлов, например favicon.ico, если он не указан в html-документе.

Итак, пока у меня были следующие элементы в headтеге:

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

Я также не включил ссылку на обычный favicon.ico.
Несмотря на то, что favicon.icoфайл был включен, в дополнение к изображениям, перечисленным выше.

Однажды я добавил следующую строку:

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

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

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

Я упоминаю об этом явно, потому что генератор favicon, который я использовал, любезно предоставил код, значки, манифест и инструкции. Однако, хотя он включал favicon.icoизображение, он не включал <link>этот файл в код для добавления в htmlдокумент.
Я предполагаю, что предположения об обслуживании favicon.icoбудут автоматически обслуживаться и использоваться всеми браузерами по умолчанию, поэтому в тег head необходимо явно добавлять только «альтернативные» версии.
Очевидно, они не считают, что при локальном просмотре файлов (то есть, не их локальном просмотре) мы не заинтересованы в том, чтобы увидеть значок?

SherylHohman
источник

1

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

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

Нужно ли включать <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?

Сархан
источник

0

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

Этьен Берсак
источник

Это на самом деле не столько ответ, сколько комментарий . (См. « Как ответить ».)

ashleedawg

0

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

Subindas вечера
источник

-2

Я просто использовал PNG. Обязательно удалите любой белый фон. делает для лучшей иконы

Том
источник

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

Обновить

Ответы:

Использование Синтаксис: _{^{.ico, .gif, .png,.svg}}

Поддержка формата файла

Реализация браузера

^{Смотрите полную статью в источнике в Википедии.}

Обновление: («подробнее»)

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

Обновить

Ответы:

Использование Синтаксис: .ico, .gif, .png,.svg

Поддержка формата файла

Реализация браузера

Смотрите полную статью в источнике в Википедии.

Обновление: («подробнее»)

Использование Синтаксис: _{^{.ico, .gif, .png,.svg}}

^{Смотрите полную статью в источнике в Википедии.}