Dodawanie ikony favicon do statycznej strony HTML

Mam kilka static pages, które są po prostu czystym HTML, które wyświetlamy, gdy serwer nie działa. Jak Mogę umieścić favicon, który zrobiłem (ma 16x16px i znajduje się w tym samym katalogu co plik HTML; nazywa się favicon.ico) jako ikona "tab". Przeczytałem na Wikipedii i przejrzałem kilka samouczków i wdrożyłem następujące: 

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
Ale nadal nie chce działać. Używam Chrome do testowania stron. Według Wikipedii .ico to najlepszy format zdjęć, który działa na wszystkich typach przeglądarek.

Update

Nie mogłem uruchomić tego lokalnie, chociaż Kod się sprawdza, będzie działał poprawnie tylko wtedy, gdy serwer zacznie obsługiwać witrynę. Po prostu spróbuj wcisnąć go do serwera i odświeżyć pamięć podręczną i powinno działać dobrze.

Author: TheLegend, 2012-03-30
Source

15 answers

Możesz zrobić 16x16 .png, a następnie użyj jednego z poniższych fragmentów pomiędzy znacznikami <head> statycznych dokumentów HTML: 

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>
 664
Author: Hazy McGee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-05 22:44:38

Większość przeglądarek pobiera favicon.ico z katalogu głównego witryny bez konieczności informowania o tym; ale nie zawsze aktualizują ją od razu o nową.

Jednak zwykle sięgam po drugi z Twoich przykładów: 

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
 172
Author: Codecraft,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-13 11:26:26

Właściwie, aby Twoja favicon działała we wszystkich przeglądarkach, musisz mieć więcej niż 10 obrazów w odpowiednich rozmiarach i formatach.

Stworzyłem aplikację ( faviconit.com) więc ludzie nie muszą tworzyć wszystkich tych obrazów i poprawnych tagów ręcznie.

Mam nadzieję, że ci się spodoba.

 94
Author: Eduardo Russo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-01-16 14:02:47

Poniżej działa dla mnie...

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
 54
Author: Jet Blue,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-27 16:44:00

Przekonwertuj swój plik obrazu na ciąg znaków Base64 za pomocą narzędzia takiego jak this , a następnie zastąp YourBase64StringHere w poniższym fragmencie swoim ciągiem i umieść linię w sekcji głównej HTML: 

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

To będzie działać w 100% w przeglądarkach.

 30
Author: Farshid,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-09 21:31:35

Jeśli favicon jest obrazem typu png, nie będzie działać w starszych wersjach Chrome. Jednak to będzie działać dobrze w Firefoksie. Nie zapomnij również wyczyścić pamięci podręcznej przeglądarki podczas pracy nad takimi rzeczami. Wiele razy kod jest w porządku, ale cache jest prawdziwym winowajcą.

 14
Author: Tanveer Shaikh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-04 10:34:26

Zgodnie z zaleceniami W3.org , możesz użyć atrybutu rel, aby to osiągnąć.

Przykład: 

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...
 13
Author: Rahul Desai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-27 17:24:21 
<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"/>
 7
Author: shilovk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-07 16:50:21

Znam jego starszy post, ale nadal publikuje dla kogoś takiego jak ja. This worked for me 

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

Umieść ikonę favicon w katalogu głównym..

 5
Author: Cyclotron3x3,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-29 18:18:39 
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

To zadziałało dla mnie

 5
Author: Anand Dwivedi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-05 06:00:37

Jako dodatkowa uwaga, która może komuś kiedyś pomóc.

Nie można echo nic do strony przed: 

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

Nie załaduje ico 

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

Działa dobrze

 4
Author: bart2puck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-11 20:06:25

Użyłem convert -resize 16x16 img.png favicon.ico (Na konsoli Linuksa) do konwersji mojego obrazu i dodaj <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16"> do mojego nagłówka i wszystko działa idealnie.

 3
Author: dmx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-03 10:32:22

Jeśli dodasz favicon do folderu root / images o nazwie favicon.przeglądarka ico automatycznie zrozumie i otrzyma ją jako favicon.Testowałem i pracowałem. Twój link musi być www.website.com/images/favicon.ico

Aby uzyskać więcej informacji zobacz tę odpowiedź:

Czy musisz dołączyć ?

 1
Author: Sarkhan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:15

Spróbuj użyć <link rel="icon" type="image/ico" href="images/favi.ico"/>

 1
Author: subindas pm,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-05 00:50:55

Zauważ, że FF nie wczytuje ikony z redundantnym // w adresie URL jak /img//favicon.png. Testowany na FF 53. Chrome jest OK.

 0
Author: Étienne Bersac,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-05 20:49:53