Favicon musi działać poprawnie w kilku miejscach naraz: na karcie przeglądarki, w zakładkach, na ekranie głównym iOS oraz jako ikona zainstalowanej aplikacji webowej na Androidzie — a każde z nich wymaga innego rozmiaru i formatu pliku.
Dlaczego polska litera bywa problemem przy 16 pikselach
Pojedyncza litera na kolorowym tle to popularny sposób na szybkie logo, ale polski alfabet ma znaki diakrytyczne, których nie ma w podstawowej łacince: ą, ć, ę, ł, ń, ó, ś, ź, ż. Przy rozmiarze 16×16 pikseli ogonki i kreski nad literami (np. w „Ł" czy „Ż") łatwo zlewają się z resztą znaku, więc dla najmniejszych rozmiarów lepiej sprawdza się litera bez dodatkowych znaków, np. sam kształt bazowy bez ogonka.
Rola tagów <link> w <head>
Każdy format ikony podłączany jest osobnym tagiem <link rel="icon"> lub <link rel="apple-touch-icon"> wraz z atrybutem sizes określającym rozmiar, dzięki czemu przeglądarka wybiera z zestawu opcję najlepiej dopasowaną do kontekstu.
Web App Manifest dla PWA
Progresywne aplikacje webowe potrzebują pliku site.webmanifest w formacie JSON z listą ikon, nazwą strony i kolorem motywu — właśnie stamtąd Android pobiera ikonę przy instalowaniu witryny jako samodzielnej aplikacji.
Do czego to służy
- Wygenerować pełny zestaw ikon w wymaganych rozmiarach z jednego obrazu źródłowego.
- Otrzymać gotowy kod HTML tagów <link> do wklejenia w <head>.
- Upewnić się, że witryna wygląda poprawnie po dodaniu do ekranu głównego urządzenia mobilnego.