Zrób favicon.ico i komplet ikon ze swojego logo

Ostatnia aktualizacja treści:2026-09-07

Wgraj logo w formacie PNG, JPG lub SVG. Narzędzie złoży z niego plik favicon.ico, który mieści w sobie trzy rozmiary, oraz pięć osobnych ikon PNG. Pliki powstają w Twojej przeglądarce i stamtąd trafiają prosto na dysk — pobierzesz je razem albo pojedynczo.

Podgląd i pliki favicon

Dodaj obraz po lewej stronie, aby wygenerować favicon.ico oraz zestaw ikon PNG zgodny z aktualnymi wytycznymi.

favicon.ico

ICO 16x16 + 32x32 + 48x48

Do wygenerowania

favicon-16x16.png

PNG 16x16

Do wygenerowania

favicon-32x32.png

PNG 32x32

Do wygenerowania

apple-touch-icon.png

PNG 180x180

Do wygenerowania

android-chrome-192x192.png

PNG 192x192

Do wygenerowania

android-chrome-512x512.png

PNG 512x512

Do wygenerowania

To narzędzie działa na większym ekranie

Żeby wygodnie skorzystać z tego narzędzia, otwórz je na laptopie, komputerze stacjonarnym lub tablecie w poziomie.

Podpowiedź

Jeśli korzystasz z tabletu, przełącz go w tryb poziomy - gdy szerokość okna będzie większa, narzędzie załaduje się automatycznie.

Czym jest favicon, a czym apple-touch-icon?

Favicon to ikona strony, którą przeglądarka rysuje na karcie obok tytułu, w pasku zakładek i na liście historii. Encyklopedyczna definicja opisuje ją jako ikonę pojawiającą się przed adresem w pasku adresu albo na karcie z otwartą stroną [1]. Na karcie ma do dyspozycji bok o długości kilkunastu pikseli, czyli mniej miejsca, niż zajmuje jedna litera tego zdania.

Apple-touch-icon to ta sama grafika przygotowana dla iPhone'a i iPada. Trafia na ekran główny, kiedy ktoś doda Twoją stronę jako skrót. Ma bok 180 pikseli, bo system rysuje ją w rozmiarze zbliżonym do zwykłej aplikacji.

Dwie największe ikony z zestawu, 192 i 512 pikseli, obsługują aplikacje webowe. Android sięga po nie przy zakładaniu skrótu i przy instalacji, a wskazuje mu je plik manifestu, czyli dokument, w którym strona opisuje swoją nazwę, kolory i właśnie tablicę ikon [2].

Jak zrobić favicon z własnego logo?

Wgraj logo w polu Dodaj obraz bazowy, kliknij Generuj favicon i pobierz sześć plików: favicon.ico oraz ikony PNG o boku 16, 32, 180, 192 i 512 pikseli. Obraz przetwarza przeglądarka na Twoim komputerze, a gotowe pliki zapisujesz prosto na dysk.

Plik favicon.ico jest przy tym czymś więcej niż pojedynczym obrazkiem. Format ICO to kontener na kilka wersji tej samej grafiki i generator wkłada do niego trzy: 16, 32 i 48 pikseli. Przeglądarka albo system wybiera z pliku rozmiar pasujący do miejsca, w którym akurat rysuje ikonę. Karta przeglądarki sięga po najmniejszy, a skrót na pulpicie po większy.

Nazwy plików odpowiadają temu, czego szukają szablony stron i dokumentacje: favicon.ico, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, android-chrome-192x192.png oraz android-chrome-512x512.png. Po pobraniu wgrywasz je na serwer w takiej postaci, w jakiej wyszły z generatora.

Jakie pliki dostajesz i gdzie każdy z nich się pokazuje?

Generator zawsze tworzy pełny zestaw. Poniżej rozmiar każdego pliku i miejsce, w którym trafia on na oczy użytkownika.

Nazwa pliku	Rozmiar	Gdzie się pokazuje
favicon.ico	16, 32 i 48 px w jednym pliku	Karta przeglądarki, pasek zakładek, skrót na pulpicie
favicon-16x16.png	16 × 16 px	Karta przeglądarki na ekranie o zwykłej gęstości
favicon-32x32.png	32 × 32 px	Karta przeglądarki na ekranie o podwyższonej gęstości
apple-touch-icon.png	180 × 180 px	Ekran główny iPhone'a i iPada
android-chrome-192x192.png	192 × 192 px	Skrót na ekranie głównym Androida
android-chrome-512x512.png	512 × 512 px	Ekran startowy i instalacja aplikacji webowej

Jaki rozmiar ikony jest potrzebny w Google, na iPhonie, na Androidzie i w WordPressie?

Każde z tych miejsc czyta ikonę na własnych zasadach. Zestaw z generatora pokrywa je wszystkie naraz.

Gdzie ikona się pojawia	Jaki bok jest potrzebny	Format pliku
Wyniki wyszukiwania Google	Co najmniej 8 px, zalecane powyżej 48 px	ICO, PNG, JPEG, GIF, BMP, TIFF lub PPM
Karta przeglądarki	16 px, na gęstym ekranie 32 px	ICO lub PNG
Ekran główny iPhone'a i iPada	180 px	PNG
Skrót na ekranie głównym Androida	192 px	PNG
Instalacja aplikacji webowej	512 px	PNG
Ikona witryny w WordPressie	Co najmniej 512 px	PNG lub JPG

Wymagania Google wobec favikony, łącznie z kwadratowym kształtem i listą formatów, opisuje dokumentacja wyszukiwarki [3]. Próg 512 pikseli dla ikony witryny podaje dokumentacja WordPressa [4].

Gdzie zadeklarować każdy z pobranych plików?

Cztery pliki wpisujesz w sekcji head strony, a dwa największe wskazujesz w pliku manifestu.

Plik z generatora	Miejsce deklaracji	Atrybut rel
favicon.ico	Sekcja head strony	icon
favicon-16x16.png	Sekcja head strony	icon
favicon-32x32.png	Sekcja head strony	icon
apple-touch-icon.png	Sekcja head strony	apple-touch-icon
android-chrome-192x192.png	Plik manifestu, tablica icons	Deklaracja w manifeście
android-chrome-512x512.png	Plik manifestu, tablica icons	Deklaracja w manifeście

Wartości atrybutu rel, po których Google rozpoznaje favikonę, to icon, apple-touch-icon oraz apple-touch-icon-precomposed [3]. Gotowe wiersze kodu znajdziesz niżej, w zakładce HTML.

Jak korzystać z generatora favicon?

Trzy kroki dzielą Cię od kompletu ikon na dysku:

1. Dodaj obraz bazowy
Przeciągnij plik na pole Dodaj obraz bazowy albo kliknij je i wybierz grafikę z dysku. Narzędzie przyjmuje PNG, JPG/JPEG oraz SVG, a pod polem pokaże nazwę i wagę wybranego pliku.
2. Ustaw tło
Generator startuje z białym tłem. Zaznaczenie pola Przezroczyste tło (PNG/ICO) zostawia je puste, a własny odcień wybierzesz próbnikiem obok napisu Kolor tła.
3. Wygeneruj i pobierz
Kliknij Generuj favicon. Po chwili w prawej kolumnie pojawi się sześć plików razem z ich wagą i łącznym rozmiarem. Przycisk Pobierz zapisuje cały zestaw, a każdy wiersz ma własny przycisk Pobierz.

Przezroczyste tło (PNG/ICO)

Kolor tła:

Tło ikony: przezroczyste czy w kolorze?

Białe tło działa jako ustawienie startowe

Po wejściu na stronę próbnik stoi na bieli i taki kolor dostaje każda z sześciu ikon. Sprawdza się to przy logo w ciemnych barwach oraz wszędzie tam, gdzie ikona ma wyglądać identycznie na jasnym i ciemnym pasku kart.

Przezroczyste tło (PNG/ICO)

Zaznaczenie tego pola zostawia obszar wokół znaku pusty, a próbnik koloru staje się wtedy nieaktywny. Wybierz je, jeśli Twoje logo ma własny kształt — koło, sygnet, literę — i chcesz, żeby przybierało kolor tła, na którym akurat leży.

Własny kolor z Twojej identyfikacji

Próbnik przyjmuje dowolny odcień, także ten z Twojej identyfikacji. Jeśli szukasz dokładnej wartości z gotowego materiału, wyciągniesz ją ekstraktorem kolorów z obrazu i wkleisz tutaj.

Jaki obraz źródłowy da najlepszy wynik?

Najmniejsza ikona z zestawu ma bok 16 pikseli, więc o wyniku decyduje przede wszystkim to, co wgrasz.

Postaw na prosty kształt i jeden mocny znak
Przy boku 16 pikseli czytelnie wychodzą sygnety, pojedyncze litery i zwarte symbole. Ten sam mechanizm działa na tablicach informacyjnych: piktogram niesie treść w kilku kreskach, bo ma zadziałać z odległości i w małej skali.
Wgraj logo w formacie SVG
Plik SVG opisuje kształty za pomocą krzywych i figur geometrycznych, więc każdy rozmiar generator rysuje z pełnego opisu. W naszym pomiarze krawędź okręgu w ikonie o boku 512 pikseli wyszła czysta: na linii przez jej środek nie wypadł ani jeden piksel pośredniego odcienia. Ten sam plik przyda się szerzej: bitmapę tego znaku do prezentacji albo do maila przygotujesz konwerterem SVG na PNG.
Wybierz plik o boku co najmniej 512 pikseli
Tyle ma największa ikona z zestawu. Przy takim pliku rastrowym każdy kolejny rozmiar powstaje przez pomniejszenie, a to zachowuje ostrość krawędzi.
Wgraj obraz o dowolnych proporcjach
Narzędzie wpisuje go w kwadrat w całości: skaluje obraz do dłuższego boku, ustawia na środku, a wolne pasy wypełnia wybranym tłem. Weźmy logo poziome o wymiarach 400 × 100 pikseli. W ikonie o boku 64 pikseli wychodzi z niego pasek wysoki na 16 pikseli, a tło zajmuje miejsce nad nim i pod nim. Jeśli wolisz, żeby znak wypełnił cały kwadrat, przytnij logo do kwadratu w edytorze zdjęć i dopiero wtedy wgraj je tutaj.
Dobierz kontrast pod jasny i ciemny motyw
Ikona stoi raz na jasnym pasku kart, raz na ciemnym. Odcienie wyraźnie różniące się od bieli i od czerni utrzymają czytelność w obu przypadkach.
Zostaw zapas przy krawędziach dla Androida
Android potrafi przyciąć ikonę do koła albo do kwadratu z zaokrąglonymi rogami. Specyfikacja gwarantuje widoczność koła o promieniu dwóch piątych krótszego boku, liczonego od środka [2], więc znak umieszczony centralnie przejdzie każde takie przycięcie.
Zacznij od PNG, jeśli logo masz w innym formacie
Pole Dodaj obraz bazowy pracuje na plikach PNG, JPG/JPEG oraz SVG. Znak zapisany inaczej wystarczy wcześniej przepuścić przez konwerter. Zdjęcie z iPhone’a otworzy konwerter HEIC na PNG. Grafikę pobraną ze strony przełoży konwerter WEBP na PNG albo konwerter AVIF na PNG. Logo z księgi znaku dostarczonej w PDF wyciągnie konwerter PDF na PNG.

Czy sam plik SVG wystarczy jako ikona strony?

Ikona w formacie SVG działa dziś w przeglądarkach na komputerze — Chrome i Edge czytają ją od wersji 80, Firefox od 41. Na iPhonie i iPadzie robi to Safari od wersji 26 [5]. Dlatego SVG najlepiej sprawdza się jako uzupełnienie zestawu, obok plików ICO i PNG.

Favikonę do wyników wyszukiwania Google czyta z plików ICO, PNG, JPEG, GIF, BMP, TIFF i PPM [3]. Zestaw z tego generatora mieści się w tej liście dwa razy: raz plikiem favicon.ico, raz ikonami PNG. Jeśli masz już własny plik SVG, zostaw go w sekcji head obok nich — wtedy każde z tych miejsc znajdzie format, który potrafi odczytać.

Gdzie wgrać wygenerowane pliki?

Cztery drogi, w zależności od tego, na czym stoi Twoja strona:

WordPress
W dzisiejszym WordPressie ikonę ustawisz w panelu, w Ustawienia › Ogólne. Pole nosi tam nazwę Ikonka witryny. Motywy klasyczne udostępniają tę samą opcję dodatkowo w Dostosowywaniu, w sekcji z tożsamością witryny.
Wgraj tam plik android-chrome-512x512.png. Dokumentacja podaje próg 512 pikseli i kwadratowy kształt [4], a mniejsze warianty WordPress przygotuje sam.
Chcesz mieć pełną kontrolę nad każdym plikiem? Wgraj cały zestaw przez FTP do katalogu głównego strony i wpisz odnośniki tak, jak pokazuje karta HTML.
Shopify
W panelu sklepu wejdź w Sklep online, znajdź swój szablon i kliknij Edytuj szablon. W Ustawieniach szablonu otwórz sekcję z logo, a w niej pole Obraz ikony Favicon.
Shopify podaje jako zalecany rozmiar 32 × 32 piksele i sam zmniejsza do niego większe obrazy [6]. Wgraj więc plik android-chrome-512x512.png — zostawi Ci to zapas jakości na ekranach o wysokiej gęstości.
HTML
Skopiuj pliki do katalogu głównego strony, czyli tam, gdzie leży index.html. Przeglądarki sprawdzają adres /favicon.ico samodzielnie, a pozostałe ikony znajdą po odnośnikach w sekcji <head>:
```
<link rel="icon" href="/favicon.ico" sizes="32x32">
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
```
Dwie największe ikony wskazujesz w pliku manifestu, w tablicy icons, razem z ich wymiarami i typem image/png.
Ikonę da się też osadzić wprost w kodzie jako ciąg znaków — przygotuje go konwerter obrazu na Base64. Przy stronach jednoplikowych i prototypach bywa to wygodne, a obok zostaw zwykły plik pod adresem /favicon.ico, bo po niego sięga robot Google [3].
Next.js
Next.js z App Routerem rozpoznaje ikony po nazwie pliku i sam dokłada odnośniki do sekcji head [7]:
- app/favicon.ico — wyłącznie w katalogu app/ i wyłącznie w rozszerzeniu .ico
- app/icon.png — ikona PNG; pod tą nazwą działa też .jpg i .svg, a kolejne warianty numerujesz jako icon1.png, icon2.png
- app/apple-icon.png — odpowiednik pliku apple-touch-icon.png; ta nazwa przyjmuje .png, .jpg i .jpeg
Ikony 192 i 512 pikseli zostaw w katalogu public/ i wskaż je w manifeście. Możesz też opisać komplet w layout.tsx, w obiekcie metadata.icons.

Jak favicon zachowuje się w wynikach wyszukiwania Google?

Google pokazuje ikonę strony obok jej nazwy w wynikach wyszukiwania, na telefonie i na komputerze. Żeby ją pobrać, musi mieć do niej dostęp: Googlebot indeksujący obrazy potrzebuje możliwości zindeksowania samego pliku ikony, a zwykły Googlebot — strony głównej [3]. Zostaw więc katalog z ikoną poza regułami blokującymi w pliku robots.txt.

Na efekt podmiany trzeba trochę poczekać: dokumentacja mówi wprost, że ponowne zindeksowanie potrwa od kilku dni do kilku tygodni [3]. Google zaznacza przy tym, że pojawienie się favikony w wynikach zależy od jego decyzji, nawet gdy wszystkie wytyczne są spełnione.

Sama ikona należy do warstwy prezentacyjnej wyniku i dokumentacja wyszukiwarki opisuje ją właśnie w ten sposób. Realnie działa na rozpoznawalność: w kolumnie wyników i wśród kilkunastu otwartych kart to często jedyny kolorowy element, po którym użytkownik odróżnia Twoją stronę od pozostałych.

Źródła

Favicon — Wikipedia
Web Application Manifest — W3C
Definiowanie favikony strony internetowej na potrzeby wyników wyszukiwania — Centrum wyszukiwarki Google
Customizer — Tożsamość witryny — WordPress
SVG favicons — Can I use
Ustawienia szablonu — obraz ikony Favicon — Shopify Help Center
favicon, icon i apple-icon — Next.js

Wszystkie wartości w tabelach wyliczyliśmy z definicji jednostek i sprawdziliśmy rachunkowo przed publikacją. Dane historyczne i nazwy lokalnych jednostek opieramy na źródłach wymienionych wyżej.

Ostatnia aktualizacja treści: 7 września 2026 · przygotował i sprawdził zespół Arteon

Najczęstsze pytania o generator favicon

Ile plików wystarczy zwykłej stronie firmowej?

Trzy: favicon.ico, favicon-32x32.png i apple-touch-icon.png. Pierwszy obsługuje kartę przeglądarki i wyniki wyszukiwania, drugi ekrany o podwyższonej gęstości, trzeci ekran główny na iPhonie. Dwie największe ikony przydadzą się w chwili, gdy zechcesz udostępnić stronę jako aplikację webową.

Czy favicon musi być kwadratowy?

Google wymaga proporcji 1:1 [3], a WordPress przy ikonie witryny również oczekuje kwadratu [4]. Generator pilnuje tego za Ciebie: obraz o dowolnych proporcjach wpisuje w kwadrat w całości i dopełnia go wybranym tłem, więc każdy z sześciu plików wychodzi kwadratowy.

Dlaczego przeglądarka wciąż pokazuje starą ikonę?

Przeglądarka przechowuje ikony w pamięci podręcznej dłużej niż resztę strony. Otwórz sam adres pliku, na przykład /favicon.ico, i odśwież go z pominięciem pamięci podręcznej, kombinacją Ctrl + F5. Możesz też dopisać do odnośnika numer wersji, na przykład /favicon.ico?v=2 — dla przeglądarki jest to wtedy nowy adres.

Czy favicon wpływa na pozycję strony w Google?

Dokumentacja wyszukiwarki opisuje favikonę jako element wyglądu wyniku wyszukiwania [3]. Wpływ na samą pozycję jest pośredni i dotyczy tego, jak szybko użytkownik rozpozna Twoją markę w kolumnie wyników.

Co dokładnie znajduje się w pliku favicon.ico z tego generatora?

Trzy obrazy tej samej grafiki: 16 × 16, 32 × 32 i 48 × 48 pikseli, każdy zapisany wewnątrz kontenera ICO w formacie PNG. Przeglądarka i system wybierają z pliku wersję pasującą do miejsca, w którym rysują ikonę.

Czym jest ikona maskable i jaki obszar jest w niej bezpieczny?

To ikona przygotowana pod maski systemowe Androida, który przycina ją do koła, kwadratu z zaokrąglonymi rogami albo kropli. Specyfikacja manifestu gwarantuje widoczność koła o promieniu dwóch piątych krótszego boku, wyznaczonego od środka obrazu [2]. Znak umieszczony w tym obszarze przetrwa każdy kształt maski.

Gdzie na serwerze położyć pobrane pliki?

W katalogu głównym strony, obok pliku startowego. Przeglądarki sprawdzają adres /favicon.ico samodzielnie, nawet bez odnośnika w kodzie, a pozostałe ikony znajdą po wierszach z sekcji head pokazanych wyżej w zakładce HTML.

Czy mogę pobrać tylko jeden plik z zestawu?

Tak. Każdy wiersz na liście wyników ma własny przycisk Pobierz, więc zapiszesz pojedynczą ikonę wtedy, gdy aktualizujesz na stronie tylko jeden rozmiar. Przycisk Pobierz nad listą zapisuje cały zestaw naraz.

Jaki obraz przyjmuje generator i co się dzieje z moim plikiem?

Pole Dodaj obraz bazowy przyjmuje pliki PNG, JPG/JPEG oraz SVG. Cała praca dzieje się w Twojej przeglądarce: obraz wczytuje się do pamięci karty, tam powstają wszystkie ikony i stamtąd trafiają na dysk. Przycisk Wyczyść usuwa obraz i wyniki od razu, a zamknięcie karty robi to samo.

Pomóż nam ulepszyć narzędzia

Masz pomysł na nową funkcję, znalazłeś błąd lub chcesz zaproponować inne narzędzie, które ułatwiłoby Twoją pracę? Napisz do nas – odpowiadamy w ciągu 24 godzin.