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

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

Обновить

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

 Damjan Pavlica29 авг. 2018 г., 17:38
Ваш пример работает сейчас на Chrome.
 m-t30 мар. 2012 г., 15:45
кто не скажет кому-либо из ваших друзей проверить его на какой-то другой системе, та же проблема с одним из моих клиентов, моя система работает нормально, и он жалуется, что значок не отображается, я в основном использую первый пример из вас и это верно. удачи.

Ответы на вопрос(16)

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

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

 Kurru02 авг. 2014 г., 11:28
png теперь поддерживается в Chrome в соответствии сen.wikipedia.org/wiki/Favicon
 Ben Leggiero09 дек. 2018 г., 08:19
Все в порядке; все равно очень сложно установить / сохранить старую версию Chrome

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

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

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

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

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

Решение Вопроса

а затем использовать один из следующих фрагментов между<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"/>
 Hazy McGee30 мар. 2012 г., 15:35
Клянусь - у меня были те же проблемы после добавления кода - браузеру потребовался, возможно, день, чтобы отобразить значок вместо серого поля, которое у него обычно есть - попробуйте сбросить историю кэша браузера и т. Д. И если вы скопировали мой код, убедитесь, что вы измените example.com на ваш домен lol
 Syed Rakib Al Hasan13 июл. 2014 г., 10:54
w3.org/2005/10/howto-favicon говорит, чтобы включитьprofile атрибут вhead тег ... это нужно?
 Hazy McGee30 мар. 2012 г., 15:22
Вы пытались поместить "ярлык" в rel = для своих ссылок ico и поместить / before favicon.ico на оба, чтобы указать, что он находится в директории webroot?
 drpawelo27 июн. 2013 г., 15:46
В верхнем аргументе href есть избыточный /. Как только я удалил это, это работает как очарование. Должно быть: <link rel = "ярлык" href = "favicon.png" type = "image / png">
 TheLegend30 мар. 2012 г., 15:27
ип попытался это тоже .. мужик, я оцениваю, я собираюсь перезапустить все это, а затем попробуйте загрузиться и посмотреть, может быть, его обналичивание неправильно или что-то ..

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

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

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
 TheLegend30 мар. 2012 г., 15:34
это должно быть перед метаданными или тегами сценария ?? или не проблема
 Codecraft30 мар. 2012 г., 15:50
Пока он находится в разделе <head>, это не должно иметь значения - потому что он не зависит от чего-то другого для работы.

// в URL как/img//favicon.png, Проверено на FF 53. Хром в порядке.

 ashleedawg15 дек. 2018 г., 18:23
Это не совсемответ столько, сколько этокомментарий, (Видеть "Как ответить».)
<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/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

 zanderwar19 февр. 2016 г., 07:35
Хотя это может работать, вы не можете использовать image / png в качестве MIME-типа - потому что это неправильно, учитывая, что вы используете .ico

<link rel="icon" type="image/ico" href="images/favi.ico"/>

В соответствии с рекомендациями W3.org, вы можете использоватьrel атрибут для достижения этого.

Пример:

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

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

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

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

 ctrl-alt-delor05 мар. 2018 г., 23:48
Но это собственность.
 SidOfc26 янв. 2016 г., 10:15
Понравилось приложение, нет bs - прямо к нему, и изображение можно отредактировать перед созданием всех значков +1 для вас, чтобы сэкономить мне кучу времени :)
 Eduardo Russo27 мар. 2018 г., 14:34
@ Судоман, диск был полон: o Он снова работает!
 Eduardo Russo14 дек. 2016 г., 10:14
Спасибо всем <3
 andrhamm18 окт. 2017 г., 16:09
Согласитесь, это отличное приложение. Хотя я не думаю, что все эти размеры изображений кажутся совершенно необходимыми, мне нравится, что они генерируют их, требуемую разметку и т. Д. Спасибо!
Синтаксис использования:.ico, .gif, .png, .svg

favicon в основных браузерах. Стандартная реализация использует элемент ссылки с атрибутом 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-битный в глубине цвета.

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

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

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

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

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

подобногоэто а затем заменитьYourBase64StringHere заполнитель в приведенном ниже фрагменте с вашей строкой и поместите строку в ваш раздел заголовка HTML:

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

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

 Rolf of Saxony28 апр. 2017 г., 11:59
Лучшее решение. Работает также с файлами PNG. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />
 Buffalo Rabor30 нояб. 2016 г., 09:08
imho, лучшее решение, потому что оно учитывает «статическую HTML» страницу и полностью автономно содержится в документе.
 bladekp08 мая 2017 г., 01:12
Это не работает в браузерах IE и Edge
 frodeborli10 дек. 2018 г., 09:43
Это приведет к добавлению длинной строки на каждую страницу. Используйте встроенную base64 для небольших изображений, которые редко отправляются пользователю.
 handle16 окт. 2016 г., 10:49
Я нашел другой инструмент, который выполняет преобразование в JavaScript без передачи данных на сервер:jpillora.com/base64-encoder Кроме того, он обрабатывает несколько файлов путем перетаскивания. Сохраните страницу, чтобы использовать ее локально.

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

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

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

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

 bart2puck25 июн. 2015 г., 17:09
Да, я просто хотел поместить это здесь на случай, если кто-нибудь столкнется с проблемой. Моя проблема заключалась в том, что «привет» - это какой-то отладочный код, и я немного озадачился.
 Eric Sebasta25 июн. 2015 г., 13:04
Это потому, что он должен находиться в разделе заголовка HTML-документа и игнорируется большинством браузеров, если это не так.

Ваш ответ на вопрос