Artykuł

Tworzenie favicon z PNG

Favicon to mała grafika wyświetlana przez przeglądarki w zakładkach, zakładkach i listach historii. Prawidłowe wykonanie wymaga więcej niż zwykłego zmniejszenia logo: format .ico pakuje wiele rozdzielczości w jednym pliku, nowoczesne przeglądarki preferują PNG, urządzenia mobilne mają własny apple-touch-icon, a manifesty aplikacji internetowych potrzebują własnego zestawu ikon. Ten artykuł omawia każdy element i wyjaśnia, jak wygenerować cały zestaw z jednego źródłowego PNG.

Napisał Bastien Sulyan · Opublikowano 29 czerwca 2026

Czym jest favicon i gdzie przeglądarki go używają

Słowo favicon to skrót od "favorite icon" (ulubiona ikona). Przeglądarki zaczęły wyświetlać go na pasku adresu w Internet Explorerze 5 (1999), a następnie przyjęły go dla zakładek. Dziś pojawia się w zakładkach przeglądarki, pasku zakładek, historii przeglądania, stronie nowej karty w niektórych przeglądarkach i paskach zadań systemu operacyjnego, gdy strona jest przypięta. Na urządzeniach mobilnych, jeśli użytkownik doda stronę do ekranu głównego, urządzenie używa powiązanego, ale oddzielnego obrazu zwanego apple-touch-icon zamiast standardowego favicon. Wyszukiwarki czasami pokazują favicony obok wyników w swoim interfejsie. Grafika jest z założenia mała, co czyni ją skuteczną do szybkiej identyfikacji wizualnej, ale jednocześnie wymaga starannego wykonania: przy 16x16 pikseli szczegółowe logo staje się nieczytelną plamą. Sam plik favicon przechodził przez kilka formatów przez dziesięciolecia, przy czym .ico pozostaje najbardziej kompatybilnym, a PNG jest teraz nowoczesnym domyślnym wyborem dla większości przeglądarek.

Kontener .ico: wiele rozdzielczości w jednym pliku

Format .ico jest kontenerem, a nie pojedynczym obrazem. Jeden plik .ico może przechowywać wiele obrazów bitmapowych w różnych rozdzielczościach, każdy przechowywany jako oddzielny wpis w indeksie na początku pliku. Trzy najczęstsze rozmiary to 16x16, 32x32 i 48x48 pikseli. Gdy Windows wyświetla favicon w Eksploratorze lub na pasku zadań, wybiera wpis, który najlepiej pasuje do kontekstu wyświetlania. Starsze wersje Windows potrzebowały wpisu 48x48 dla slotów paska zadań o wysokiej gęstości. Przeglądarki żądają favicon w rozmiarze 16x16 dla zakładek, ale mogą używać większego wpisu, jeśli wykryty zostanie wyświetlacz o wyższej gęstości. Spakowanie wszystkich trzech rozmiarów w jednym pliku .ico oznacza, że jedno żądanie HTTP obejmuje każdy przypadek użycia. Dystrybucja jako oddzielne pliki PNG jest również prawidłowa, ale wymaga dodatkowych tagów link i dodaje żądania HTTP. Wewnętrzne obrazy w pliku .ico to standardowe dane BMP lub PNG, więc kontener dodaje jedynie niewielki narzut nagłówka na wpis.

Projektowanie dla małych rozmiarów: upraszczanie znaku

Przy 16x16 pikseli masz łącznie 256 pikseli. Typowy logotyp ze słownym znakiem lub drobnymi szczegółami staje się nieczytelny w tym rozmiarze. Standardowym podejściem jest stworzenie uproszczonego znaku: pojedynczej litery, abstrakcyjnego kształtu lub ikony, która reprezentuje markę bez polegania na szczegółach. Kilka konkretnych problemów do przewidzenia: cienkie kreski zupełnie znikają w małych rozmiarach, szczególnie na ekranach non-retina. Pary liter i szczegóły negatywnej przestrzeni zlewają się w szary szum. Gradienty stają się ledwo widoczne. Wysoki kontrast między znakiem a jego tłem jest zdecydowanie najważniejszym czynnikiem w czytelności. Solidny kształt na zwykłym tle prawie zawsze czyta się lepiej niż szczegółowa ilustracja przy 16x16. Rozmiary 32x32 i 48x48 są bardziej wyrozumiałe i mogą obsługiwać nieco więcej szczegółów, ale wersję 16x16 należy traktować jako wiążące ograniczenie. Jeśli znak nadal nie czyta się przy 16x16, projekt wymaga dalszego uproszczenia.

Nowoczesny zestaw: .ico, ikony PNG, apple-touch-icon, manifest i tagi HTML link

Kompletna konfiguracja favicon dla publicznej witryny wymaga obecnie pięciu elementów. Po pierwsze, favicon.ico w katalogu głównym witryny (przeglądarki żądają /favicon.ico bezpośrednio bez tagu link jako alternatywy). Po drugie, PNG 32x32 dla nowoczesnych przeglądarek desktopowych, zadeklarowany tagiem link: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Po trzecie, PNG 16x16 dla rozmiaru zakładki: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Po czwarte, apple-touch-icon o rozmiarze 180x180 pikseli dla zakładek na ekranie głównym iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Po piąte, manifest aplikacji internetowej (site.webmanifest) z PNG 192x192 i 512x512 dla Androida i progresywnych aplikacji internetowych. Przezroczystość jest obsługiwana w PNG i w wpisach zakodowanych jako PNG wewnątrz .ico, choć apple-touch-icon powinien mieć nieprzezroczyste tło, ponieważ iOS ignoruje kanał alfa i wypełnia przezroczyste obszary czernią.

Lokalnie: favicon-generator trzyma Twój obraz na urządzeniu

Generator favicon na tej stronie pobiera PNG i tworzy kompletny zestaw: wielorozdzielczościowy favicon.ico spakowany z wpisami 16x16, 32x32 i 48x48, indywidualne rozmiary PNG do bezpośredniego użycia z tagiem link i apple-touch-icon 180x180. Wszystko to dzieje się w przeglądarce przy użyciu Canvas API i kodera .ico w JavaScript. Obraz źródłowy nigdy nie jest nigdzie przesyłany; pozostaje na Twoim urządzeniu. Ma to znaczenie, gdy plik źródłowy jest logo firmy lub dowolnym zasobem, który nie powinien opuścić Twojego komputera przed ustaleniem, gdzie trafi. Każdy wygenerowany plik jest oferowany jako osobne pobranie, z konwencjonalnymi nazwami. Kopiujesz je do katalogu głównego witryny i dodajesz odpowiednie tagi link do sekcji head HTML. Jeśli logo źródłowe zawiera drobne szczegóły, które nie przeżywają renderowania 16x16, możesz je przyciąć lub uprościć przed upuszczeniem do generatora, lub dostarczyć inny obraz źródłowy specjalnie przygotowany dla favicon.

Narzędzia w tym artykule

Najczęściej zadawane pytania

Czy nadal potrzebuję favicon.ico, jeśli deklaruję tagi link PNG?

Tak, z dwóch powodów. Po pierwsze, przeglądarki, które nie czytają Twojego HTML (crawlery internetowe, czytniki RSS, niektóre stare przeglądarki mobilne), szukają /favicon.ico bezpośrednio w katalogu głównym domeny. Jeśli plik jest nieobecny, generują żądanie 404 przy każdym ładowaniu strony, co dodaje szum do dzienników serwera i małą niepotrzebną komunikację sieciową. Po drugie, starsze wersje Internet Explorera rozpoznają tylko format .ico i ignorują tagi link PNG. Dostarczenie obu obejmuje wszystkie przypadki.

Czy mogę użyć SVG jako favicon?

Chrome i Firefox obsługują favicony SVG przez `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari nie obsługuje faviconów SVG. Ponieważ favicony SVG są niezależne od rozdzielczości, wyglądają ostro na każdej gęstości wyświetlacza, w tym ekranach retina, bez potrzeby wielu wariantów rozmiarów. Praktycznym zaleceniem jest deklarowanie tagu link SVG dla przeglądarek, które go obsługują, i nadal dołączanie alternatywy .ico dla pełnego pokrycia. Favicony SVG mogą również zawierać zapytanie mediów `prefers-color-scheme`, aby automatycznie przełączać się między jasną a ciemną wersją.

Od jakiego obrazu powinienem zacząć, aby uzyskać najlepszy wynik?

Kwadratowy PNG o rozmiarze 512x512 lub większy z przezroczystym tłem daje największą elastyczność. Zaczynanie od dużego i zmniejszanie zachowuje więcej szczegółów niż zaczynanie od małego obrazu. Jeśli Twoje główne logo zawiera część słowną, rozważ przygotowanie osobnej uproszczonej wersji pokazującej tylko ikonę lub znak, ponieważ tekst nie będzie czytelny przy 16x16 niezależnie od rozdzielczości źródłowej. Wysoki kontrast między znakiem a jego tłem jest najbardziej niezawodnym wyznacznikiem tego, czy małe rozmiary będą wyraźnie widoczne.