Jak zrobić favicon: rozmiary na wszystkie urządzenia

Nazwa „favicon” pochodzi od angielskiego „favorite icon” — ikony, którą przeglądarki zapisywały razem z zakładkami. Dziś to pojęcie sięga znacznie dalej: favicon widać na kartach przeglądarki, w pasku adresu, w skrótach na pulpicie, na ekranie głównym telefonów z iOS i Androidem, w wynikach Google oraz jako ikonę aplikacji Progressive Web App (PWA). Każde z tych miejsc wymaga innego rozmiaru.

Najczęstszy błąd to zrobienie jednego pliku favicon.ico w rozmiarze 16×16 pikseli i uznanie sprawy za załatwioną. Na monitorze Retina albo na iPhonie taka ikona wyjdzie rozmyta. Rozwiązaniem jest wygenerowanie pełnego kompletu rozmiarów — brzmi to poważnie, ale z odpowiednim narzędziem zajmuje kilka sekund.

Czym jest plik .ico i kiedy go używać

Format .ico to pierwotny format favikony, stworzony przez Microsoft w latach 90. Ma jedną wyjątkową cechę: w jednym pliku mieści kilka rozmiarów naraz — na przykład 16×16 i 32×32. Przeglądarka sama wybiera ten najlepiej pasujący do sytuacji.

O favicon.ico wciąż jest potrzebny w 2026 roku z jednego konkretnego powodu: starsze przeglądarki i część robotów wyszukiwarek automatycznie próbują pobrać plik spod adresu /favicon.ico w katalogu głównym witryny. Jeśli go tam nie ma, w logach serwera lądują niepotrzebne błędy 404. Dlatego nawet przy nowoczesnych plikach PNG warto trzymać favicon.ico w katalogu głównym.

Pełna tabela rozmiarów favicon

Oto wszystkie rozmiary, jakie w 2026 roku powinien obejmować kompletny zestaw favikon:

Rozmiar	Format	Gdzie jest używany
16 × 16 px	.ico / PNG	Karta przeglądarki (standard)
32 × 32 px	.ico / PNG	Skrót na pulpicie (Windows), karty na ekranach HiDPI
48 × 48 px	.ico / PNG	Skrót w Eksploratorze plików Windows
57 × 57 px	PNG	iPhone (iOS 1–6, ekrany bez Retiny)
60 × 60 px	PNG	iPhone (iOS 7+, ekrany bez Retiny)
72 × 72 px	PNG	iPad (iOS 1–6, ekrany bez Retiny)
76 × 76 px	PNG	iPad (iOS 7+, ekrany bez Retiny)
96 × 96 px	PNG	Skrót w Chrome (Android)
114 × 114 px	PNG	iPhone Retina (iOS 1–6)
120 × 120 px	PNG	iPhone Retina (iOS 7+)
144 × 144 px	PNG	iPad Retina (iOS 1–6), kafelek Windows 8
152 × 152 px	PNG	iPad Retina (iOS 7+)
167 × 167 px	PNG	iPad Pro (iOS 9+)
180 × 180 px	PNG	iPhone 6 Plus i nowsze
192 × 192 px	PNG	Android Chrome, PWA (manifest.json)
512 × 512 px	PNG	Ekran powitalny Android Chrome, PWA w wysokiej rozdzielczości

💡 Dobra wiadomość: nie musisz robić każdego rozmiaru ręcznie. Generator favicon od ImageTools tworzy wszystkie te pliki automatycznie z jednego obrazu — łącznie z plikiem .ico zawierającym kilka rozmiarów i archiwum ZIP ze wszystkimi plikami PNG.

Jaki obraz nadaje się na favicon

Plik źródłowy powinien mieć co najmniej 512×512 pixels — to największy potrzebny rozmiar, a start z dużego obrazu gwarantuje, że mniejsze wersje wyjdą dobrze. Mały plik źródłowy da rozmyte ikony w większych rozmiarach.

Akceptowane formaty źródłowe

PNG z przezroczystym tłem — najlepszy wybór. Ikona wygląda czysto na karcie i ekranie głównym w dowolnym kolorze.
PNG z jednolitym tłem — sprawdza się, gdy kolor tła pasuje do wyglądu strony.
JPG — obsługiwany, ale bez przezroczystości.
SVG — najlepszy punkt wyjścia, jeśli masz taki plik. Wektor skaluje się do każdego rozmiaru bez straty jakości.

Wskazówki projektowe dla favikon

Favicon to bardzo mała powierzchnia — wersja 16×16 ma w sumie ledwie 256 pikseli. Narzuca to ograniczenia projektowe, o których wiele osób zapomina:

Wybierz najprostszy element swojej marki. Pełne logo zwykle nie działa w 16 px. Lepiej sprawdzi się sama inicjał, pojedynczy symbol albo uproszczona wersja znaku.
Unikaj cienkiego tekstu. Poniżej 32 px każdy napis robi się nieczytelny.
Postaw na wysoki kontrast. Favicon konkuruje z dziesiątkami innych otwartych kart — ikona o słabym kontraście po prostu ginie.
Jednolite tło często działa lepiej niż przezroczyste , bo dzięki niemu ikona wybija się zarówno na jasnych, jak i ciemnych kartach.
Sprawdź efekt w rozmiarze 16 px , zanim uznasz projekt za skończony. To, co świetnie wygląda w 512 px, w 16 px bywa nie do rozpoznania.

Wygeneruj favicon — wszystkie rozmiary za jednym razem

Wgraj swój obraz i pobierz archiwum ZIP z plikiem .ico oraz wszystkimi plikami PNG dla przeglądarek, iPhone’a, Androida i PWA. Za darmo, bez rejestracji.

Zrób favicon za darmo

Jak wpiąć favicon na stronę

Po wygenerowaniu plików trzeba je podpiąć w sekcji <head> dokumentu HTML. Zalecany komplet kodu na 2026 rok wygląda tak:

<!-- Podstawowy favicon dla przeglądarek -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon (iPhone i iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android i PWA -->
<link rel="manifest" href="/site.webmanifest">

Plik favicon.ico musi leżeć w katalogu głównym witryny (tym samym, w którym jest index.html). Pozostałe pliki PNG mogą być w katalogu głównym albo w podfolderze — ważne, żeby ścieżki w kodzie HTML się zgadzały.

Plik site.webmanifest

Żeby aplikacje PWA i Android Chrome poprawnie rozpoznały Twoją ikonę, potrzebny jest plik site.webmanifest w katalogu głównym witryny. Podstawowa zawartość wygląda tak:

{
  "name": "Nazwa Twojej strony",
  "short_name": "Strona",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

📦 Archiwum ZIP z Generatora favicon zawiera już plik site.webmanifest z gotowymi, poprawnymi ścieżkami — wystarczy rozpakować i wgrać pliki do katalogu głównego strony.

Instalacja na popularnych platformach

WordPress

W WordPressie favicon nazywa się „ikoną witryny”. Żeby ją ustawić, wejdź w Wygląd → Dostosuj → Tożsamość witryny i kliknij „Wybierz ikonę witryny”. WordPress sam wygeneruje potrzebne rozmiary z wgranego obrazu — wystarczy kwadratowy plik o boku co najmniej 512 pikseli.

Shopify

Em Sklep online → Preferencje, przewiń do sekcji „Ikona sklepu” i wgraj kwadratowy plik PNG lub JPG o boku co najmniej 512 pikseli.

Wix

Em Ustawienia → Tożsamość marki → Favicon. Użyj kwadratowego pliku PNG lub JPG.

Squarespace

Em Design → Styl przeglądarki, sekcja „Favicon”. Zalecany jest kwadratowy plik PNG 100×100 pikseli — resztą zajmie się Squarespace.

Czysty HTML/CSS albo framework

Wrzuć wszystkie wygenerowane pliki do katalogu głównego projektu i dodaj znaczniki <link> pokazane wyżej w sekcji <head> każdej podstrony — albo w szablonie bazowym, jeśli korzystasz z frameworka w rodzaju Next.js czy Nuxt.

Jak sprawdzić, czy favicon działa

Po instalacji otwórz stronę w przeglądarce i zobacz, czy ikona pojawia się na karcie. Jeśli nie widać jej od razu, spróbuj tak:

Wyczyść pamięć podręczną przeglądarki (Ctrl+Shift+R w Windowsie, Cmd+Shift+R na Macu).
Otwórz stronę w oknie prywatnym, które nie korzysta z pamięci podręcznej.
Odczekaj kilka minut — przeglądarki trzymają favikony w pamięci podręcznej przez różny czas.
Sprawdź, czy ścieżka w kodzie HTML jest poprawna i czy plik faktycznie leży na serwerze.

Najczęściej zadawane pytania

Jaki jest zalecany minimalny rozmiar obrazu na favicon?

512×512 pikseli. To największy potrzebny rozmiar (ekran powitalny PWA na Androidzie), a start z takiego pliku gwarantuje, że wszystkie mniejsze wersje wyjdą ostre. Mniejszy obraz źródłowy daje rozmyte ikony w większych formatach.

PNG czy ICO — co lepiej sprawdza się jako favicon?

Oba się uzupełniają. Plik .ico powinien leżeć w katalogu głównym witryny ze względu na starsze przeglądarki i roboty wyszukiwarek. Osobne pliki PNG obsługują Apple Touch Icon, Android Chrome i PWA — te miejsca nie przyjmują formatu .ico. Zalecana praktyka to mieć jedno i drugie: favicon.ico w katalogu głównym oraz pliki PNG podpięte znacznikami w kodzie HTML.

Czy naprawdę potrzebuję wszystkich tych rozmiarów?

Dla większości stron minimalny działający komplet to: favicon.ico (16+32 px), favicon-32x32.png, apple-touch-icon.png (180×180) i android-chrome-192x192.png. To pokrywa nowoczesne przeglądarki, iPhone’a i Androida. Pozostałe rozmiary służą zgodności ze starszymi wersjami iOS i szczególnym przypadkom, takim jak kafelki Windows. Skoro generator tworzy wszystko za jednym razem, nic nie kosztuje mieć pełny zestaw.

Dlaczego mój favicon nie pokazuje się w Google?

Google potrzebuje czasu, żeby zindeksować favikony i pokazać je w wynikach — zwykle od kilku dni do kilku tygodni od publikacji. Żeby ikona się pojawiła, strona musi mieć favicon dostępny publicznie (nieblokowany przez robots.txt), plik favicon.ico w katalogu głównym albo poprawny znacznik w kodzie HTML, i musi zostać odwiedzona przez Googlebota. Nowe witryny zwykle czekają dłużej.

Czy mogę użyć logo firmy jako favicon?

Tak, o ile uproszczona wersja czyta się w rozmiarze 16×16 pikseli. Logo z tekstem, cienkimi detalami albo wieloma elementami zwykle przestaje być rozpoznawalne przy tak małej skali. Najlepiej przygotować „ikonową” wersję znaku — sam symbol, inicjał albo najbardziej charakterystyczny element marki — z myślą właśnie o favicon.

Czy favicon wpływa na SEO strony?

Bezpośrednio nie — favicon nie jest czynnikiem rankingowym. Pośrednio owszem: dobrze zrobiona ikona wyświetla się w wynikach wyszukiwania obok nazwy strony, wzmacnia rozpoznawalność marki i potrafi poprawić współczynnik klikalności (CTR). Strony bez favikony dostają w wynikach ikonę zastępczą, co wygląda mniej profesjonalnie.