Wyjaśnienie rozmiarów Favicon

Favikona o wymiarach 16×16 pikseli to oryginalny standard sieciowy. Jest używany w kartach przeglądarki na standardowych wyświetlaczach (96 dpi), na pasku narzędzi zakładek we wszystkich przeglądarkach komputerowych oraz na niektórych listach historii przeglądania. Ponieważ rozmiar 16 × 16 to wyjątkowo wąskie płótno, projekt Twojej ulubionej ikony należy rozebrać do najprostszej formy: pojedynczego kształtu, litery lub abstrakcyjnego znaku. Wszystko, co jest bardziej złożone, będzie nieczytelne.

Rozmiar pikseli 32 × 32 podwaja rozmiar 16 × 16 i obsługuje karty przeglądarki Retina/HiDPI z 2-krotną gęstością, ikony zakładek o wysokiej rozdzielczości DPI oraz ikony sugestii paska adresu w formacie Chrome. Nowoczesne przeglądarki żądają rozdzielczości 32 × 32 znacznie częściej niż 16 × 16, ponieważ wyświetlacze o dużej gęstości stały się większością urządzeń. Gdybyś mógł wysłać tylko jeden rozmiar, najbardziej efektownym wyborem byłby rozmiar 32 × 32.

Rozmiar 48 × 48 pikseli to rozmiar widoku „średnich ikon” Eksploratora Windows i stanowi minimum wymagane przez wyszukiwarkę Google, aby móc mieć favikonę we fragmentach wyników wyszukiwania. Witryny, których favikona nie spełnia minimalnych rozmiarów 48 × 48, są wyświetlane w wynikach Google obok adresu URL zamiast znaku marki z ogólną ikoną globusa. Zawsze dołączaj rozmiar 48×48 do swojego pakietu .ico.

Rozmiar pikseli 64×64 jest używany w widoku dużych ikon Windows Eksploratora oraz w niektórych środowiskach graficznych systemu Linux. Dołączenie go do wielowymiarowego pliku .ico powoduje znikomy narzut, ale zapewnia czyste renderowanie w menedżerach plików i środowiskach powłoki. Wiele narzędzi do generowania faviconów zawiera domyślnie 64 jako część standardowego pakietu .ico.

Rozmiar 128 × 128 pikseli obsługuje kafelki aplikacji Windows Store i miniatury na pasku zadań o dużej gęstości. Jest rzadziej potrzebny w przypadku ikon ulubionych stron internetowych, ale jest ważny, jeśli Twoja witryna jest spakowana jako PWA lub jeśli użytkownicy przypinają ją jako aplikację Windows. Dzięki umieszczeniu go w pliku .ico z kompresją PNG rozmiar pliku jest rozsądny.

Rozmiar 256×256 pikseli to największa standardowa ramka .ico. Służy do skrótów na pulpicie Windows, wyników wyszukiwania w menu Start Windows i niektórych kontekstów zainstalowanych aplikacji. Przy tej rozdzielczości należy użyć kompresji PNG w kontenerze .ico zamiast BMP — nieskompresowany obraz BMP 256×256 niepotrzebnie dodaje 256 KB do pliku .ico.

Rozmiar 180×180 pikseli jest przeznaczony wyłącznie dla iOS apple-touch-icon. Gdy użytkownik iPhone'a lub iPada dotknie opcji „Dodaj do ekranu głównego”, Safari pobierze obraz zadeklarowany w `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`. Ten rozmiar obejmuje wszystkie aktualne modele iPhone'a (iPhone 6 Plus i nowsze używają rozdzielczości 180 × 180 przy gęstości 3x; starsze modele używają rozdzielczości 120 × 120 i 152 × 152 — pojedynczy plik 180 z wdziękiem obejmuje je wszystkie).

Rozmiar 192 × 192 pikseli to minimalna wymagana ikona w manifeście aplikacji internetowej (site.webmanifest) dla monitu o instalację Android Chrome PWA. Gdy użytkownicy dodadzą PWA do swojego ekranu głównego Android, Chrome renderuje ikonę 192 × 192 w programie uruchamiającym i ikonę aplikacji w przełączniku ostatnich aplikacji. Bez tego rozmiaru w manifeście monit instalacyjny PWA albo wyświetla ogólną ikonę, albo w ogóle się nie uruchamia.

Druga wymagana ikona manifestu to rozmiar 512 × 512 pikseli. Chrome używa go do ekranu powitalnego PWA, który wyświetla się podczas ładowania aplikacji po uruchomieniu na ekranie głównym, oraz do podglądu okna dialogowego instalacji w systemie operacyjnym Chrome na komputerze. Jest to również idealny rozmiar źródła do generowania wszystkich mniejszych wariantów — począwszy od 512 × 512 zapewnia, że ​​każdy zmniejszony sygnał wyjściowy zachowuje ostre krawędzie i dokładne kolory.

Rozmiary od 512 × 512 do bardzo dużych 1024 × 1024 są używane głównie w przypadku ikon aplikacji natywnych w systemie macOS i iOS App Store, a nie w przypadku ulubionych ikon internetowych. Jeśli jednak planujesz przekonwertować swoją obecność w sieci na aplikację natywną za pomocą opakowania (Electron, Capacitor, Tauri), będziesz potrzebować rozdzielczości 1024 × 1024 do procesu recenzji w App Store. Zapisz ten plik główny razem z pakietem favicon.

Favicony SVG są niezależne od rozdzielczości i obejmują każdą gęstość w jednym pliku. Przeglądarka obsługująca favicony SVG (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) będzie preferować SVG w stosunku do dowolnego rozmiaru rastra, ponieważ doskonale renderuje się przy 1x, 2x, 3x lub dowolnym niestandardowym DPI. Kompromis polega na tym, że nie wszystkie konteksty obsługują skróty SVG — Windows, czytniki RSS i starsze narzędzia nadal wymagają rezerwy .ico.

Ważne jest, aby zrozumieć związek między rozmiarami a kontenerem .ico. Plik .ico nie jest pojedynczym obrazem — jest to archiwum składające się z wielu obrazów. Każda ramka w nim zawarta jest oddzielnym obrazem rastrowym o innym rozmiarze. Przeglądarka odczytuje katalog ICO, identyfikuje ramkę najlepiej odpowiadającą wymaganemu rozmiarowi i dekoduje tylko tę ramkę. Dlatego jeden plik .ico może równie dobrze obsługiwać karty o rozdzielczości 16, 32, 48 i 64 pikseli.

Zalecany minimalny zestaw dla witryny produkcyjnej w 2026 r. to: favicon.ico pakiet klatek 16, 32, 48 i 64 px; apple-touch-icon.png w rozdzielczości 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg dla nowoczesnych przeglądarek; oraz site.webmanifest odnoszący się do 192 i 512 PNG. favicon generator tworzy ten kompletny zestaw z jednego źródła za pomocą jednego kliknięcia.

Sprawdzenie, czy wszystkie rozmiary favikon są prawidłowo wyświetlane, jest proste dzięki favicon tester. Wpisz adres URL swojej witryny, a tester spróbuje pobrać rozmiar favicon.ico, sprawdzi, czy w nagłówku HTML znajdują się znaczniki linków i wyświetli podgląd każdego rozmiaru. Brakujące rozmiary są oznaczone rekomendacjami, które można zastosować.