Może się wydawać, że omawiana we wpisie favicona to obiekt znany każdemu użytkownikowi przeglądarki internetowej. Jednak nawet po zawężeniu grupy wyłącznie do osób zaznajomionych z tematyką webu może się okazać, że nie jest to wcale takie oczywiste. Nawet gdy z grona programistów wyekstrahujemy czystych front-end developerów lub po prostu koderów. Trudno wręcz określić jak tego typu obiekty nazywają osoby niezwiązane z rozwojem serwisów internetowych. Może to być shortcut icon, website icon, tab icon, URL icon, bookmark icon albo po prostu ikonka. Niezależnie od przyjętego terminu temat favicony jest nieco szerszy niż można byłoby się spodziewać. W tym poście postaram się pokazać dlaczego.
Czym jest favicon
Favicon to ikonka lub po prostu obrazek reprezentujący serwis internetowy w belce przeglądarki lub jak ma to miejsce aktualnie w jednej z jej zakładek. Dzięki niej użytkownik ma możliwość szybszej identyfikacji i wyszukania witryny w gąszczu informacji. Wzbogacenie serwisu o ten element ogranicza się do podlinkowania grafiki w sekcji <head>.
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Przestarzała opcja -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>W zamierzchłych czasach obsługiwany był jedynie format ico. Choć aktualna paleta rozwiązań jest znacznie szersza to nawet pierwotny, organiczony pod pewnymi względami format nie był i nie jest w pełni wykorzystywany. Choć sama ikona traktowana jest zazwyczaj jako zwykły plik rastrowy w rzeczywistości jest to kontener zawierajacy jeden lub więcej obrazów. Przy czym maksymalny rozmiar grafiki to 256x256px. Użytkownicy pierwszych systemów operacyjnych zapewne jeszcze o tym pamiętają. W zmierzłych czasach podmiana domyślnej lub należycie przygotowanej grafiki na opcję udostępnioną przez leniwego twórcę kończyła się przeważnie pixelartem w kilkukrotnym powiększeniu. By tego uniknąć plik ikony powinien zawierać kilka wersji tego samego obrazka (16x16, 24x24, 32x32, itd). Im mniejsza rozdzielczość tym złożoność grafiki była niższa. Ze względu na parametry uwcześnie dostepnych wyświetlaczy oraz ograniczone możliwości oprogramowania do edycji grafiki zwykłe skalowanie w dół nie dawało oczekiwanych rezultatów.
Jeśli chodzi o omawiane we wpisie zastosowania webowe sytuacja wygląda identycznie. A raczej może tak wyglądać, gdyż format ico jest coraz rzadziej stosowany jako główna ikona, a niedociągnięcia wychodzą dopiero w sytuacji gdy oczekiwana funkcjonalność serwisu przerasta jego paramenty techniczne. Chodzi np. wyświetlanie antycznej witryny i jej równie leciwego kodu w urządzeniach wyposażonych w nowoczesne wyświetlacze, np. retina. Dodanie do ekranu głównego smartfona witryny wyposażonej w favicon w formacie ico, ale zawierającej tylko jeden obrazek o niskiej rozdzielczości zakończy się podobnie jak miało to miejsce w przypadku systemów desktopowych. A przynajmniej tych które wykorzystywały lub nadal wykorzystują ikony w formacie ico.
Favicon aktualnie
Lata mijały, a ludzie przygotowujący ikony we wspomnianym uprzednio formacie powoli odchodzili w zaświaty. Ze względu na zagrożenie wyginięciem ostatnich ludzi pamiętających tę zamierzchłą strukturę danych, postanowiono rozszerzyć wsparcie o favicony przygotowane w nieco popularniejszych formatach. I tak oto pojawiły się ikony w JPG, PNG, GIF. W rzeczywistości format ico ze względu wskazane już możliwości do dziś stanowi opcję bazową. Jednak lenistwo, niewiedza lub oszczędność deweloperów, grafików oraz wszelkiej maści osób związanych z rozwojem witryn internetowych i tak objawia się załączaniem ikon zawierających tylko jedną opcję. A skoro nie widać różnicy to po co przepłacać. I tak oto coraz popularniejsze stawały się ikonki oparte o typowe pliki rastrowe.
<link rel="icon" type="image/jpg" href="icon.jpg">
<link rel="icon" type="image/png" href="icon.png">
<link rel="icon" type="image/gif" href="icon.gif">Oczywiście nowa specyfikacja zapewnia funkcjonalność oferowaną przez pradziejowy format, jednak realizowane jest to w nieco inny, a może i prostszy sposób. Z czytaniem specyfikacji jest jednak jak z instrukcjami dołączanymi do zakupionego sprzętu. Są. I tyle. Realia to ico zawierający grafikę w jednej rozdzielczości o wymiarach 16x16 lub 32x32 pikseli albo favicon w formacie png. Wymiary drugiej opcji wahają się przeważnie w tym samym zakresie, choć atrybut odnoszący się do wymiarów zazwyczaj w ogóle się w kodzie nie pojawia.
<link rel="icon" type="image/png" sizes="32x32" href="icon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="icon-192x192.png">Dla przyzwoitości warto dodać, że część przeglądarek wzbogacono także o wsparcie formatu GIF wraz z obsługą tak bardzo kochanych animacji. Ze względu na znikome wykorzystanie i ekspansję nowocześniejszych formatów pozwolę temu tematowi umrzeć. A nuż, jeszcze ktoś sobie przypomni o tym szachrajstwie i wrzuci do sieci by gnębić niespodziewających się zagrożenia użytkowników.
Czas SVG
W przypadku ikon dla okienkowych systemów operacyjnych zmiany zachodziły nieco szybciej i wcześniej niż miało to miejsce w przeglądarkach internetowych. Tok przemian był jednak identyczny. Wpierw wysłużone ikony zastąpił format PNG, a następnie ktoś wpadł na pomysł by wprowadzić możliwość ich bezstratnego skalowania. I tak oto do OS zawitał format wektorowy SVG, a przynajmniej do znacznej części systemów Uniksowych. Dziś, zarówno w przypadku przeglądarek, jak i systemów operacyjnych napotkamy na prawdziwy miszmasz ikonkowy. Nie brakuje ikon w pradawnym formacie ico, nieco świeższych png, jak i svg.
Wymusza to choćby konieczność wsparcia starszych przeglądarek. Niestety ani świat ani ludzie ani przeglądarki nie rozwijają się tak szybko jak można byłoby tego oczekiwać. Z tego względu prawidłowym podejściem jest załączenie zarówno ikony w formacie rozpoznawalnym przez starsze pokolenia browserów, jak i SVG wybieranego przez młodsze rozwiązania. Zalecana opcją jest format ico zawierajacy jeden obrazek o wymiarach 16x16px oraz SVG. Pierwszy link stosowany jest wyłącznie w celu zapewenienia wspacia dla przestarzałych przeglądarek i z tego wzgędu sugerowana jest tak nikczemna rozdzielczość.
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Warto również wspomnieć o możliwości dołączania ikon w kodowaniu Base64. Nie jest to może popularna opcja, ale od czasu do czasu może zaoszczędzić nerwów.
<link href="data:image/x-icon;base64,AABE....qAVB" rel="icon" type="image/x-icon">Problemy? Jakie problemy? Przecież to tylko ikonka, szesnaście pikseli do kwadratu. Po cóż zaprzątać sobie takimi drobnostkami głowę?
Złego dobre początki
Favicona sama w sobie niestanowi większego problemu i faktycznie nie jest zagadnieniem nad którym trzeba się specjalnie pochylać. Co prawda mogą pojawić się problemy z kompatybilnością pomiędzy zróżnicowanymi systemami operacyjnymi, ale są to dość rzadkie przypadki i wynikają przeważnie z problemów dotyczących kodowania samej grafiki.
O ile wspomniane 256px samo w sobie nie sprawia większych problemów to rosnąca ilość środowisk korzystających z tego typu identyfikacji wizualnej już tak. Czasy w których ikonki aplikacji webowych pojawiały się tylko i wyłącznie w belce okna przeglądarki lub jej zakładkach już dawno minęły. Aktualnie ikony aplikacji wykorzystywane są zarówno przez systemy desktopowe, jak i mobile. Ulubiona ikona może pojawić się na pulpicie i w menu Windowsa, w menu aplikacji Apple Mac OS lub Linuksowego Gnoma, na pulpicie Androida, iOSa, w smartwatchu, etc. etc. Jeden format favikony niesprosta tego typu wymaganiom z kilku powodów. O ile systemy desktopowe bez problemu poradzą sobie z formatem ico to Google Android czy iOS już nie. Co gorsza system spod znaku zielonego robota nie strawi i popularnego SVG.
Tego typu braki łatane są na różne sposoby. Niestety ile systemów tyle podejść. Ze względu na rozległość zagadnienia i chaos w nim panujący jest to temat na odrębny wpis. Szczególnie że opisane powyżej połączenie kontenerów ico i SVG, pozwala rozwiązać większość problemów związanych ze skalowaniem, a także sprostać kolejnym wyzwaniom.
Tak, to nie wszystko.
Ciemność, widzę ciemność
Możliwość zmiany kolorystyki aplikacji webowej, a przede wszystkim wybór trybu ciemnego, określany jest jako nowy i pożądany trend. Osoby mające kontakt z serwisami internetowymi przełomu tysiąclecia doskonale wiedzą, że nie jest to nic nowego, a wręcz jest to namiastka niegdyś popularnych i wszędobylskich funkcjonalności. Tak czy owak dark mode na dobre zagościł w aplikacjach użytkowych i nie ma od tego odwrotu.
Można zakładać, że skoro temat pojawił się we wpisie o favikonach to pewnie ma na nie jakiś wpływ. O ile zmiana kolorystyki samego serwisu nie dotyka tematu ulubionej ikony, o tyle rozprzestrzenienie się podejścia na aplikacje natywne i motywy systemowe już tak.
Możliwość dostosowania okna oraz elementów przeglądarek internetowych obejmuje wszystkie popularne rozwiązania i jest dostępna na rynku od dobrych kilku lat. Zmiany te wymagały jednak od użytkownika umyślnego działania. Dziś jest to kwestia powiązana bezpośrednio z konfiguracją motywu systemowego. Jeśli użytkownik zostanie zachęcony przez system Windows, GNU/Linux, MacOS, Google Android, Apple iOS do aktywacji dark mode lub jest to opcja domyślnie aktywowana, wszystkie natywne aplikacje w tym przeglądarki internetowe również zmienią swą kolorystykę.
Podsumowując, zmiana motywu systemowego wpływa na okno przeglądarki i jej zakładki, a to z kolei implikuje zmiany w widoczności ikon serwisu internetowego. Większość favicon posiada bowiem transparentne tło i nie ma pewności, że obrazek prezentujący się należycie na jasnym podkładzie będzie spełniał swe zadanie również na ciemnym. Dosadniej to ujmując, czarny kolor na czarnym tle nie prezentuje się najokazalej. W sumie w ogóle się nie prezentuje, a z kolei to utrudnia użytkownikowi powrót do zakładki z poszukiwaną stroną i nie świadczy najlepiej o profesjonalizmie firmy.
Konia z rzędem osobie która jest w stanie odgadnąć, który producent biżuterii odwiedzony pięć minut temu ukrywa się pod daną zakładką. Dość ciekawe, że wskazywana bolączka dotyka znaczną część przedsiębiorstw wiodących prym na rynku sprzedaży detalicznej.
Oczywiście wskazane problemy to efekt nienadążania za zmianami zachodzącymi w świecie technologii informacyjnych. Skoro największe koła zamachowe tej ewolucji, jakimi są Google oraz Apple same zagubiły się w biegu, nie ma się czemu dziwić.
W kolejnym wpisie dorzucę jeszcze kilka innych problemów związanych z ikonkami oraz sposoby ich ominięcia. Oczywiście wskazywane problemy to kaliber równie poważny jak sama favicona, jednak nawet tak drobna kwestia ma wpływ na wrażenia z użytkowania aplikacji.