UX favicona: co sprawia, że favicon jest świetny

Świetny favicon to prosty, kontrastowy znak, zwykle logomark Twojej marki albo jedna lub dwie litery, który pozostaje czytelny w rozmiarze 16x16 pikseli zarówno na jasnych, jak i ciemnych kartach przeglądarki, pasuje do marki i rzadko się zmienia. Wszystko inne w tym przewodniku (wyrównanie do pikseli, kolor, marginesy, przezroczystość, rozmiar pliku) służy tym celom: sprawić, by Twoją stronę natychmiast było widać wśród dziesiątek otwartych kart.

Favicon jest malutki, ale pojawia się w wielu miejscach: na kartach przeglądarki, w paskach zakładek, na listach historii, w menu wyszukiwania kart, w wynikach wyszukiwania Google na urządzeniach mobilnych i komputerach oraz na ekranach głównych telefonów. Gdy użytkownik ma otwartych wiele kart, tytuł jest często skrócony do zera, a ikona to jedyna wskazówka, która zostaje. To sprawia, że jest ona prawdziwym elementem nawigacji, a nie dekoracją.

1. Czytelność w rozmiarze 16x16

Klasyczny rozmiar favicona to 16x16 pikseli CSS. Na standardowym ekranie to dosłownie 256 pikseli; na ekranie retina 2x przeglądarka zwykle wybiera dla tego samego miejsca obraz 32x32. Cokolwiek zaprojektujesz, musi przetrwać takie zmniejszenie.

Postaw na prostotę

• Jeden kształt albo jedna lub dwie litery. Sprawdzi się pojedyncza pogrubiona litera, koło z symbolem lub prosty znak geometryczny. Trzy litery albo całe słowo zamienią się w szum.
• Jeden punkt skupienia. Jeśli nie potrafisz opisać ikony w pięciu słowach, jest zbyt skomplikowana.
• Bez gradientów, cieni i drobnych tekstur. W małych rozmiarach zamieniają się w rozmazane plamy.

Wyrównaj do siatki pikseli

W rozmiarze 16x16 linia przesunięta o pół piksela względem siatki jest wygładzana na dwóch rzędach pikseli i wygląda na szarą i miękką. Umieszczaj krawędzie na pełnych granicach pikseli i stosuj parzyste szerokości tam, gdzie kształt jest symetryczny. Jeśli eksportujesz z narzędzia wektorowego, włącz przyciąganie do pikseli albo sprawdź pomniejszony wynik i popraw go ręcznie.

Unikaj cienkich linii

Kreski cieńsze niż 2 piksele w rozmiarze 16x16 (około 12 procent szerokości ikony) mają tendencję do znikania lub migotania między rozmiarami. Pogrub kreski, usuń wewnętrzne szczegóły i zlej małe przerwy. Śmiały, nieco ciężki glif zwykle czyta się lepiej niż wierna miniatura szczegółowego logo.

Dopracuj ręcznie

Pliki ICO i PNG nie mają hintingu w stylu czcionek, więc jego odpowiednikiem jest ręczna edycja pikseli: poprawiasz pojedyncze piksele, aby krzywe, przekątne i przestrzenie wewnętrzne (otwory w literach takich jak "a" czy "e") pozostały wyraźne. Automatyczne zmniejszanie to dobry pierwszy szkic, ale kilka ręcznie ustawionych pikseli często decyduje o tym, czy wyjdzie bezkształtna plama, czy rozpoznawalna litera. Edytor pikseli MakeFav jest stworzony właśnie do tego: otwórz płótno 16x16, popraw problematyczne piksele i wyeksportuj plik.

2. Kontrast na jasnych i ciemnych kartach

Przeglądarki coraz częściej działają w trybie ciemnym, a wielu użytkowników ma paski kart, które różnią się od motywu strony. Ciemnogranatowa ikona z przezroczystym tłem może być idealna na białej karcie i prawie niewidoczna na ciemnoszarej. Zawsze testuj oba warianty.

Praktyczne rozwiązania

• Dodaj kształt tła. Pełny zaokrąglony kwadrat lub koło w kolorze marki gwarantuje, że znak ma własny kontrast, niezależnie od karty.
• Użyj cienkiego konturu lub poświaty. Jaśniejsza krawędź o szerokości 1 px wokół ciemnego glifu (lub odwrotnie) utrzymuje widoczność sylwetki w obu motywach, ale w rozmiarze 16x16 musi pozostać wyraźna, więc ją przetestuj.
• Wybierz średnie tony kolorów marki. Kolory takie jak mocny niebieski, pomarańczowy, zielony czy magenta zwykle sprawdzają się zarówno na białym, jak i niemal czarnym tle. Ryzykowne są bardzo jasny żółty i bardzo ciemny granat.
• Użyj adaptacyjnego favicona SVG. SVG może zawierać zapytanie medialne prefers-color-scheme, dzięki czemu ikona zmienia się wraz z motywem systemu.

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

Pamiętaj, że zapytanie medialne odzwierciedla motyw systemu operacyjnego lub przeglądarki, za którym zwykle podąża pasek kart, ale nie zawsze. Obsługa faviconów SVG również bywa różna: Chrome i Firefox je obsługują, natomiast Safari historycznie pozostawało w tyle, dlatego zawsze zachowaj zapasowe pliki PNG lub ICO. Projekt z jednolitym tłem jest najbardziej niezawodną opcją, ponieważ w ogóle nie wymaga logiki motywów.

3. Rozpoznawalność i spójność marki

Używaj logomarku (symbolu lub monogramu), a nie pełnego logo z napisem. Tekst wewnątrz ikony 16x16 jest nieczytelny, a szerokie, poziome logo wciśnięte w kwadrat zostawia tylko maleńki pasek pośrodku.

• Jeśli Twoja marka ma symbol, uprość go na potrzeby małych rozmiarów, zamiast po prostu go zmniejszać. "Wersja favicon" z mniejszą liczbą szczegółów to standardowa praktyka.
• Jeśli Twoja marka to tylko napis, weź pierwszą literę albo charakterystyczną parę liter i ustaw ją w kroju pisma marki w grubej odmianie.
• Utrzymuj kolory spójne z logo, ikoną aplikacji i awatarami w mediach społecznościowych, aby użytkownik rozpoznawał tę samą markę wszędzie.

Wyrazistość liczy się tak samo jak wierność oryginałowi. Spójrz na rząd kart: jeśli trzy inne strony też używają niebieskiego koła, Twoja się nie wyróżni. Inny kształt lub kolor jest bardziej użyteczny niż doskonale wierne pomniejszenie.

4. Kolor: ograniczona, nasycona paleta

Przy tak małej liczbie pikseli każdy dodatkowy kolor zwiększa bałagan. Celuj w jeden lub dwa kolory plus co najwyżej biały lub czarny. Nasycone kolory są lepiej widoczne w małych rozmiarach niż pastele, które mają tendencję do zlewania się z tłem karty.

Warto skorzystać z myślenia o dostępności. WCAG wymaga co najmniej kontrastu 3:1 dla istotnych obiektów graficznych (kryterium sukcesu 1.4.11, Kontrast elementów nietekstowych). Favicon formalnie nie jest tym objęty, ponieważ jest elementem interfejsu przeglądarki, a nie treścią strony, ale kontrast 3:1 między glifem a jego tłem oraz między ikoną a kartą to rozsądny cel. Unikaj też przekazywania czegokolwiek wyłącznie za pomocą odcienia: czerwony i zielony wariant tej samej ikony są nie do odróżnienia dla wielu osób z zaburzeniami widzenia barw, więc zmieniaj kształt lub dodaj symbol.

5. Kształt, marginesy i strefy bezpieczne

Wypełnij kwadrat

Karty przeglądarki wyświetlają favicon w stałym, małym rozmiarze, więc dodatkowy margines tylko zmniejsza Twój znak. W standardowych ikonach kart wykorzystaj większość płótna, zostawiając zaledwie piksel lub dwa oddechu, aby znak był jak największy.

Zaokrąglony czy kwadratowy?

Przeglądarki zazwyczaj nie przycinają faviconów kart, więc kształt, który narysujesz, jest kształtem, który zobaczą użytkownicy. Kwadrat z lekko zaokrąglonymi rogami wygląda schludnie i zapewnia spójne tło; swobodny glif lub koło na przezroczystości może wyglądać lżej i bardziej wyraziście. Obie opcje są w porządku. Wybierz jedną i utrzymaj spójność całego zestawu ikon.

Ikony Apple touch

iOS dodaje własne zaokrąglone rogi do ikony apple-touch-icon (zwykle 180x180). Dostarcz kwadrat wypełniony do krawędzi, bez wstępnie zaokrąglonych rogów, w przeciwnym razie w rogach mogą pojawić się widoczne ciemne lub białe paski.

Ikony maskowalne dla Androida i PWA

Ikony maskowalne są przycinane przez system operacyjny do kół, squircli lub innych kształtów. Całą ważną zawartość trzymaj wewnątrz strefy bezpiecznej: koła wyśrodkowanego w ikonie o promieniu równym 40 procentom szerokości ikony. Rozciągnij kolor tła aż do krawędzi, aby każda maska wyglądała dobrze. Nie używaj ponownie ciasnego, sięgającego krawędzi favicona karty jako ikony maskowalnej, ponieważ maska go przytnie.

6. Przezroczystość

Przezroczystość jest w porządku w faviconach kart i właśnie dzięki niej ikona złożona wyłącznie z glifu dobrze leży na karcie w dowolnym kolorze. Stanowi natomiast problem w przypadku ikon Apple touch: iOS wypełnia przezroczyste obszary jednolitym kolorem (zazwyczaj czarnym), co może zniszczyć projekt. Zawsze nadawaj ikonie apple-touch-icon nieprzezroczyste tło w kolorze marki. To samo dotyczy ikon maskowalnych i większości zastosowań na ekranie głównym Androida, gdzie nieprzezroczyste tło daje przewidywalne rezultaty.

7. Stabilność: nie zmieniaj go zbyt często

Favicon buduje rozpoznawalność poprzez powtarzanie. Częste zmiany zmuszają użytkowników do ponownego uczenia się, która karta jest Twoja, a do tego powodują techniczne kłopoty. Przeglądarki intensywnie buforują favicony, a Google pobiera je i przechowuje oddzielnie od Twoich stron, więc nowa ikona może pojawić się w wynikach wyszukiwania dopiero po kilku dniach lub tygodniach. Google wymaga też stabilnego adresu URL favicona, ikony o rozmiarze będącym wielokrotnością 48 pikseli (48x48, 96x96 itd.) oraz pliku, który może przeskanować (niezablokowanego w pliku robots.txt). Traktuj zmianę favicona jak decyzję na poziomie rebrandingu, a nie sezonową dekorację.

8. Stany powiadomień i dynamiczne favicony

Niektóre aplikacje internetowe zmieniają favicon, aby zasygnalizować nieprzeczytane wiadomości, status nagrywania lub błąd. Dobrze zrobione, jest to pomocne; przesadzone, irytuje.

• Użyj małej plakietki (kropki lub krótkiej liczby) w rogu, a nie całkowitej zmiany projektu. Podstawowa ikona powinna pozostać rozpoznawalna.
• Stosuj oszczędnie. Plakietki zarezerwuj dla zdarzeń wymagających działania użytkownika. Nie animuj ikony w sposób ciągły.
• Ogranicz liczby. W rozmiarze 16x16 czytelne są tylko jedna lub dwie cyfry; pokaż "9+" albo zwykłą kropkę zamiast "137".
• Szybko resetuj, gdy użytkownik zajmie się daną sprawą, i przywróć domyślną ikonę.
• Nie polegaj wyłącznie na kolorze. Czerwona kropka powinna być dodatkowo poparta tytułem strony, na przykład "(3) Skrzynka odbiorcza", aby informacja była dostępna dla wszystkich.

Dynamiczne favicony zwykle rysuje się na elemencie canvas i podmienia, aktualizując atrybut href elementu link z ikoną. Ogranicz częstotliwość aktualizacji, ponieważ ciągłe zmienianie favicona może obciążać procesor i rozpraszać użytkowników.

9. Wydajność

Favicony są małe, ale to nadal żądania, które można obsłużyć źle.

• Utrzymuj małe pliki. Favicon PNG ma zwykle od kilkuset bajtów do kilku kilobajtów. Prosty SVG może mieć poniżej 1 KB.
• Unikaj rozdętych plików ICO. Wystarczy wielorozmiarowy ICO z obrazami 16, 32 i 48 pikseli. Osadzenie obrazu 256x256 wielokrotnie zwiększa rozmiar pliku bez widocznej korzyści na kartach przeglądarki.
• Ustaw nagłówki buforowania. Serwuj ikony z długim czasem Cache-Control, na przykład public, max-age=31536000, immutable, a przy ich zmianie używaj nazwy pliku z wersją lub hashem.
• Deklaruj ikony jawnie. Przeglądarki domyślnie żądają /favicon.ico, więc udostępnij ten plik, nawet jeśli deklarujesz inne ikony, aby uniknąć szumu błędów 404 w logach.
• Kompresuj. Przepuść pliki PNG przez bezstratny optymalizator, a pliki SVG zminifikuj.

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

Jeśli chcesz wygenerować wszystkie te pliki z jednego obrazu źródłowego, generator faviconów MakeFav tworzy standardowy zestaw, a strona dla deweloperów opisuje opcje integracji.

10. Dostępność

Favicon nie ma tekstu alternatywnego, a czytniki ekranu go nie odczytują, więc tradycyjne narzędzia dostępności, takie jak atrybuty alt, nie mają zastosowania. Liczy się natomiast:

• Tytuł strony niesie znaczenie. Pisz unikalne, opisowe elementy <title>. Nigdy nie polegaj na ikonie w przekazywaniu stanu; odzwierciedlaj każdą plakietkę w tytule.
• Widoczność dla osób słabowidzących. Wysoki kontrast, wyrazisty kształt i duży znak pomagają użytkownikom, którzy wzrokowo przeglądają karty.
• Niezależność od koloru. Upewnij się, że stany rozróżniają kształty lub litery, a nie tylko odcień.
• Mniej rozpraszania. Unikaj migających lub animowanych faviconów, które mogą być problemem dla osób wrażliwych na ruch.

Lista kontrolna UX favicona

Lista kontrolna testów

Nie ufaj dużemu podglądowi w narzędziu do projektowania. Przetestuj prawdziwą ikonę w prawdziwych warunkach:

1. Różne przeglądarki. Sprawdź Chrome, Firefox, Safari i Edge, ponieważ każda z nich nieco inaczej wybiera ikony i rozmiary.
2. Tryb jasny i ciemny. Przełącz motyw systemu i przeglądarki i za każdym razem spójrz na pasek kart.
3. Ekrany retina i standardowe. Sprawdź na monitorze 1x oraz ekranie 2x lub 3x i powiększ widok w przeglądarce.
4. Pasek zakładek. Dodaj stronę do zakładek i sprawdź, czy ikona nadal jest czytelna obok innych stron.
5. Wiele kart. Otwórz 20 kart i zobacz, czy znajdziesz swoją na pierwszy rzut oka.
6. Podgląd w wynikach Google. Sprawdź wynik wyszukiwania na urządzeniu mobilnym po ponownym przeskanowaniu ikony. Pamiętaj, że aktualizacja może potrwać.
7. Ekran główny. Dodaj stronę do ekranów głównych iOS i Androida i upewnij się, że ikona nie jest przycięta, nie ma czarnych rogów i nie jest zbyt mała w obrębie maski.
8. Kontrola techniczna. Sprawdź swoją domenę w weryfikatorze faviconów MakeFav, aby potwierdzić, że pliki istnieją, zwracają status 200, mają właściwe rozmiary i są poprawnie zadeklarowane w kodzie HTML.

Praktyczny przepływ pracy

1. Zacznij od logomarku i uprość go do jednego kształtu lub litery.
2. Utwórz kwadratowe płótno z jednolitym lub ukształtowanym tłem, które działa w obu motywach.
3. Wyeksportuj rozmiary 32x32 i 16x16 i dopracuj ręcznie małą wersję w edytorze pikseli.
4. Wygeneruj pełny zestaw (ICO, PNG, apple-touch-icon, ikony manifestu) za pomocą generatora.
5. Dodaj znaczniki link, ustaw nagłówki buforowania, wdróż zmiany i zweryfikuj je w weryfikatorze.

Favicon to jeden z najmniejszych zasobów na Twojej stronie i jeden z najczęściej oglądanych. Kilka starannych decyzji dotyczących kontrastu, prostoty i spójności sprawi, że będzie działać na każdej karcie, w każdym motywie i na każdym urządzeniu.

Najczęściej zadawane pytania

Jaki rozmiar powinien mieć favicon?

Projektuj w rozmiarach 16x16 i 32x32 dla kart przeglądarki (na ekranach o wysokiej gęstości przeglądarka używa 32x32), przygotuj apple-touch-icon 180x180 dla iOS oraz pliki PNG 192x192 i 512x512 dla Androida i PWA. W wynikach wyszukiwania Google użyj kwadratowej ikony o rozmiarze będącym wielokrotnością 48 pikseli, takiej jak 48x48 lub 96x96. Źródło w formacie SVG skaluje się do wszystkich tych rozmiarów.

Czy powinienem użyć pełnego logo jako favicona?

Zazwyczaj nie. Pełne logo z napisem jest zbyt szczegółowe i zbyt szerokie dla kwadratowej ikony 16x16. Użyj logomarku lub monogramu z jednej lub dwóch liter i uprość go tak, aby pozostał rozpoznawalny, gdy jest malutki.

Jak sprawić, by favicon działał w trybie ciemnym?

Najbezpieczniejszym rozwiązaniem jest nadanie ikonie własnego, jednolitego kształtu tła lub kontrastowego konturu, tak aby nie zależała od koloru karty. Można też użyć favicona SVG z zapytaniem medialnym prefers-color-scheme, które zamienia kolory, i zachować zapasowe pliki PNG lub ICO dla przeglądarek, które nie obsługują ikon SVG. Zawsze testuj w jasnym i ciemnym motywie.

Dlaczego mój nowy favicon się nie wyświetla?

Przeglądarki buforują favicony przez długi czas, a Google przechowuje własną kopię, którą odświeża według własnego harmonogramu, co często trwa kilka dni lub tygodni. Odśwież stronę z pominięciem pamięci podręcznej, wyczyść pamięć podręczną przeglądarki, użyj nowej nazwy pliku z wersją i upewnij się, że znaczniki link oraz główny plik /favicon.ico wskazują właściwy plik. Konfigurację możesz zweryfikować w weryfikatorze MakeFav.

Czy warto pokazywać plakietki powiadomień na faviconie?

Tak, jeśli robi się to oszczędnie. Mała kropka lub jedno- albo dwucyfrowa liczba pomaga użytkownikom zauważyć coś, co wymaga działania, ale ciągła animacja lub duże liczby pogarszają czytelność i skupienie uwagi. Zawsze odzwierciedlaj stan w tytule strony, przywracaj domyślną ikonę po załatwieniu sprawy i nie polegaj wyłącznie na kolorze.