Jak zrobić favicon?

1.
Dodaj obraz
Najlepiej kwadratowe logo w PNG lub SVG o boku co najmniej 512 px.
2.
Dostosuj wygląd
Wybierz kadrowanie, margines, zaokrąglenie rogów i tło (przezroczyste lub kolorowe). Podgląd odświeża się na bieżąco.
3.
Pobierz ZIP
Paczka zawiera favicon.ico, pliki PNG, apple-touch-icon, manifest i kod HTML.
4.
Wgraj na serwer
Skopiuj pliki do głównego katalogu strony i wklej kod HTML do sekcji <head>.

Jakie pliki favicon są potrzebne w 2026 roku?

Plik	Rozmiar	Do czego służy
favicon.ico	16, 32, 48 px	Karty przeglądarki, zakładki, wyniki wyszukiwania; przeglądarki szukają go domyślnie pod /favicon.ico
favicon-32x32.png, favicon-16x16.png	32 i 16 px	Nowoczesne przeglądarki (ostrzejsze niż ICO na ekranach o wysokiej gęstości)
apple-touch-icon.png	180 px	Ikona po dodaniu strony do ekranu początkowego na iPhonie i iPadzie
android-chrome-192x192.png, 512x512	192 i 512 px	Ikona aplikacji PWA na Androidzie, ekran powitalny (manifest)

Google zaleca, by favicon był kwadratowy i miał bok będący wielokrotnością 48 px (np. 48, 96, 144 px) - plik ICO z rozmiarem 48 px i PNG 192 px spełniają ten wymóg.

Kod HTML do wklejenia

<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">

W WordPressie favicon ustawisz też w Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny (wymagany kwadrat min. 512×512 px).

Wskazówki projektowe

Upraszczaj. W rozmiarze 16×16 px czytelny będzie symbol lub 1-2 litery, a nie pełne logo z napisem.
Kontrast. Sprawdź ikonę na jasnym i ciemnym pasku kart - przezroczyste logo w czarnym kolorze zniknie w trybie ciemnym. Pomaga kolorowe tło lub jasny obrys.
Apple Touch Icon zawsze z tłem. iOS zamienia przezroczystość na czarne tło, dlatego generator automatycznie dodaje tło do tej ikony (białe lub wybrany kolor) i nie zaokrągla jej rogów - iOS robi to sam.

Margines, zaokrąglenie i kadrowanie - jak działają ustawienia?

Wszystkie ustawienia są podawane w procentach boku ikony, dlatego każdy rozmiar wygląda tak samo. Margines (0-25%) jest dodawany z każdej strony: przy 10% na ikonie 512 px logo zajmuje środkowe 410 px (512 − 2 × 51), a na ikonie 32 px - ok. 26 px. Zaokrąglenie 0-50% określa promień rogów; 50% daje koło.

Ustawienie	Kiedy używać
Cały obraz	logo poziome lub z napisem - zmieści się w kwadracie, po bokach zostanie tło
Przytnij do kwadratu	zdjęcie lub symbol w środku - brzegi dłuższego boku zostaną obcięte
Margines 5-15%	logo dochodzące do krawędzi, ikony z kolorowym tłem
Przezroczyste tło	symbol, który dobrze wygląda na jasnym i ciemnym pasku kart

Największa ikona (512 px) powstaje bezpośrednio z obrazu źródłowego, a mniejsze są zmniejszane stopniowo, co najwyżej o połowę na krok - dzięki temu wersje 16 i 32 px są ostrzejsze niż przy jednorazowym skalowaniu. Jeśli wgrasz obraz mniejszy niż 512 px, duże ikony zostaną powiększone i mogą być nieostre.

Najczęściej zadawane pytania

Jaki rozmiar powinien mieć favicon?

Plik favicon.ico z rozmiarami 16, 32 i 48 px oraz PNG 180 px (Apple) i 192/512 px (Android, PWA). Obraz źródłowy najlepiej kwadratowy, min. 512×512 px.

Czy plik ICO jest nadal potrzebny?

Tak, warto go mieć. Przeglądarki, czytniki RSS i inne narzędzia nadal domyślnie sprawdzają adres /favicon.ico. Nasz plik ICO zawiera obrazy PNG, co obsługują wszystkie systemy od Windows Vista.

Dlaczego favicon nie zmienia się po wgraniu?

Przeglądarki bardzo agresywnie buforują favicony. Wyczyść pamięć podręczną, otwórz stronę w oknie prywatnym lub dodaj parametr do adresu, np. /favicon.ico?v=2.

Czy mogę użyć pliku SVG?

Tak, możesz wgrać SVG jako obraz źródłowy - zostanie wyrenderowany do wszystkich rozmiarów PNG i ICO.

Czy logo trafia na serwer?

Nie. Wszystkie pliki są generowane w Twojej przeglądarce.

Aktualizacja: 10 października 2026