Dodawanie ulubionych do statycznej strony HTML

641

Mam kilka stron statycznych, które są po prostu czystym HTMLem, które wyświetlamy, gdy serwer przestaje działać. Jak mogę umieścić favicon, który stworzyłem (16 x 16 pikseli i znajduje się w tym samym katalogu co plik HTML; nazywa się favicon.ico) jako ikonę „tab”? Przeczytałem na Wikipedii, 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 obrazu działający na wszystkich typach przeglądarek.

Aktualizacja

Nie mogłem tego uruchomić lokalnie, chociaż kod sprawdza, czy naprawdę będzie działał poprawnie dopiero po uruchomieniu serwera przez serwer. Wystarczy wypchnąć go na serwer i odświeżyć pamięć podręczną, a powinno działać dobrze.

html  static  favicon 
— TheLegend
źródło
kogo nie powiesz żadnemu z twoich znajomych, aby sprawdził to dla ciebie w innym systemie, ten sam problem dotyczy jednego z moich klientów, że mój system pokazuje się dobrze, a on skarży się, że favicon się nie pokazuje, najczęściej używam pierwszego z was i jest prawidłowe. powodzenia.
— Mt
3
— Michał Perłakowski
Twój przykład działa teraz w Chrome.
— Damjan Pavlica
Interesujące, że strona na żywo dobrze podawała favicon, ale podczas przeglądania pliku lokalnie, a nie serwowania go przez lokalny serwer (b / c jest to prosta strona statyczna - tak!), Favicon nie wyświetlał się. Z perspektywy czasu ma to sens, serwery automatycznie go obsługują. Dodanie <link rel="icon" type="image/x-icon" href="favicon.ico">do head(obok 32, 16 i 180 odmian favicon link) rozwiązało problem lokalnie. Ponieważ dołączyłem links dla większych rozmiarów ikon i manifestu, nie zastanawiałem się dwa razy, dlaczego się favicon.iconie pokazałem! :-)
— SherylHohman

Odpowiedzi:

932

Możesz utworzyć obraz w formacie .png, a następnie użyć jednego z następujących fragmentów między <head>znacznikami statycznych dokumentów HTML:

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>
— Mglisty McGee
źródło
3
czy próbowałeś umieścić „ikonę skrótu” w rel = dla linków ico i umieścić / przed favicon.ico na obu, aby tylko stwierdzić, że jest on w katalogu webroot?
— Hazy McGee
1
yip też tego próbował .. man lol oceniam, zamierzam zrestartować to wszystko, a następnie spróbować uruchomić komputer i zobaczyć, czy może nie jest to dobra płatność, czy coś ...
— TheLegend
5
Przysięgam - miałem takie same problemy po dodaniu kodu - może minąć dzień, zanim przeglądarka wyświetli ikonę zamiast szarego pola, które zwykle ma - spróbuj zrzucić historię pamięci podręcznej przeglądarki itp. A jeśli skopiowałeś mój kod, upewnij się, że u zmień example.com na ur domain lol
— Hazy McGee
2
W górnym wierszu znajduje się argument nadmiarowy /. Po usunięciu działa jak urok. Powinno być: <link rel = "ikona skrótu" href = "favicon.png" type = "image / png">
— drpawelo
4
w3.org/2005/10/howto-favicon mówi o dołączeniu profileatrybutu do headtagu ... czy to konieczne?
— Rakib
228

Większość przeglądarek wybiera favicon.icokatalog główny witryny bez konieczności powiadamiania o tym; ale nie zawsze od razu aktualizują go o nowy.

Zazwyczaj jednak wybieram drugi z twoich przykładów:

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />
— Codecraft
źródło
czy musi to być meta dane lub tagi skryptu? czy nie problem
— TheLegend
2
Tak długo jak jest w sekcji <head>, nie powinno to mieć znaczenia - ponieważ nie jest zależne od czegoś innego do pracy.
— Kodekraft
126

W rzeczywistości, aby twój ulubiony działał we wszystkich przeglądarkach, musisz mieć więcej niż 10 obrazów w odpowiednich rozmiarach i formatach.

Stworzyłem aplikację ( faviconit.com ), aby ludzie nie musieli ręcznie tworzyć wszystkich tych obrazów i poprawnych tagów.

Mam nadzieję że ci się spodoba.

— Eduardo Russo
źródło
6
Uwielbiałem aplikację, bez bs - od razu, a obraz można edytować przed utworzeniem wszystkich ulubionych +1 dla Ciebie za zaoszczędzenie mi
— sporo
1
Uzgodnione, to świetna aplikacja. Chociaż nie sądzę, aby wszystkie te rozmiary obrazów wydawały się konieczne, uwielbiam, że generuje je i wymaga znaczników itp. Dzięki!
— andrhamm
Indeead świetna aplikacja: +1 :. Pomógł bardzo o /
— Renato Gomes
1
Ale jest zastrzeżony.
— ctrl-alt-delor
To nie działa, dajeWhoops, looks like something went wrong.
— daka
68

Poniższe działa dla mnie ...

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
— Jet Blue
źródło
40

Przekonwertować plik obrazu do Base64 ciąg za pomocą narzędzia takiego jak ten , a następnie zastąpić YourBase64StringHerezastępczy w poniższym fragmencie z Twojego ciąg i umieścić linię w sekcji head HTML:

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

Działa to w 100% w przeglądarkach.

— Farshid
źródło
3
Znalazłem inne narzędzie, które dokonuje konwersji w JavaScript bez przesyłania danych na serwer: jpillora.com/base64-encoder Dodatkowo obsługuje wiele plików metodą przeciągnij i upuść. Zapisz stronę, aby użyć jej lokalnie.
— uchwyt
1
imho, najlepsze rozwiązanie, ponieważ honoruje stronę „static html” i jest całkowicie samowystarczalne w dokumencie.
— Buffalo Rabor,
1
Najlepsze rozwiązanie Działa również z plikami png. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />
— Rolf of Saxony
1
Spowoduje to dodanie długiego łańcucha do każdej strony. Użyj wbudowanego base64 dla małych obrazów, które rzadko są wysyłane do użytkownika.
— frodeborli,
W ten sposób twoja ulubiona osoba nigdy nie jest buforowana, za każdym razem wysyłasz do klienta cały ciąg znaków, IHMHO używa adresu URL i dlatego pamięć podręczna przeglądarki wydaje się „czystsza / lepsza”
— Michiel
34

Wykorzystanie Składnia: .ico, .gif, .png,.svg

Ta tabela pokazuje, jak korzystać z favicongłównych przeglądarek. Standardowa implementacja wykorzystuje element link z atrybutem rel w sekcji dokumentu, aby określić format pliku oraz nazwę i lokalizację pliku.

Pamiętaj, że większość przeglądarek da pierwszeństwo favicon.icoplikowi znajdującemu się w katalogu głównym witryny (dlatego ignoruje wszelkie znaczniki linków do ikon).

                                           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">

Obsługa formatu pliku

Poniższa tabela ilustruje obsługę formatu pliku obrazu dla 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

Implementacja przeglądarki

Poniższa tabela ilustruje różne obszary przeglądarki, w których wyświetlane są ikony ulubionych:

                      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

Pliki ikon mogą mieć rozmiar 16 × 16 , 32 × 32 , 48 × 48 lub 64 × 64 pikseli oraz głębię kolorów 8-bitową , 24-bitową lub 32-bitową .

Chociaż powyższe informacje są ogólnie poprawne, w niektórych sytuacjach istnieją pewne odmiany / wyjątki.

img Zobacz pełny artykuł u źródła na Wikipedii.

Aktualizacja: („więcej informacji”)

— ashleedawg
źródło
15

Jeśli favicon jest obrazem typu png, nie będzie działać w starszych wersjach Chrome. Jednak będzie działać dobrze w FireFox. 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 prawdziwym winowajcą jest pamięć podręczna.

— Tanveer Shaikh
źródło
1
W porządku; i tak bardzo trudno jest zainstalować / zachować starą wersję Chrome
— Ben Leggiero,
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
źródło
7 
<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

— Anand Dwivedi
źródło
4
Chociaż może to działać, nie możesz użyć image / png jako typu MIME - ponieważ jest to nieprawidłowe, biorąc pod uwagę, że używasz .ico
— zanderwar
5

Wiem, że jest to starszy post, ale nadal publikuję posty dla kogoś takiego jak ja. To zadziałało dla mnie

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

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

— Cyclotron3x3
źródło
4

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

Nie możesz powtórzyć niczego na stronie wcześniej:

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 w porządku

— bart2puck
źródło
3
Dzieje się tak, ponieważ powinien znajdować się w sekcji nagłówka dokumentu HTML i jest ignorowany przez większość przeglądarek, jeśli nie jest.
— Eric Sebasta,
Tak, chciałem to tutaj umieścić na wypadek, gdyby ktoś napotkał problem. Mój problem polegał na tym, że „cześć” to jakiś kod do debugowania, przez co trochę mnie zaskoczył.
— bart2puck,
3

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

— dmx
źródło
2

Zwróć uwagę, że jeśli witryna działa jako subfoldernp .:

http://localhost/MySite/

Musisz to wziąć pod uwagę. Jeśli robisz to z ASP.NETaplikacji, wystarczy dodać ~na początku adresu URL:

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
— Serj Sagan
źródło
2

Zgodnie z aktualizacją OP, nie wyświetlała się lokalnie, ale zgodnie z aktualizacją OP, kiedy przesłałem ją na serwer, było w porządku.

Ponieważ jest to prosta, statyczna strona HTML, mam luksus pracować na niej bez uruchamiania lokalnego serwera WWW.
Serwer WWW zazwyczaj domyślnie automatycznie wyświetla favicon, jeśli taki istnieje.

Ale gdy nie jest uruchomiony serwer WWW, sama przeglądarka nie tylko odczyta katalog w poszukiwaniu dodatkowych plików, powiedzmy favicon.ico, chyba że jest wymieniony w dokumencie HTML.

Tak więc, podczas gdy miałem następujące elementy w headtagu: 

    <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">

Nie także zawiera odniesienie dla zwykłego „ol favicon.ico.
Mimo to favicon.icoplik został dołączony, oprócz obrazów wymienionych powyżej.

Kiedyś dodałem następujący wiersz: 

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

Pojawił się także w mojej przeglądarce, kiedy przeglądam lokalny plik, nawet gdy nie serwuję go przez lokalny serwer.

Ikona pojawiła się dobrze, gdy działała na serwerze na żywo, ale nie lokalnie.

Wspominam o tym wyraźnie, ponieważ użyty przeze mnie generator favicon uprzejmie dostarczył kod, ikony, manifest i instrukcje. Mimo że zawierał favicon.icoobraz, nie dołączał <link>do kodu pliku, aby dodać go do htmldokumentu.
Domyślam się, że usługa favicon.icodomyślnie będzie obsługiwana i domyślnie używana przez wszystkie przeglądarki, więc tylko „alternatywne” wersje musiały zostać jawnie dodane do tagu head.
Najwyraźniej nie uważają, że przeglądając pliki lokalnie (czyli nie obsługując ich lokalnie), nie jesteśmy zainteresowani oglądaniem favicon?

— SherylHohman
źródło
-2

Właśnie użyłem png. Pamiętaj, aby usunąć białe tło. tworzy lepszą ikonę

— Tomek
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.