Dlaczego jedna ikona zamienia się w sześć plików
Favicon zaczął się w 1999 roku jako pojedynczy plik favicon.ico 16×16, którego Internet Explorer szukał w katalogu głównym witryny. Od tamtej pory każda platforma, która pokazuje ikonę strony, poprosiła o własny rozmiar, a zestaw się rozrósł:
- 16 px: karta przeglądarki i lista zakładek na standardowych ekranach.
- 32 px: karty na ekranach o wysokiej gęstości pikseli oraz pasek zadań Windows, gdy strona jest przypięta.
- 48 px: skróty na pulpicie Windows i niektóre listy witryn.
- 180 px: ikona Apple touch, używana, gdy ktoś doda stronę do ekranu początkowego na iPhonie lub iPadzie.
- 192 px i 512 px: ikony na ekranie głównym Androida i ekran powitalny zainstalowanej aplikacji webowej, zadeklarowane w manifeście.
ZIP zawiera favicon.ico z trzema małymi rozmiarami w środku, apple-touch-icon.png, icon-192.png, icon-512.png oraz site.webmanifest, który wskazuje na dwie ikony dla Androida. Archiwum jest nazwane od pliku źródłowego, więc logo.svg daje logo.favicon.zip.
Jak powstaje zestaw
Każdy rozmiar jest rysowany bezpośrednio z oryginalnego pliku na osobnym przezroczystym kwadracie. Jeśli obraz nie jest kwadratowy, jest skalowany tak, by się zmieścił, i wyśrodkowany, z przezroczystym miejscem po krótszych bokach. SVG jest rasteryzowany od nowa dla każdego rozmiaru, więc ikona 16 px dostaje tę samą wektorową precyzję co 512 px; obraz rastrowy jest pomniejszany z wygładzaniem przeglądarki.
Plik ICO przechowuje swoje trzy obrazy jako dane PNG wewnątrz kontenera ICO — wariant obsługiwany od Windows Vista i przez każdą współczesną przeglądarkę. Zachowuje pełną przezroczystość i zwykle jest znacznie mniejszy niż stary format ICO oparty na bitmapach.
Całe renderowanie odbywa się za pomocą Canvas API w przeglądarce. Akceptowane są pliki źródłowe do 20 MB w formacie PNG, JPG, WebP lub SVG.
Jak zaprojektować logo, które przetrwa 16 pikseli
Przy 16×16 jest łącznie tylko 256 pikseli. Szczegółowe logo staje się w tym rozmiarze rozmytą plamą, a to problem projektowy, którego nie naprawi żadne ustawienie eksportu. Co działa:
- Użyj znaku, a nie pełnego logo. Jedna litera, monogram albo symbol z logo bez części tekstowej.
- Grube kształty i niewiele kolorów. Linie cieńsze niż około 1/16 szerokości znikają w najmniejszym rozmiarze.
- Wypełnij kwadrat. Przed generowaniem obetnij puste marginesy w pliku źródłowym; logo unoszące się w dużej przezroczystej przestrzeni wychodzi na karcie maleńkie.
- Sprawdź oba motywy. Paski kart przeglądarki mogą być jasne lub ciemne. Czarna ikona na przezroczystym tle znika na ciemnym pasku kart; pomaga jasny kontur lub jednolity kolorowy kształt pod spodem.
Jeśli wersja 16 px nadal wygląda niewyraźnie, warto przygotować osobne uproszczone źródło, wygenerować z niego zestaw, a większe pliki PNG zachować z wersji szczegółowej.
Osobliwości platform, które warto znać
Przezroczyste ikony Apple touch
iOS nie pokazuje przezroczystości w ikonach na ekranie początkowym; przezroczyste obszary są wypełniane, zwykle czernią. Ponieważ generator zachowuje przezroczystość, logo na przezroczystym tle daje na iPhonie ciemny kwadrat wokół siebie. Dla czystego efektu użyj źródła z jednolitym kolorem tła albo wyeksportuj logo razem z tłem, zanim je przeciągniesz.
Uzupełnianie manifestu
Dołączony site.webmanifest wymienia tylko dwie ikony. Dla strony, która ma dać się zainstalować jako aplikacja, otwórz go w edytorze tekstu i dodaj co najmniej name, short_name, start_url, display (na przykład standalone) i theme_color. Bez nich przeglądarki sięgają po tytuł strony i nie zaproponują instalacji.
Uparte buforowanie
Przeglądarki agresywnie buforują favicony, czasem przez wiele dni i niezależnie od pamięci podręcznej strony. Jeśli po wgraniu nowych plików wciąż widać starą ikonę, otwórz bezpośrednio adres URL ikony i przeładuj go albo dodaj do linków ikon w HTML parametr wersji, na przykład ?v=2.
Wybór pliku źródłowego
Kwadratowy SVG to najwygodniejsze źródło, bo w 512 px jest rysowany ostro, niezależnie od tego, jak mała była oryginalna grafika. Jeśli masz logo wektorowe w innym formacie, wyeksportuj je jako SVG albo PNG o wymiarach co najmniej 512×512. Dla logo rastrowego, które istnieje tylko w małym rozmiarze, wcześniejsze powiększenie go narzędziem powiększ zdjęcie za pomocą AI daje ikonie 512 px czystsze krawędzie niż zwykłe rozciągnięcie. Logo z szeroką częścią tekstową najlepiej przed generowaniem przyciąć do samego symbolu narzędziem przytnij obraz, zamiast pozwolić mu skurczyć się do cienkiej kreski w środku kwadratu.