Jaka jest najlepsza praktyka tworzenia favicon w witrynie internetowej?

103

Pytanie

  • Jaka jest najlepsza praktyka tworzenia favicon w witrynie internetowej?
  • i czy plik .ico z obrazami 16x16 i 32x32 jest lepszy niż plik .png tylko z 16x16?
  • Czy właściwa metoda preferowana dzisiaj nie działa w dość starych przeglądarkach?

Metoda 1

Umieszczenie pliku o nazwie favicon.icow głównym katalogu jest jednokierunkowe. Przeglądarka zawsze żąda tego pliku. Możesz to zobaczyć w plikach dziennika Apache.

Metoda 2

Tag HTML w <head>sekcji:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />
html favicon bytecode77
źródło

Odpowiedzi:

154

Istnieje kilka sposobów tworzenia favicon. Najlepszy sposób zależy od różnych czynników:

  • Czas, który możesz przeznaczyć na to zadanie. Dla wielu ludzi jest to „tak szybko, jak to możliwe”.
  • Wysiłki, które chcesz podjąć. Na przykład ręczne rysowanie ikony 16x16, aby uzyskać lepsze wyniki.
  • Specyficzne ograniczenia, takie jak obsługa określonej przeglądarki z dziwnymi specyfikacjami.

Pierwsza metoda: użyj generatora favicon

Jeśli chcesz, aby praca została wykonana dobrze i szybko, możesz użyć generatora favicon . Ten tworzy obrazy i kod HTML dla wszystkich głównych przeglądarek na komputery stacjonarne i telefony komórkowe. Pełne ujawnienie: jestem autorem tej strony.

Zalety takiego rozwiązania: jest szybkie i wszystkie kwestie dotyczące kompatybilności zostały już rozwiązane.

Druga metoda: Utwórz favicon.ico (tylko przeglądarki komputerowe)

Jak sugerujesz, możesz utworzyć favicon.icoplik zawierający obrazy 16x16 i 32x32 (zauważ, że Microsoft zaleca 16x16, 32x32 i 48x48 ).

Następnie zadeklaruj go w swoim kodzie HTML:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

Ta metoda będzie działać ze wszystkimi przeglądarkami komputerowymi, starymi i nowymi. Jednak większość przeglądarek mobilnych zignoruje ikonę ulubionych.

Co do twojej sugestii umieszczenia favicon.icopliku w katalogu głównym i nie zadeklarowania go: uważaj, chociaż ta technika działa w większości przeglądarek, nie jest w 100% niezawodna. Na przykład Windows Safari nie może go znaleźć (prawda: ta przeglądarka jest w jakiś sposób przestarzała w systemie Windows, ale o co chodzi). Ta technika jest przydatna w połączeniu z ikonami PNG (dla nowoczesnych przeglądarek).

Trzecia metoda: Utwórz favicon.ico, ikonę PNG i ikonę Apple Touch (wszystkie przeglądarki)

W swoim pytaniu nie wspominasz o przeglądarkach mobilnych. Większość z nich zignoruje favicon.icoplik. Chociaż Twoja witryna może być przeznaczona dla przeglądarek na komputery stacjonarne, istnieje prawdopodobieństwo, że nie chcesz całkowicie ignorować przeglądarek mobilnych.

Możesz osiągnąć dobrą kompatybilność z:

  • favicon.ico, patrz wyżej.
  • Ikona PNG o wymiarach 192x192 dla Androida Chrome
  • Ikona Apple Touch 180x180 (dla iPhone 6 Plus; inne urządzenie zmniejszy ją w razie potrzeby).

Zadeklaruj je za pomocą 

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

To nie jest cała historia, ale w większości przypadków jest wystarczająco dobra.

philippe_b
źródło
9
W rzeczywistości często używana <link rel = "ikona skrótu" href = "/ path / to / icons / favicon.ico"> nie jest poprawną opcją. Nie jest nawet standardem i obsługuje go tylko IE. Od wersji IE 9 IE obsługuje domyślną metodę „spójrz na root”. Nie jest to więc sposób na obsługę wszystkich przeglądarek, a jedynie sposób na obsługę IE <9. Polegaj na (teraz standardowej) metodzie „miejsce w katalogu głównym” lub, jeśli nalegasz, dodaj: <link rel = "icon" href = "/ favicon.ico"> (Mimo że to też nie jest standard)
HappyMe
7
Mechanizm favicon zdecydowanie ewoluował przez lata. Zauważyłem dzisiaj, że specyfikacja w MDN mówi teraz: Typ linku skrótu jest często widoczny przed ikoną, ale ten typ linku jest niezgodny, ignorowany i autorzy stron internetowych nie mogą go już używać. Znaczenie <link ref="icon" ...>raczej użyj niż <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types
broc.seib
1
Dziękuję @ broc.seib za opinię. W momencie pisania tego komentarza zgubiłem, dlaczego była to „ikona skrótu”, a nie „ikona”. Jasne, Mozilla ma swój głos w tej historii. Ale nie możemy zapominać, dlaczego ta deklaracja jest na pierwszym miejscu: do obsługi starszych przeglądarek, takich jak IE 8. Najnowsze przeglądarki używają ikon PNG, które są czystsze i lżejsze niż ICO. Mój plan dotyczący RealFavicon polega na całkowitym usunięciu tej deklaracji. Wcześniej muszę przeprowadzić testy na IE 7, 8 i 9.
philippe_b
Nie wspominając o tym, że jeśli „wyświetlisz źródło” na tej stronie, na Stack Overflow, ref="shortcut icon"jest dokładnie tym, czego używają.
Steven Ventimiglia,
1
@laggingreflex /favicon.icojest metodą preferowaną. Oto, co otrzymujesz podczas wizyty www.google.com. Jednak możesz nie chcieć zanieczyszczać swojego katalogu głównego ikoną. W takim przypadku znaczniki działają dobrze.
philippe_b
2
  1. możesz pracować z tą witryną w celu wygenerowania favin.ico
  2. Zalecam użycie formatu .ico, ponieważ png nie działa z metodą 1, a ico może mieć więcej szczegółów!
  3. obie metody działają ze wszystkimi przeglądarkami, ale kiedy działa automatycznie, jaki chcesz wpisać kod? więc myślę, że metoda 1 jest lepsza.
a828h
źródło
2

Użyłem https://iconifier.net. Wgrałem mój obraz, pobrałem plik zip z obrazami, dodałem obrazy do mojego serwera, postępowałem zgodnie ze wskazówkami na stronie, w tym dodając linki do mojego index.html i zadziałało. Moja ulubiona ikona wyświetla się teraz na moim iPhonie w Safari po wybraniu opcji „Dodaj do ekranu głównego”

Hblegg
źródło