Favicon (.ico) vs PNG

Format .ico został stworzony specjalnie do przechowywania wielu rozmiarów ikon w jednym kontenerze binarnym. Dobrze zbudowany favicon.ico zawiera klatki o wymiarach 16×16, 32×32, 48×48 i 64×64 pikseli. Gdy przeglądarka potrzebuje favikony dla karty, otwiera plik .ico, czyta katalog ICO i wybiera ramkę, która najbardziej odpowiada wymaganemu rozmiarowi wyświetlacza. Ta możliwość obsługi wielu rozmiarów jest zdecydowaną przewagą .ico nad PNG.

PNG to format pojedynczego obrazu. Plik PNG zawiera dokładnie jeden obraz w dokładnie jednej rozdzielczości. Aby objąć wiele rozmiarów samym PNG, potrzebujesz wielu plików i wielu tagów `<link>` z wyraźnymi atrybutami `sizes=`. Jest to bardziej szczegółowe, ale umożliwia precyzyjną kontrolę nad tym, który obraz jest wyświetlany w każdej rozdzielczości. PNG obsługuje także lepszą kompresję bezstratną niż ramki ICO zakodowane w formacie BMP w dowolnej rozdzielczości.

Kompatybilność przeglądarek to miejsce, w którym .ico zdecydowanie wygrywa. Każda przeglądarka — w tym starszy IE, stare Edge, starożytne wersje Safari i mało znane przeglądarki niszowe — pobiera /favicon.ico z katalogu głównego domeny bez konieczności stosowania tagu `<link>`. Nawet jeśli całkowicie pominiesz znacznik linku, przeglądarki będą próbowały zastosować konwencję GET /favicon.ico. PNG wymaga jawnych tagów `<link rel='icon' type='image/png'>` z poprawnymi typami MIME, w przeciwnym razie jest ignorowany.

Obsługa przezroczystości jest równa między .ico a PNG. Obydwa formaty obsługują 8-bitowy kanał alfa (pełna przezroczystość na piksel). Jednak .ico zachowuje przezroczystość tylko wtedy, gdy jego wewnętrzne ramki korzystają z kompresji PNG, a nie BMP. Stare kodery ICO czasami domyślnie korzystają z BMP, który ma ograniczoną (1-bitową) przezroczystość. Zawsze korzystaj z nowoczesnego generatora, który generuje ramki .ico skompresowane w formacie PNG.

Porównanie rozmiaru pliku zależy od kontekstu. Pojedynczy plik PNG o wymiarach 32 × 32 jest mniejszy niż wielowymiarowy plik .ico zawierający klatki o rozmiarach 16, 32, 48 i 64 pikseli. Jednak plik .ico zastępuje cztery oddzielne pliki PNG plus cztery znaczniki łączy. W przypadku całkowitego ładunku dobrze skompresowany plik .ico o wielu rozmiarach jest prawie zawsze mniejszy niż równoważny zestaw pojedynczych plików PNG razem wziętych.

PNG wygrywa pod względem wydajności kompresji w każdym indywidualnym rozmiarze. Algorytm kompresji PNG (DEFLATE/zlib) jest szczególnie skuteczny w przypadku logo o jednolitych kolorach i grafik w stylu ikon z ostrymi krawędziami i ograniczonymi paletami kolorów. Logo 32×32 PNG przy optymalnej kompresji może mieć mniej niż 200 bajtów. Odpowiednik ramki BMP w pliku .ico ma zawsze rozmiar 4 KB, niezależnie od zawartości obrazu.

W przypadku favikon wyszukiwania Google obsługiwane są zarówno .ico, jak i PNG. Robot Google najpierw pobiera favikonę połączoną z Twoim HTML lub wraca do /favicon.ico. Minimalne wymagania to 48×48 pikseli i publicznie dostępny adres URL. Odpowiedni rozmiar PNG połączony z `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` spełnia to zadanie równie dobrze, jak plik .ico o tym samym rozmiarze.

Zachowanie trybu ciemnego różni się w zależności od formatu. Pliki PNG nie mogą dostosować się do schematu kolorów użytkownika — do dynamicznej zamiany tagu łącza href, który jest delikatny, potrzebny byłby plik JavaScript. Format .ico w ogóle nie obsługuje trybu ciemnego. W przypadku adaptacji favikon w trybie ciemnym tylko SVG obsługuje ją natywnie poprzez osadzony blok stylu `@media (prefers-color-scheme: dark)`. PNG i .ico należy sparować z nakładką SVG.

Optymalna nowoczesna konfiguracja łączy oba formaty. Użyj `<link rel='icon' href='/favicon.ico'>` jako uniwersalnego rozwiązania zastępczego, `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` dla przejrzystości siatkówki i `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` dla skalowalnej obsługi trybu ciemnego. Przeglądarki obsługujące ikony ulubionych SVG wybierają SVG; inne przechodzą do PNG; starożytne przeglądarki otrzymują rozszerzenie .ico.

Integracja z systemem operacyjnym Windows jest domeną tylko .ico. Skróty na pulpicie, ikony Eksploratora plików i pinezki Windows na pasku zadań odczytują format .ico. Jeśli którykolwiek z Twoich użytkowników przypnie Twoją witrynę do paska zadań Windows lub utworzy na pulpicie skrót do Twojego adresu URL, jako ikona skrótu używana będzie tylko /favicon.ico. Pliki PNG są w tym kontekście całkowicie ignorowane.

W przypadku formatu 180×180 apple-touch-icon, PNG jest jedynym prawidłowym formatem. iOS nie czyta .ico dla ikon na ekranie głównym — w szczególności wymaga PNG połączonego poprzez `<link rel='apple-touch-icon'>`. Jest to jeden przypadek, w którym PNG jest nie tylko preferowany, ale i wymagany.

Nie należy pomijać konfiguracji serwera. Wiele serwerów internetowych udostępnia plik .ico z nieprawidłowym typem zawartości (`text/plain` zamiast `image/x-icon`), jeśli nie został on wyraźnie skonfigurowany. Pliki PNG mają szerszą obsługę typów MIME na platformach hostingowych. Jeśli widzisz, że favicon.ico się nie ładuje, sprawdź, czy serwer zwraca `Content-Type: image/x-icon` lub `image/vnd.microsoft.icon` dla żądań ICO.

favicon generator wyprowadza oba formaty jednocześnie. Nie musisz wybierać — pakiet do pobrania zawiera favicon.ico, samodzielne pliki PNG w rozdzielczości 32×32 i 180×180 oraz SVG dla pełnego, nowoczesnego stosu. Korzystanie z tego pakietu oznacza, że ​​odpowiedź na pytanie ICO vs PNG zostanie udzielona automatycznie: użyj obu, każdego w kontekście, w którym jest najlepszy.

Aby uzyskać pełne porównanie formatów, które obejmuje również SVG, zobacz best favicon format guide. Przewodnik ten wyjaśnia, któremu formatowi nadać priorytet w każdym przypadku użycia — standardowej witrynie internetowej, PWA, sklepie e-commerce i narzędziu programistycznym — oraz zapewnia matrycę decyzyjną umożliwiającą wybór stosu ulubionych ikon.