Favicon — jak zrobić i dodać ikonę strony (ICO, PNG, Apple, Android)

Favicon (od „favorites icon”) to ikona strony widoczna na karcie przeglądarki, w zakładkach, historii, na liście stron po dodaniu do ekranu głównego telefonu, a także obok adresu w wynikach wyszukiwania Google na telefonach.

Minimalny komplet plików

Plik	Rozmiar	Gdzie widać
favicon.ico	16, 32 i 48 px w jednym pliku	karta przeglądarki, starsze programy
apple-touch-icon.png	180 × 180 px	skrót na iPhonie i iPadzie
android-chrome-192x192.png, -512x512.png	192 i 512 px	Android, aplikacje PWA

Opcjonalnie można dodać ikonę SVG (<link rel="icon" href="/icon.svg" type="image/svg+xml">) — skaluje się idealnie i może mieć osobną wersję dla trybu ciemnego.

Kod do sekcji <head>

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

Plik favicon.ico warto umieścić w głównym katalogu strony nawet bez znacznika — przeglądarki i roboty szukają go tam domyślnie.

Jak przygotować obraz

• Zacznij od kwadratu co najmniej 512 × 512 px — najlepiej logo w SVG lub PNG z przezroczystym tłem.
• Uprość: przy 16 px zostaje kilka pikseli. Jedna litera lub sygnet z logo czytają się lepiej niż pełny napis.
• Zadbaj o kontrast — ikona będzie widoczna na jasnych i ciemnych paskach kart.
• Na iPhonie przezroczyste tło zamienia się na czarne — dla apple-touch-icon lepiej wybrać pełne tło.

Favicon w wynikach Google

Google pokazuje ikonę strony obok wyników wyszukiwania. Wymagania: ikona kwadratowa, wielokrotność 48 × 48 px (np. 48, 96, 144 px), stały adres dostępny dla robota Google i zgodność z zasadami treści. Po zmianie ikony może minąć od kilku dni do kilku tygodni, zanim Google ją odświeży.

WordPress i inne systemy

W WordPressie ikonę ustawisz w Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny — system sam wygeneruje potrzebne rozmiary. W sklepach (np. Shopify, WooCommerce) i kreatorach stron opcja „favicon” jest zwykle w ustawieniach motywu.

Ikona się nie zmienia?

Przeglądarki zapamiętują favicony na długo. Odśwież stronę z pominięciem pamięci podręcznej (Ctrl+F5), sprawdź w oknie prywatnym albo dodaj do adresu parametr wersji, np. /favicon.ico?v=2.

Komplet ikon — favicon.ico z trzema rozmiarami, PNG dla Apple i Androida, plik manifestu i gotowy kod HTML — przygotujesz z jednego obrazu w generatorze favicon. Obraz nie opuszcza przeglądarki.