Jakich rozmiarów favicon potrzebujesz w 2026 roku? Idealny zestaw

W 2026 roku idealny zestaw favicon wygląda tak: plik favicon.ico zawierający obrazy 16, 32 i 48 px, PNG 96x96 (dla wyszukiwarki Google), opcjonalna favicon w formacie SVG, plik apple-touch-icon.png 180x180 oraz PNG 192x192 i 512x512 (plus maskable 512) zadeklarowane w manifeście aplikacji internetowej. Kafelki Windows i starsze rozmiary Apple są potrzebne tylko wtedy, gdy musisz obsłużyć bardzo stare urządzenia. Poniżej wyjaśniamy dlaczego, z tabelą rozmiarów, gotowym kodem HTML i najczęstszymi błędami, których warto unikać.

Dawniej krajobraz favicon był chaotyczny: każda przeglądarka i system operacyjny chciały własnego rozmiaru, co dawało osławione, 20-wierszowe bloki <head>. Dziś większość tego jest już przestarzała. Nowoczesne przeglądarki skalują jedną dobrą ikonę, iOS potrzebuje jednego rozmiaru, a Android czyta manifest. Ten artykuł oddziela to, co naprawdę konieczne, od tego, co jest tylko miłym dodatkiem.

Krótka odpowiedź: idealny zestaw plików favicon

• favicon.ico (16, 32, 48 px w jednym pliku) w katalogu głównym witryny. Przeglądarki, czytniki RSS i wiele narzędzi nadal automatycznie żądają /favicon.ico.
• favicon.svg (opcjonalnie, ale zalecane) zapewnia ostre wyświetlanie w dowolnym rozmiarze i obsługę trybu ciemnego.
• PNG 16x16, 32x32 i 96x96 jako jawne rozwiązania zastępcze. Wersja 96 px pomaga w wyszukiwarce Google, która wymaga wielokrotności 48 px.
• apple-touch-icon.png w rozmiarze 180x180, nieprzezroczysta, bez przezroczystości.
• PNG 192x192 i 512x512 w pliku manifest.json, plus ikona maskable 512x512 dla Androida.
• Znacznik meta theme-color do kolorowania interfejsu przeglądarki na urządzeniach mobilnych.
• Kafelki Windows (70, 150, 310 px) z plikiem browserconfig.xml tylko dla starszego Windowsa i przypiętych witryn w IE11.

Tabela rozmiarów favicon: zastosowanie, nazwy plików i priorytet

Potraktuj tę tabelę jak listę kontrolną. "Wymagane" oznacza, że zwykła witryna bez tego będzie wyglądać na zepsutą lub niedokończoną; "Zalecane" oznacza wyraźną poprawę jakości; "Opcjonalne" oznacza zastosowania niszowe lub starsze.

favicon.ico: 16, 32 i 48 px w jednym pliku

Plik ICO to kontener, który zawiera kilka map bitowych. Dobry favicon.ico zawiera obrazy 16x16, 32x32 i 48x48, dzięki czemu przeglądarka lub system może wybrać najbardziej pasujący. Umieść go w katalogu głównym domeny (https://example.com/favicon.ico). Nawet jeśli Twój HTML wskazuje gdzie indziej, wiele robotów, czytników RSS i starszych przeglądarek nadal żąda dokładnie tego adresu URL, więc obecność pliku pozwala uniknąć zbędnych błędów 404 w logach.

Nie zmieniaj po prostu nazwy pliku PNG na .ico. Większość przeglądarek to toleruje, ale niektóre narzędzia odrzucą taki plik, a Ty tracisz korzyść z wielu rozdzielczości. Wyeksportuj prawdziwy plik ICO.

Favicony PNG: 16, 32 i 96 px

Linki do PNG z jawnym atrybutem sizes pozwalają przeglądarce wybrać najlepszą mapę bitową bez analizowania pliku ICO. W praktyce 32x32 obsługuje karty o wysokim DPI, a 16x16 jest dziś niemal zbędne. Rozmiar 96x96 warto dodać, ponieważ Google wyświetla favicony obok wyników wyszukiwania i wymaga kwadratowej ikony o rozmiarze będącym wielokrotnością 48 px (48x48, 96x96, 144x144 i tak dalej). Plik 96 px daje Google ostrzejsze źródło niż 48 px, gdy zmniejsza go dla wyników mobilnych.

Wskazówka projektowa: przy 16 px drobne szczegóły znikają. Użyj wyrazistego, prostego kształtu, wysokiego kontrastu i niewielkiej ilości tekstu lub zupełnie bez niego. Ikonę możesz dopracować i obejrzeć w edytorze MakeFav przed eksportem.

Favicon SVG i tryb ciemny

Favicon SVG to pojedynczy, malutki plik, który pozostaje ostry przy każdej gęstości ekranu. Obsługują go przeglądarki oparte na Chromium oraz Firefox. Wsparcie w Safari było historycznie ograniczone, więc nigdy nie polegaj wyłącznie na SVG: zachowaj rozwiązania zastępcze ICO i PNG.

Największą zaletą jest dopasowanie do motywu. Ponieważ SVG może zawierać CSS, możesz dostosować ikonę do schematu kolorów użytkownika za pomocą prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Zwróć uwagę, że zapytanie media odzwierciedla motyw przeglądarki lub systemu, którego używa pasek kart. Nie podąża ono za przełącznikiem motywu na Twojej własnej stronie.

Jedna znana osobliwość: gdy na liście znajdują się zarówno ICO, jak i SVG, Chrome może wybrać ICO. Zadeklarowanie ICO z sizes="32x32" i umieszczenie SVG po nim sprawia, że Chrome preferuje SVG, jak pokazano w kodzie poniżej.

Apple touch icon: 180x180 i starsze rozmiary

Gdy użytkownik dodaje Twoją witrynę do ekranu głównego iOS lub iPadOS, Safari używa apple-touch-icon. Dziś wystarczy jeden plik PNG 180x180 px: iOS zmniejsza go dla starszych urządzeń i iPadów. Nazwij go apple-touch-icon.png i umieść w katalogu głównym; iOS domyślnie szuka tego pliku nawet wtedy, gdy nie ma znacznika link.

Zasady dotyczące ikony Apple:

• Bez przezroczystości. iOS wypełnia przezroczyste piksele kolorem czarnym, więc przezroczyste logo często zamienia się w czarną plamę. Dodaj jednolity kolor tła.
• Bez zaokrąglonych rogów. iOS stosuje własną zaokrągloną maskę. Dostarcz pełny kwadrat.
• Trzymaj najważniejszą zawartość z dala od samych krawędzi, ponieważ rogi są przycinane.

Kiedy potrzebne są starsze rozmiary (57, 72, 76, 114, 120, 144, 152, 167)? Tylko jeśli obsługujesz iOS 6 lub wcześniejszy albo chcesz mieć dokładną kontrolę pikseli dla poszczególnych urządzeń, takich jak iPad Pro (167 px) i iPad (152 px). W przypadku niemal każdej witryny w 2026 roku sam plik 180x180 w zupełności wystarczy. Konfiguracja z maksymalną zgodnością poniżej zawiera kilka z nich dla kompletności.

Ikony Androida i PWA: 192, 512 i maskable

Chrome na Androidzie i inne przeglądarki obsługujące PWA odczytują ikony z manifestu aplikacji internetowej, a nie z <link rel="icon">. Aby aplikację można było zainstalować, potrzebujesz co najmniej PNG 192x192 i 512x512. Ikona 192 px jest używana na ekranie głównym i w launcherze aplikacji; ikona 512 px pojawia się na ekranach startowych i w oknach instalacji.

Ikony maskable i strefa bezpieczna

Adaptacyjne ikony Androida mogą być przycinane do koła, squircle lub innego kształtu w zależności od urządzenia. Ikona maskable jest zaprojektowana tak, by można ją było bezpiecznie przyciąć: ważna zawartość musi znajdować się wewnątrz strefy bezpiecznej, czyli wyśrodkowanego koła o średnicy równej 80% obrazu (promień równy 40% boku). Dla pliku 512x512 oznacza to utrzymanie logo wewnątrz koła o średnicy około 410 px oraz rozciągnięcie koloru tła do wszystkich czterech krawędzi, aby po zastosowaniu maski nie pojawiły się żadne luki.

Zadeklaruj ikonę maskable jako osobny wpis z "purpose": "maskable". Unikaj "any maskable" w jednym pliku: margines potrzebny do maskowania wygląda na zbyt mały, gdy ikona jest wyświetlana bez maski.

Przykładowy manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Udostępniaj plik jako application/manifest+json (lub application/json) i podlinkuj go na każdej stronie za pomocą <link rel="manifest" href="/manifest.json">. Niektóre projekty nazywają go site.webmanifest; nazwa nie ma znaczenia, liczy się link.

Kafelki Windows i browserconfig.xml

Windows 8.1 i 10 pozwalają użytkownikom przypiąć witrynę do menu Start, a IE11 i starszy Edge odczytują obrazy kafelków z browserconfig.xml. Typowe rozmiary to 70x70 (mały), 150x150 (średni), 310x150 (szeroki) i 310x310 (duży). Edge oparty na Chromium korzysta zamiast tego z manifestu i zwykłych favicon, więc jest to funkcja przestarzała. Uwzględnij ją tylko wtedy, gdy Twoi odbiorcy nadal korzystają ze starszych konfiguracji Windows, na przykład w środowiskach korporacyjnych.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: kolorowanie interfejsu przeglądarki

Znacznik meta theme-color informuje przeglądarki mobilne (i niektóre desktopowe), jakiego koloru użyć dla paska adresu lub paska tytułu. To nie jest favicon, ale należy do tego samego zestawu elementów identyfikacji marki. Możesz podać osobne wartości dla trybu jasnego i ciemnego:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Minimalna nowoczesna konfiguracja kontra maksymalna zgodność

Minimalna nowoczesna konfiguracja (zalecana dla większości witryn)

Pięć plików pokrywa ponad 99% rzeczywistych zastosowań: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) i dwie ikony manifestu (192 i 512). Dodaj PNG 96x96, jeśli zależy Ci na widoczności w wyszukiwarce Google, oraz ikonę maskable, jeśli publikujesz PWA.

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

Konfiguracja z maksymalną zgodnością

Wybierz ją, gdy obsługujesz szerokie lub firmowe grono odbiorców albo chcesz pokryć każdego możliwego klienta. Dodaje jawne rozmiary PNG, starsze rozmiary Apple, kafelki Windows i kolory motywu.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Zwróć uwagę na ścieżki względem katalogu głównego, zaczynające się od /. Działają na każdej głębokości strony, co prowadzi nas do najczęstszych błędów.

Najczęstsze błędy z favicon i jak je naprawić

1. Błędne ścieżki

Link taki jak href="favicon.ico" jest rozwiązywany względem bieżącego adresu URL, więc działa na /, ale przestaje działać na /blog/post/. Używaj ścieżek względem katalogu głównego (/favicon.ico) lub bezwzględnych adresów URL. Sprawdź też, czy pliki naprawdę istnieją: otwórz każdy adres URL bezpośrednio w przeglądarce i upewnij się, że zwraca HTTP 200, a nie przekierowanie na stronę 404 lub ekran logowania.

2. Brakujący lub błędny atrybut sizes

Bez sizes przeglądarki muszą pobrać ikony, żeby je sprawdzić, i mogą wybrać niewłaściwą. Zawsze deklaruj sizes w linkach do PNG i upewnij się, że zgadza się z rzeczywistymi wymiarami w pikselach. Plik oznaczony jako 32x32, który w rzeczywistości ma 64x64, daje niespójne rezultaty.

3. Agresywne buforowanie

Przeglądarki buforują favicony przez długi czas, często niezależnie od pamięci podręcznej strony. Po zmianie identyfikacji wizualnej stara ikona może utrzymywać się przez wiele dni. Zmień nazwę pliku lub dodaj parametr wersji (/favicon.ico?v=2) i zaktualizuj znaczniki link. Twarde przeładowanie często nie odświeża ikony karty; zwykle pomaga bezpośrednie otwarcie adresu URL ikony i przeładowanie go.

4. Obrazy niekwadratowe

Favicony muszą być kwadratowe. Prostokątne logo zostanie rozciągnięte, przycięte lub obramowane w nieprzewidywalny sposób. Zaprojektuj dedykowany, kwadratowy znak, na przykład inicjał lub symbol, zamiast zmniejszać szeroki logotyp.

5. Przezroczyste ikony Apple touch zmieniające się w czarne

iOS wypełnia przezroczystość kolorem czarnym. Nadaj ikonie 180x180 nieprzezroczyste tło i nie zaokrąglaj wcześniej rogów.

6. Ikony maskable bez strefy bezpiecznej

Jeśli logo dotyka krawędzi ikony maskable, Android je obetnie. Trzymaj je wewnątrz centralnego koła o średnicy 80% i wypełnij cały obszar kolorem tła.

7. Blokowanie ikon przed robotami

Jeśli robots.txt blokuje ścieżkę do favicony, Google nie może jej pobrać i pokaże w wynikach wyszukiwania ogólną ikonę globu. Pamiętaj również, że Google wymaga, aby favicon znajdowała się na tym samym hoście co strona, i odświeża ją tylko od czasu do czasu, więc zmiany mogą pojawić się dopiero po kilku dniach lub tygodniach.

8. Pominięty link do manifestu lub brak purposes

Manifest, który nie jest podlinkowany lub w którym brakuje ikon 192 i 512 px, uniemożliwia wyświetlenie monitu o instalację w Chrome. Zweryfikuj go w narzędziach deweloperskich przeglądarki, na karcie Application.

Wygeneruj cały zestaw jednym kliknięciem

Ręczne tworzenie kilkunastu plików w edytorze grafiki, konwersja do ICO i pisanie manifestu jest żmudne i podatne na błędy. MakeFav generuje wszystkie powyższe pliki z jednego obrazu, tekstu lub emoji: wielorozmiarowy favicon.ico, PNG, SVG, Apple touch icon, PNG 192/512, ikonę maskable, kafelki Windows, manifest.json i browserconfig.xml, a do tego gotowy fragment HTML do wklejenia, wszystko w jednym pliku ZIP do pobrania. Tło, margines i kształt możesz dopracować w edytorze, sprawdzić istniejącą witrynę za pomocą weryfikatora favicon i zautomatyzować generowanie dzięki zasobom dla deweloperów.

Lista kontrolna wdrożenia

1. Prześlij wszystkie pliki do katalogu głównego witryny.
2. Wklej fragment HTML do <head> każdej strony (lub do wspólnego szablonu).
3. Upewnij się, że ścieżki są względne wobec katalogu głównego i zwracają HTTP 200.
4. Sprawdź tryb jasny i ciemny, instalację na ekranie głównym iOS oraz instalację na Androidzie.
5. Uruchom weryfikator, aby wychwycić brakujące lub niezgodne rozmiary.
6. Wymuś odświeżenie pamięci podręcznej za pomocą parametru wersji, jeśli zastąpiłeś starą ikonę.

Najczęściej zadawane pytania

Czy w 2026 roku nadal potrzebuję favicon.ico?

Tak. Chociaż nowoczesne przeglądarki akceptują PNG i SVG, wiele robotów, czytników RSS, klientów poczty i starszych przeglądarek nadal żąda bezpośrednio /favicon.ico. Wielorozmiarowy plik ICO z obrazami 16, 32 i 48 px jest niewielki i zapobiega brakującym ikonom oraz błędom 404.

Jakiego rozmiaru powinna być favicon dla wyszukiwarki Google?

Google wymaga kwadratowej favicony o rozmiarze będącym wielokrotnością 48 px, co najmniej 48x48. Bezpiecznym wyborem jest PNG 96x96, obsługiwany jest również SVG. Google potrzebuje też, aby plik był dostępny dla robotów, więc nie blokuj go w robots.txt. Aktualizacje mogą pojawiać się po kilku dniach lub tygodniach.

Czy 180x180 wystarczy dla Apple touch icon?

W przypadku niemal wszystkich witryn tak. iOS i iPadOS zmniejszają PNG 180x180 dla każdego aktualnego urządzenia. Starsze rozmiary (od 57 do 152 px) mają znaczenie tylko dla bardzo starych wersji iOS. Pamiętaj o użyciu nieprzezroczystego tła, aby ikona nie zmieniła się w czarną.

Czym jest ikona maskable i czy jej potrzebuję?

Ikona maskable to PNG 512x512 zaprojektowany z myślą o adaptacyjnych kształtach ikon Androida. Jej ważna zawartość znajduje się wewnątrz koła o średnicy 80% pośrodku, a tło wypełnia cały kwadrat. Potrzebujesz jej tylko wtedy, gdy oferujesz instalowalną aplikację PWA, ale sprawia ona, że ikona wygląda natywnie, zamiast tkwić w białym kółku.

Dlaczego moja stara favicon nadal się wyświetla po zmianie?

Przeglądarki buforują favicony oddzielnie i przez długi czas. Zmień nazwę pliku lub dodaj parametr wersji, na przykład ?v=2, zaktualizuj znaczniki link, a następnie otwórz bezpośrednio adres URL ikony i przeładuj go. Wyszukiwarkom odświeżenie własnej kopii może zająć więcej czasu.