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.