Grafiki: banery, memy, kolaże

Generator favicon i ikon strony

Dodaj logo albo wpisz litery, wybierz kolory i kształt, a dostaniesz komplet ikon dla przeglądarek, Google, iPhone’a i Androida w jednym pliku ZIP razem z kodem do sekcji head. Wszystko powstaje w przeglądarce.

Za darmoBez logowaniaDziała w przeglądarcePliki zostają na urządzeniu

Generator favicon przygotuje komplet ikon strony internetowej: plik favicon.ico dla przeglądarek, ikony PNG od 16 do 512 pikseli, apple-touch-icon dla iPhone’a i iPada, plik site.webmanifest dla Androida i gotowy kod HTML do wklejenia w sekcji head. Ikonę zrobisz z logo, z liter (np. inicjałów marki) albo z emoji. Podgląd pokazuje ją w prawdziwym rozmiarze - w karcie przeglądarki, w pasku adresu, w wynikach wyszukiwania i na ekranie telefonu, w jasnym i ciemnym motywie. Pliki powstają w przeglądarce, logo nie jest nigdzie wysyłane.

Generator favicon - jak używać

Wybierz źródło: litery, emoji albo obraz. Logo najlepiej wczytać jako kwadratowy PNG z przezroczystym tłem, co najmniej 512 × 512 px.
Ustaw kształt tła (kwadrat, zaokrąglony kwadrat, koło albo bez tła), kolory i margines. Patrz na podgląd w karcie przeglądarki - tam ikona ma tylko 16 pikseli i najszybciej widać, czy jest czytelna.
Wpisz nazwę strony i kolor motywu, jeśli chcesz dołączyć plik manifestu, oraz folder, w którym ikony będą leżały na serwerze (zwykle główny katalog).
Pobierz komplet jako ZIP, wgraj pliki na serwer i wklej skopiowany kod HTML przed znacznikiem </head>.

Jakie pliki są potrzebne i po co

Plik	Rozmiar	Gdzie się pojawia
favicon.ico	16, 32 i 48 px w jednym pliku	Karty i zakładki przeglądarek, pasek zadań Windows. Przeglądarki szukają go same pod adresem /favicon.ico, nawet bez kodu HTML.
favicon-192×192.png	192 × 192 px	Większe ikony w przeglądarkach i wynikach wyszukiwania, skrót na ekranie Androida (przez manifest).
apple-touch-icon.png	180 × 180 px	Ikona po dodaniu strony do ekranu początkowego iPhone’a i iPada.
favicon-512×512.png	512 × 512 px	Ekran powitalny i duże ikony aplikacji na Androidzie (przez manifest).
favicon-16×16.png, 32×32, 48×48	16-48 px	Zapasowe PNG, przydatne m.in. w programach do newsletterów i w systemach, które nie czytają ICO.
site.webmanifest	tekst JSON	Nazwa strony, kolory i ikony dla Androida oraz Chrome.

Plik ICO z generatora zawiera trzy obrazy zapisane w formacie PNG. Taki zapis obsługują Windows od wersji Vista i wszystkie współczesne przeglądarki, a plik jest wielokrotnie mniejszy niż klasyczne ICO z mapami bitowymi. Ikona dla iPhone’a ma zawsze pełne, kwadratowe tło (system sam zaokrągla rogi, a przezroczyste piksele wypełnia kolorem, którego nie wybierasz), dlatego przy opcji „bez tła” generator wstawia biel albo wybrany kolor.

Favicon w wynikach Google

Google pokazuje favicon obok adresu strony w wynikach wyszukiwania. Według pomocy Google Search Central ikona musi być kwadratowa i mieć co najmniej 8 × 8 px, ale zalecany jest rozmiar większy niż 48 × 48 px, żeby dobrze wyglądała na różnych ekranach. Google przyjmuje m.in. formaty ICO i PNG, wymaga, by robot Googlebot-Image mógł pobrać plik, a robot Googlebot - stronę główną, i zaleca stały adres ikony. Na jednej domenie (hoście) może być jedna favicon. Po zmianie ikony trzeba uzbroić się w cierpliwość: ponowne odczytanie może potrwać od kilku dni do kilku tygodni. Dlatego kod z generatora wskazuje, oprócz pliku ICO, także ikonę PNG 192 × 192 px.

Jak zaprojektować dobrą ikonę strony

Jeden znak zamiast pełnego logo. Przy 16 pikselach napis „Moja Firma” zamienia się w kreskę. Lepiej działa pierwsza litera, sygnet z logo albo prosty symbol.
Mocny kontrast. Karty przeglądarki bywają jasne i ciemne. Ikona na kolorowym tle wygląda dobrze w obu, a czarny znak bez tła zniknie w ciemnym motywie - przełącz podgląd i sprawdź.
Margines przy kole. Jeśli tło jest okrągłe albo ikona trafi na ekran telefonu, zostaw trochę miejsca wokół znaku, żeby nic nie dotykało krawędzi.
Spójność z profilami. Ten sam znak warto użyć jako zdjęcie profilowe w mediach społecznościowych - okrągłą wersję przygotujesz w narzędziu zdjęcie profilowe w kółku, a kolory marki odczytasz z logo w narzędziu paleta kolorów ze zdjęcia.

Favicon w WordPressie

WordPress ma własne ustawienie ikony witryny: w nowszych wersjach (od 6.5) znajdziesz je w menu Ustawienia, Ogólne, a w starszych w Wygląd, Dostosuj, Tożsamość witryny. Wystarczy wgrać tam plik favicon-512×512.png - WordPress sam wygeneruje mniejsze rozmiary i doda kod. Nie wklejaj wtedy dodatkowo kodu z generatora, bo strona miałaby zdublowane znaczniki. Kod HTML i plik favicon.ico przydadzą się na stronach bez WordPressa, w sklepach z własnym szablonem i w aplikacjach. Jeśli logo ma za duży plik, zmniejsz je wcześniej w narzędziu kompresja zdjęć.

Najczęstsze pytania

Jaki rozmiar powinien mieć favicon?

Klasyczny favicon.ico zawiera rozmiary 16 × 16, 32 × 32 i 48 × 48 px. Do tego potrzebne są ikony 180 × 180 px dla Apple oraz 192 × 192 i 512 × 512 px dla Androida i manifestu. Generator tworzy wszystkie naraz z jednego obrazu.

Jak zrobić favicon ICO z PNG?

Wybierz „Obraz lub logo”, wczytaj plik PNG i pobierz favicon.ico. Generator przeskaluje obraz do 16, 32 i 48 px i zapisze go w jednym pliku ICO - bez instalowania programów i bez wysyłania pliku na serwer.

Gdzie wgrać plik favicon.ico?

Najlepiej do głównego katalogu strony, tak żeby był dostępny pod adresem twojadomena.pl/favicon.ico. Jeśli trzymasz ikony w innym folderze, wpisz go w polu „Folder z ikonami na serwerze”, a kod HTML dostanie poprawne ścieżki.

Dlaczego nowy favicon się nie wyświetla?

Przeglądarki długo trzymają favicon w pamięci podręcznej. Otwórz bezpośrednio adres pliku ikony i odśwież go, sprawdź stronę w oknie prywatnym albo wyczyść pamięć przeglądarki. W wynikach Google nowa ikona pojawia się po ponownym odwiedzeniu strony przez robota, co może potrwać kilka tygodni.

Czy apple-touch-icon jest jeszcze potrzebny?

Tak, jeśli chcesz mieć ładną ikonę po dodaniu strony do ekranu początkowego iPhone’a lub iPada. Bez niego system zrobi miniaturę ze zrzutu strony. Wystarczy jeden plik 180 × 180 px z pełnym tłem.

Źródła

Google Search Central: „Define a favicon to show in search results” - wymagania dotyczące rozmiaru, formatu i indeksowania ikony (sprawdzone 20.10.2026).
Apple: Safari Web Content Guide, „Configuring Web Applications” - ikony apple-touch-icon.
web.dev i MDN Web Docs: Web App Manifest - ikony 192 × 192 i 512 × 512 px, pola name, short_name, theme_color.
Microsoft Learn: format plików ICO (ICONDIR, ICONDIRENTRY) i obrazy PNG w ikonach od Windows Vista.
WordPress.org: ikona witryny (Site Icon), zalecany kwadrat co najmniej 512 × 512 px.

Inne darmowe narzędzia

Wszystkie narzędzia · Grafiki: banery, memy, kolaże