Favicon na miarę możliwości
Może się wydawać, że favicona to obiekt znany każdemu. Jednak nawet wśród programistów – w tym front-endowców – temat ten rzadko bywa oczywisty. Trudno zresztą określić, jak nazywają te ikonki osoby niezwiązane z branżą: shortcut icon, tab icon, czy po prostu „ikonka”. Niezależnie od nomenklatury, temat jest znacznie szerszy, niż mogłoby się wydawać.
Czym właściwie jest favicon?
To graficzna reprezentacja serwisu widoczna na karcie przeglądarki. Pozwala użytkownikowi błyskawicznie zidentyfikować witrynę w gąszczu otwartych zakładek. Od strony technicznej jej wdrożenie to zaledwie jedna linia kodu w sekcji .
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>W zamierzchłych czasach jedynym słusznym formatem był .ico. Choć dziś mamy więcej opcji, ten pierwotny format wciąż bywa nierozumiany. Plik .ico to nie zwykły raster, lecz kontener mogący pomieścić kilka wersji tego samego obrazka w różnych rozdzielczościach (np. 16x16, 32x32, aż do 256x256 px).
Niestety, lenistwo twórców często kończyło się przygotowaniem tylko jednej, małej grafiki. Efekt? Na nowoczesnych ekranach typu Retina, gdzie system skaluje ikonę w górę, zamiast logotypu użytkownik oglądał „pixel art” w najgorszym wydaniu.
Favicon dziś: PNG to nie wszystko
Z czasem wsparcie rozszerzono o formaty rastrowe: JPG, PNG i GIF. Wydawało się, że to uprości sprawę, ale realia pozostały brutalne. Deweloperzy często załączają pojedynczy plik PNG o niskiej rozdzielczości, zapominając o atrybucie sizes.
<link rel="icon" type="image/png" sizes="32x32" href="icon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="icon-192x192.png">Warto wspomnieć, że niektóre przeglądarki wspierają nawet animowane GIF-y, choć ze względu na znikome wykorzystanie (i estetyczny ból użytkowników), pozwolę temu tematowi umrzeć śmiercią naturalną.
Era SVG i Base64
Prawdziwym przełomem w systemach operacyjnych i przeglądarkach stał się format wektorowy SVG, który oferuje bezstratne skalowanie niezależnie od rozdzielczości ekranu.
Aktualnie najlepszym podejściem jest łączenie tradycji z nowoczesnością. Zaleca się załączenie pliku .ico (dla starszych przeglądarek) oraz .svg (dla współczesnych rozwiązań).
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Dla desperatów lub w specyficznych przypadkach istnieje też opcja kodowania Base64, która pozwala „zaszyć” ikonkę bezpośrednio w kodzie strony, oszczędzając jedno zapytanie do serwera.
<link href="data:image/x-icon;base64,AABE....qAVB" rel="icon" type="image/x-icon">Nowe środowiska, stare problemy
Problemy zaczynają się tam, gdzie kończy się karta przeglądarki. Dziś ikona serwisu musi odnaleźć się w menu Windowsa, docku macOS, na pulpicie Androida, iOS-a czy w powiadomieniach smartwatcha.
Jeden format temu nie sprosta. Systemy desktopowe kochają .ico, ale Android czy iOS już niekoniecznie. Co gorsza, system Google’a miewa problemy nawet z popularnym SVG. Każdy ekosystem ma własne wytyczne, co tworzy technologiczny chaos.
Ciemność, widzę ciemność (Dark Mode)
Prawdziwym wyzwaniem okazał się tryb ciemny (Dark Mode). O ile zmiana kolorów samej strony to kwestia CSS, o tyle favicona z transparentnym tłem może stać się niewidoczna, gdy systemowy pasek zadań zmieni kolor na czarny.
Czarny logotyp na czarnym tle po prostu znika.
Utrudnia to nawigację i wygląda skrajnie nieprofesjonalnie. Co ciekawe, ta bolączka dotyka nawet rynkowych gigantów handlu detalicznego czy luksusowych marek. Często wystarczy spojrzeć na gąszcz otwartych kart, by przekonać się, że wielu liderów rynku „zgubiło” swoją identyfikację wizualną w trybie nocnym. To efekt nienadążania za ewolucją UI, w której pogubili się nawet tacy gracze jak Google czy Apple.
Jak problemy te wyglądają w praktyce i czy naprawdę warto zaprzątać sobie głowę szesnastoma pikselami do kwadratu – o tym w kolejnym wpisie.