Favicon dla strony: jakie pliki i rozmiary są naprawdę potrzebne

Przeglądarka pokazuje favicon na karcie, w zakładkach i historii, a Google przy wynikach wyszukiwania. Do karty przeglądarki często wystarcza jeden plik, ale iPhone szuka osobnej ikony na ekran początkowy, a Chrome przy instalowaniu strony jako aplikacji wymaga ikon 192 i 512 px. Zestaw ze wszystkimi rozmiarami przygotujesz w generatorze favicon z jednego logo, w przeglądarce, bez wysyłania pliku na serwer.

Które pliki są potrzebne

Plik	Rozmiar	Do czego	Czy go potrzebujesz
favicon.ico	16, 32 i 48 px w jednym pliku	karta przeglądarki, zakładki, Google	tak, w głównym katalogu strony
favicon-32x32.png, favicon-16x16.png	32 i 16 px	karta przeglądarki	zwykle tak, to część kodu z generatora
apple-touch-icon.png	180 px	ikona strony na ekranie początkowym iPhone’a i iPada	tak, jeśli ktoś może dodać stronę do ekranu
android-chrome-192x192.png, android-chrome-512x512.png	192 i 512 px	ikony z manifestu, instalowanie strony jako aplikacji	tylko przy manifeście lub aplikacji PWA
site.webmanifest	plik tekstowy	nazwa i ikony aplikacji	tylko przy aplikacji PWA

Przeglądarki same pytają o /favicon.ico w głównym katalogu, nawet gdy w kodzie nie ma żadnego odnośnika, a Apple podobnie szuka /apple-touch-icon.png. Odnośniki w kodzie chronią przed zmianą tych zwyczajów (MDN, element link, sprawdzone w październiku 2026). Wymóg ikon 192 i 512 px dotyczy Chromium: według dokumentacji web.dev (ostatnia aktualizacja 18.09.2024, sprawdzona w październiku 2026) manifest musi mieć obie, a po wgraniu tylko tych dwóch Chrome sam dopasuje je do urządzenia.

Generator nie robi pliku SVG. Jeśli dodasz własny favicon.svg, zostaw też ICO i PNG, bo przeglądarka wybiera najlepiej pasujący odnośnik, a przy nieobsługiwanym formacie przechodzi do następnego (MDN, atrybut rel). Google SVG nie wymienia wśród obsługiwanych formatów favicon (szczegóły niżej).

Kod HTML do wklejenia

Generator tworzy ten sam kod w oknie na stronie i w pliku w ZIP-ie. Dla plików w głównym katalogu wygląda tak:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Wklej go do sekcji <head> strony głównej, a pliki z ZIP-a wgraj do głównego katalogu serwera. Jeśli leżą w podkatalogu, wpisz go w polu „Ścieżka do plików”, od ukośnika, np. /ikony. Bez ukośnika na początku (ikony) adresy w kodzie są względne i przeglądarka szuka ich obok bieżącej podstrony, więc na zagnieżdżonych stronach wyjdzie błąd 404.

Pole „Nazwa aplikacji (manifest)” zostaw wypełnione, jeśli używasz manifestu. Przy pustym polu manifest nie ma nazwy, a przeglądarka pokaże wtedy adres strony. Nazwa krótka pod ikoną ma najwyżej 12 znaków i jest ucinana na granicy słowa (np. „Kolibri Studio Online” daje „Kolibri”), więc popraw ją ręcznie, jeśli ma brzmieć inaczej. Manifest z generatora zawiera nazwę, start_url, ikony, kolory i display. To elementy, które MDN wymienia jako potrzebne do instalowania strony w Chromium (MDN, instalowalne PWA, zmiana z 6 października 2026).

Co wychodzi z ZIP-a

Wygenerowaliśmy zestaw z syntetycznego logo narysowanego w SVG: pomarańczowe koło z granatową strzałką na przezroczystym tle, 512×512 px. Narzędzie działało w Chromium z domyślnymi ustawieniami (całe logo, margines 0%, przezroczyste tło), a pliki z ZIP-a zmierzyliśmy w Node.

Plik	Wymiary	Waga
favicon-16x16.png	16×16 px	511 B
favicon-32x32.png	32×32 px	1006 B
favicon-48x48.png	48×48 px	1802 B
favicon.ico	16, 32 i 48 px (obrazy PNG w środku)	3373 B
apple-touch-icon.png	180×180 px	6759 B
android-chrome-192x192.png	192×192 px	7926 B
android-chrome-512x512.png	512×512 px	20 664 B
site.webmanifest		345 B
plik z kodem HTML		323 B

Cały ZIP waży 43 755 B, bo narzędzie nie kompresuje plików. Plik ICO to po prostu trzy PNG-i z nagłówkiem, więc jego waga jest sumą ich wag i 54 bajtów nagłówka. Plik z kodem HTML ma w polskim interfejsie nazwę kod-html-favicon.txt, w angielskim favicon-html.txt. Jego treść jest identyczna z oknem na stronie, a manifest wskazuje obie ikony Androida z /.

Przy tych ustawieniach apple-touch-icon.png ma w rogu piksel biały i nieprzezroczysty (255, 255, 255, 255), a w pozostałych PNG-ach róg jest w pełni przezroczysty. Narzędzie zawsze daje tej ikonie tło (białe albo wybrany kolor), bo według jego opisu iOS zamieniłby przezroczystość na czarne tło, i nie zaokrągla jej rogów. Zaokrąglenie z ustawień dotyczy pozostałych ikon.

Przygotowanie grafiki

Generator przyjmuje PNG, JPG, WebP i SVG, a do podpowiedzi zaleca kwadrat co najmniej 512×512 px. Mniejszy obraz zostanie powiększony i duże ikony wyjdą nieostre. Największa ikona (512 px) powstaje wprost ze źródła, a mniejsze są zmniejszane stopniowo.

Najwięcej zależy od tego, ile logo zostaje w 16 px. Sprawdziliśmy to na pięciu wersjach tego samego logo i zmierzyliśmy, jaki prostokąt zajmuje widoczna zawartość ikon (piksele o alfa powyżej 32):

Źródło i ustawienie	Zawartość w ikonie 16 px	w 32 px	w 48 px
sam symbol, margines 0%	16×16	30×30	46×46
sam symbol, margines 10%	12×12	24×24	36×36
symbol wycięty z poziomego logo (533×533 px)	12×12	23×22	35×34
poziome logo 1600×533 px, „Cały obraz”	13×4	25×8	37×12
poziome logo, „Przytnij do kwadratu”	16×8, ale widać tylko środek napisu	32×16	48×24

Poziome logo z nazwą w 16 px zajmuje pas 13×4 piksele i jest po prostu plamą. Przycięcie do kwadratu daje większe litery, ale odcina symbol i końce nazwy. Do favicona zostaw sam symbol albo jedną lub dwie litery.

Zasady, które wynikają z pomiarów i opisu narzędzia:

• Przyjmij kwadrat i uprość logo, bo w 16 px liczy się kształt i kontrast, a nie szczegóły.
• Margines (0-25% z każdej strony) odbiera piksele małym ikonom. Przy 10% logo ma w 16 px 12 pikseli zamiast 16, więc dodawaj go tylko wtedy, gdy logo dotyka krawędzi. Symbol, który już ma własny kształt (koło, kwadrat), często nie potrzebuje marginesu.
• Przezroczyste tło oszczędza kolor, ale ciemny symbol zniknie na ciemnym pasku kart. Jeśli logo ma tylko ciemne kolory, włącz kolorowe tło w ustawieniach.
• Do apple-touch-icon nie musisz robić osobnego pliku z tłem. Generator zrobi to sam.

Gdy logo nie jest kwadratem albo SVG

Do przygotowania kwadratu przydają się trzy narzędzia:

• Przytnij zdjęcie wytnie symbol z większego PNG. Dla poziomego logo 1600×533 px ustawiliśmy proporcje 1:1 oraz X=0, Y=0, szerokość 533 i dostaliśmy PNG 533×533 px (19 020 B) z zachowaną przezroczystością. Opcja „Przytnij do kwadratu” w samym generatorze wycina zawsze środek obrazu, więc nie pomoże, gdy symbol jest z boku.
• SVG na PNG robi plik PNG, gdy formularz lub system zarządzania treścią nie przyjmuje SVG. Dla SVG bez atrybutów width i height (tylko viewBox) ustawiliśmy szerokość 512 px i dostaliśmy PNG 512×512 px o wadze 20 664 B. W Chromium plik jest identyczny bajt w bajt z android-chrome-512x512.png z generatora. Sam generator czyta SVG bez tego kroku, a przy SVG tylko z viewBox wyszedł ten sam zestaw plików.
• Zmiana rozmiaru zdjęcia przyda się dla rozmiaru, którego generator nie robi. Z kwadratowego PNG 533×533 px zrobiliśmy tak wersję 96×96 px (3134 B), podając szerokość 96 px z zachowanymi proporcjami. Do podstawowego zestawu nie jest potrzebna.

Favicon w wynikach Google

Google opisuje wymagania na stronie Define a favicon to show in search results (aktualizacja 28.08.2026, sprawdzona w październiku 2026). Najważniejsze punkty:

• Odnośnik <link> z rel="icon" (dopuszczone są też shortcut icon, apple-touch-icon i apple-touch-icon-precomposed) musi być w nagłówku strony głównej. Adres może być względny albo bezwzględny i może wskazywać CDN.
• Favicon ma być kwadratem co najmniej 8×8 px. Google zaleca rozmiar większy niż 48×48 px, żeby ikona dobrze wyglądała na różnych ekranach. Wymogu wielokrotności 48 px, który krąży w starszych poradnikach, w obecnej dokumentacji nie ma.
• Obsługiwane formaty to BMP, GIF, ICO, PNG, JPEG, PPM i TIFF. SVG nie ma na liście.
• Adres pliku ma być stały, a robot Googlebot-Image musi móc go pobrać (Googlebot musi mieć dostęp do strony głównej). Nie blokuj ich w robots.txt.
• Obsługiwany jest jeden favicon na nazwę hosta. Domena i subdomena mogą mieć własny, podkatalog (example.com/news) nie.
• Zmiana może być widoczna po kilku dniach lub tygodniach. Możesz poprosić o indeksowanie strony głównej w narzędziu do sprawdzania adresów URL w Search Console.
• Google nie gwarantuje wyświetlenia favicona nawet przy spełnieniu wszystkich wymagań i zastępuje ikony, które uzna za niewłaściwe.

Pliki z generatora spełniają te wymagania co do formatu (ICO i PNG) i kształtu. Największy obraz w favicon.ico ma jednak 48 px, czyli nie jest „większy niż 48”. Jeśli chcesz dać Google większą ikonę, możesz dodać do kodu jeszcze jedną linię z plikiem z ZIP-a:

<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">

Dokumentacja nie wyjaśnia, który z kilku odnośników Google wybiera, więc to dodatek, a nie gwarancja. Generator tej linii nie wstawia.

Typowe problemy

Ikona się nie zmienia po wgraniu nowej

Przeglądarki długo trzymają favicony w pamięci podręcznej. Sprawdź najpierw, czy pod adresem https://twojadomena.pl/favicon.ico otwiera się nowy plik. Potem odśwież stronę bez pamięci podręcznej albo otwórz ją w oknie prywatnym. Parametr w adresie (/favicon.ico?v=2) pomaga przeglądarce, ale zmienia adres pliku, a Google chce adresu stałego, więc używaj go rzadko. W wynikach Google zmiana potrwa dłużej niż w przeglądarce.

Błąd 404 albo ikona tylko na stronie głównej

Adresy w kodzie bez początkowego / są liczone od bieżącej podstrony. Użyj ścieżki bezwzględnej od katalogu głównego i otwórz każdy plik z kodu w osobnej karcie. Każdy ma się wyświetlić, a nie zwrócić błąd. Manifest i ikony zainstalowanej aplikacji obejrzysz w panelu Application narzędzi deweloperskich Chrome.

Ikona na iPhonie ma dziwne tło

Sprawdź, czy kod wskazuje apple-touch-icon.png z generatora. Jak wyżej, ten plik zawsze ma tło. Jeśli wgrałeś własny plik z przezroczystością, zastąp go plikiem z ZIP-a, bo według opisu narzędzia iOS wypełnia przezroczystość na czarno.

Logo jest nieczytelne na karcie

Wróć do przygotowania grafiki: uprość logo albo wytnij sam symbol zamiast zmniejszać poziomy znak firmowy.

Google nadal pokazuje starą albo domyślną ikonę

Sprawdź, czy robots.txt nie blokuje pliku, czy odnośnik jest na stronie głównej i czy plik ma obsługiwany format. Potem poczekaj na ponowne zindeksowanie.