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

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

545 голосов
/ 30 марта 2012

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

Обновление

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

Ответы [ 17 ]

806 голосов
/ 30 марта 2012

Вы можете сделать 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"/>
198 голосов
/ 30 марта 2012

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

Однако я обычно беру второй пример: 

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
112 голосов
/ 16 января 2014

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

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

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

60 голосов
/ 21 апреля 2014

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

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
34 голосов
/ 10 января 2016

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

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

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

19 голосов
/ 15 декабря 2018

Синтаксис использования: .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-бит с глубиной цвета.

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

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

14 голосов
/ 26 декабря 2014

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

Пример: 

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
14 голосов
/ 31 июля 2013

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

7 голосов
/ 13 августа 2015 
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

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

7 голосов
/ 06 июля 2015 
<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"/>
Страница:
...