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.
<link rel="icon" type="image/x-icon" href="favicon.ico">
dohead
(obok 32, 16 i 180 odmian faviconlink
) rozwiązało problem lokalnie. Ponieważ dołączyłemlink
s dla większych rozmiarów ikon i manifestu, nie zastanawiałem się dwa razy, dlaczego sięfavicon.ico
nie pokazałem! :-)Odpowiedzi:
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:źródło
profile
atrybutu dohead
tagu ... czy to konieczne?Większość przeglądarek wybiera
favicon.ico
katalog 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:
źródło
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.
źródło
Whoops, looks like something went wrong.
Poniższe działa dla mnie ...
źródło
Przekonwertować plik obrazu do Base64 ciąg za pomocą narzędzia takiego jak ten , a następnie zastąpić
YourBase64StringHere
zastępczy w poniższym fragmencie z Twojego ciąg i umieścić linię w sekcji head HTML:Działa to w 100% w przeglądarkach.
źródło
Wykorzystanie Składnia:
.ico
,.gif
,.png
,.svg
Ta tabela pokazuje, jak korzystać z
favicon
głó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.ico
plikowi znajdującemu się w katalogu głównym witryny (dlatego ignoruje wszelkie znaczniki linków do ikon).Obsługa formatu pliku
Poniższa tabela ilustruje obsługę formatu pliku obrazu dla
favicon
:Implementacja przeglądarki
Poniższa tabela ilustruje różne obszary przeglądarki, w których wyświetlane są ikony ulubionych:
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.
Aktualizacja: („więcej informacji”)
Możesz pobrać (programowo lub ręcznie) ulubioną ikonę Google zapisaną w pamięci podręcznej dla dowolnej domeny z adresem URL, takim jak:
https://www.google.com/s2/favicons?domain=stackoverflow.com
Użycie powyższego adresu URL bezpośrednio w
<img>
tagu zwraca: „ ”.Kilka razy korzystałem z realfavicongenerator.net ; jest bardzo dokładny, generuje / dostosowuje każdą możliwą odmianę favicon, która może być potrzebna dla maksymalnej kompatybilności. (Jeśli jednak szukasz pojedynczego obrazu favicon, może to nie być narzędzie dla ciebie!) Do prostej konwersji plików (np.
PNG
DoICO
, itp.) Lubię onlineconvertfree.com .źródło
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.
źródło
Zgodnie z zaleceniami W3.org , możesz użyć tego
rel
atrybutu, aby to osiągnąć.Przykład:
źródło
źródło
To zadziałało dla mnie
źródło
Wiem, że jest to starszy post, ale nadal publikuję posty dla kogoś takiego jak ja. To zadziałało dla mnie
umieść ikonę favicon w katalogu głównym ...
źródło
jako dodatkowa uwaga, która może komuś pomóc.
Nie możesz powtórzyć niczego na stronie wcześniej:
nie załaduje ico
działa w porządku
źródło
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.źródło
Zwróć uwagę, że jeśli witryna działa jako
subfolder
np .:Musisz to wziąć pod uwagę. Jeśli robisz to z
ASP.NET
aplikacji, wystarczy dodać~
na początku adresu URL:źródło
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
head
tagu:Nie także zawiera odniesienie dla zwykłego „ol
favicon.ico
.Mimo to
favicon.ico
plik został dołączony, oprócz obrazów wymienionych powyżej.Kiedyś dodałem następujący wiersz:
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.ico
obraz, nie dołączał<link>
do kodu pliku, aby dodać go dohtml
dokumentu.Domyślam się, że usługa
favicon.ico
domyś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?
źródło
Jeśli dodasz favicon do folderu root / images o nazwie favicon.ico, przeglądarka automatycznie go zrozumie i otrzyma jako favicon.I przetestowałem i działałem. Twój link musi być www.website.com/images/favicon.ico
Aby uzyskać więcej informacji, spójrz na tę odpowiedź:
Czy musisz dołączyć <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?
źródło
Pamiętaj, że FF nie ładuje ikony ze zbędnym
//
adresem URL, takim jak/img//favicon.png
. Testowane na FF 53. Chrome jest OK.źródło
Spróbuj użyć
<link rel="icon" type="image/ico" href="images/favi.ico"/>
źródło
Właśnie użyłem png. Pamiętaj, aby usunąć białe tło. tworzy lepszą ikonę
źródło