Jaki jest obecnie najlepszy sposób na wyświetlenie ikony ulubionych we wszystkich przeglądarkach obsługujących ikony Favicons?

83

Jaki jest obecnie najlepszy sposób na wyświetlenie ikony ulubionych we wszystkich przeglądarkach, które obecnie ją obsługują?

Proszę załączyć:

  1. Jakie formaty obrazów są obsługiwane przez poszczególne przeglądarki.

  2. Które wiersze są potrzebne i w jakich miejscach w różnych przeglądarkach.

html standards favicon Fred
źródło
1
Warto również dołączyć tutaj „ikony ulubionych” dla iPhone'a; to znaczy, jeśli użytkownik zdecyduje się dodać Twoją witrynę do swojego ekranu głównego. Kod użyty w tym przypadku jest następujący: <link rel = "apple-touch-icon" href = "touch.png" /> Wymiary powinny wynosić 57x57 pikseli. Alternatywnie możesz pominąć tag linku i po prostu umieścić plik o nazwie „apple-touch-icon.png” w katalogu głównym swojej witryny.
inny
Skoro już o
Zach Lysobey
Pamiętaj, że będziesz potrzebować większych ikon dla wyświetlaczy iPada i iPhone'a Retina. Zobacz wytyczne Apple: developer.apple.com/library/IOs/#documentation/ ...
Mike Ottum,

Odpowiedzi:

109

Idę tutaj po pas i szelki.

Tworzę ikonę 32x32 zarówno w formatach, jak .icoi o .pngnazwie favicon.icoi favicon.png. Nazwa ikony tak naprawdę nie ma znaczenia, chyba że masz do czynienia ze starszymi przeglądarkami.

  1. Umieść favicon.icow katalogu głównym swojej witryny, aby obsługiwać starsze przeglądarki (opcjonalne i dotyczy tylko starszych przeglądarek.
  2. Umieść plik favicon.png w podkatalogu moich obrazów (aby zachować porządek).
  3. Dodaj następujący kod HTML do <head>elementu.
<link rel = "icon" href = "/ images / favicon.png" type = "image / png" />
<link rel = "ikona skrótu" href = "/ favicon.ico" />

Proszę to zanotować:

  • Typ MIME dla .icoplików został zarejestrowany jako image / vnd.microsoft.icon przez IANA .
  • Internet Explorer zignoruje typeatrybut dla relacji ikony skrótu i ​​jest to jedyna przeglądarka obsługująca tę relację, nie trzeba jej podawać.

Odniesienie

Brian Matthews
źródło
2
OK, mam dzień „Microsoft działa mi na nerwy”. Nie mogę uruchomić tego w Internet Explorerze, mimo że pokazuje favicon dla witryny stackoverflow. Czy są jakieś inne ustawienia, które mają na to wpływ, takie jak typ dokumentu?
belugabob
1
FYI - znalazłem odpowiedź. Jeśli odsyłasz do witryny przez localhost: 8080 / index.html , to nie działa - jeśli używasz rzeczywistej nazwy maszyny ( machineName: 8080 / index.html ), wszystko działa tak, jak można się spodziewać. Nie mogę nawet zacząć rozumieć tego zachowania - czy ktoś chce spróbować?
belugabob
2
Aktualizacja - zachowanie jest spowodowane przez buforowanie ikony przez przeglądarkę. Wyczyszczenie tymczasowych plików internetowych wyleczy to, jeśli czujesz się szczęśliwy, tracąc pamięć podręczną.
belugabob
2
Czy byłoby lepiej umieścić wersję łącza w IE w komentarzu warunkowym IE?
EoghanM
9
32x32 ?? Czy 16x16 nie jest normą?
Eduardo Molteni
10

Używam formatu .ico i umieszczam następujące dwie linie w <head>elemencie:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
John Topley
źródło
6

Aby obsługiwać również ikony dotykowe dla tabletów i smartfonów, wolę podejście HTML5Boilerplate

Więcej informacji na temat ikon dotykowych można znaleźć w tym artykule .

Przy obecnym stanie obsługi przeglądarek nie musisz nawet dodawać tagu HTML dla ikony ulubionych w swoim dokumencie. Przeglądarki automatycznie przeszukają listę plików, zobacz ten przykład dla iOS:

Jeśli w kodzie HTML nie określono żadnych ikon, iOS Safari przeszuka katalog główny witryny w poszukiwaniu ikon z prefiksem apple-touch-icon lub apple-touch-icon-prekomponowanym. Na przykład, jeśli odpowiedni rozmiar ikony dla urządzenia to 57 × 57 pikseli, system iOS wyszukuje nazwy plików w następującej kolejności:

  1. apple-touch-icon-57x57-precomposed.png
  2. apple-touch-icon-57x57.png
  3. apple-touch-icon-precomposed.png
  4. apple-touch-icon.png

Radzę nie umieszczać ikony ulubionych w dokumencie, ale przygotuj listę plików w witrynie głównej:

  • apple-touch-icon-114x114-precomposed.png
  • apple-touch-icon-144x144-precomposed.png
  • apple-touch-icon-57x57-precomposed.png
  • apple-touch-icon-72x72-precomposed.png
  • apple-touch-icon-precomposed.png
  • apple-touch-icon.png (57px*57px)
  • favicon.ico HiDPI (32x32px)

Kiedy pobierasz szablon z html5boilerplate.com, wszystkie one są dołączone, wystarczy, że zastąpisz je własnymi ikonami.

Willem de Wit
źródło
Pierwszy link jest nieaktualny, musi teraz przejść na stronę github.com/h5bp/html5-boilerplate/blob/master/src/doc/ ... Sam bym edytował, ale zmieniono za mało znaków: / Dzięki za odpowiedź!
Brendan
4

Uwaga: IE6 nie obsługuje poprawnie plików PNG.

zwinny
źródło
3

Favicon musi być plikiem .ico, aby działał poprawnie we wszystkich przeglądarkach.

Nowoczesne przeglądarki obsługują również obrazy PNG i GIF.

Odkryłem, że generalnie najłatwiejszym sposobem na utworzenie takiego jest skorzystanie z ogólnie dostępnej usługi internetowej, takiej jak favicon.cc .

Antti Kissaniemi
źródło
3

Istnieje również strona, na której możesz sprawdzić, jak tworzona jest ikona ulubionych stron

getfavicon.org

Tam możesz zobaczyć samouczek na temat tworzenia ulubionych ikon, typów obrazów i rozdzielczości, to miłe!


źródło
Już nie działa.
Roman Starkov
2

Posiadanie znaku favicon.*w katalogu głównym jest automatycznie wykrywane przez większość przeglądarek. Możesz upewnić się, że został wykryty, używając:

 <link rel="icon" type="image/png" href="/path/image.png" />

Osobiście używam obrazów .png, ale większość formatów powinna działać.

Ross
źródło
Nie, to nie jest „favicon. *”, Działa tylko kilka formatów: ico, png, gif, jpeg i SVG. Zobacz en.wikipedia.org/wiki/Favicon#File_format_support .
WhyNotHugo
1

Odpowiedź na to pytanie stała się na tyle skomplikowana, że najlepszym sposobem jest po prostu użycie narzędzia takiego jak RealFaviconGenerator, które pozwala przesłać plik png / jpg, a następnie generuje ikony ulubionych i kod obejmujący wszystkie platformy: https: // realfavicongenerator. netto/

npfoss
źródło