1. Dodaj obraz
Przeciągnij plik na wyznaczone pole lub wybierz grafikę z dysku. Obsługiwane formaty: PNG, JPG, SVG. Zalecany rozmiar: min. 512x512 pikseli.
Stwórz favicon.ico dla swojej strony z jednego obrazu
Wygeneruj favicon.ico i kompletny zestaw ikon PNG dla swojej strony z jednego obrazu. Całe przetwarzanie odbywa się lokalnie w przeglądarce.
Loading tool editor...
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.
Co to jest favicon i dlaczego warto go mieć?
Favicon to mała ikona, która pojawia się na karcie przeglądarki obok tytułu strony. Widzisz ją też w zakładkach, historii przeglądania i na ekranie głównym telefonu, gdy ktoś doda stronę jako skrót.
Ta niepozorna grafika pełni ważną funkcję - pomaga użytkownikom szybko rozpoznać stronę wśród wielu otwartych kart. Gdy ktoś ma kilkanaście kart w przeglądarce, favicon jest często jedynym widocznym elementem identyfikującym stronę.
Generator tworzy kompletny zestaw ikon: klasyczny plik favicon.ico dla przeglądarek, ikony PNG w różnych rozmiarach oraz apple-touch-icon dla urządzeń Apple. Jeśli tworzysz aplikację webową (PWA), możesz też wygenerować ikony 192x192 i 512x512 wraz z plikiem manifest.
Jak stworzyć favicon w 3 krokach
Generowanie favicon zajmuje kilka sekund:
2. Wybierz rozmiary
Zaznacz potrzebne rozmiary ikon. Dla zwykłej strony wystarczą: favicon.ico, 32x32 i 180x180. Dla PWA dodaj też 192x192 i 512x512.3. Pobierz pliki
Po wygenerowaniu pobierz wszystkie pliki jako ZIP lub każdą ikonę osobno. Poniżej narzędzia znajdziesz instrukcję, jak wgrać favicon na stronę.
Jakie rozmiary ikon generuje narzędzie?
Każdy rozmiar ma swoje zastosowanie:
favicon.ico (32x32)
Klasyczny format rozpoznawany przez wszystkie przeglądarki. Wyświetla się na karcie przeglądarki.
16x16 i 32x32 PNG
Standardowe rozmiary dla nowoczesnych przeglądarek. Wyświetlają się na kartach i w zakładkach.
180x180 PNG (apple-touch-icon)
Ikona dla urządzeń Apple (iPhone, iPad). Wyświetla się, gdy ktoś doda stronę do ekranu głównego.
192x192 i 512x512 PNG
Ikony dla aplikacji webowych (PWA). Wymagane przez manifest i używane w sklepach z aplikacjami.
Jeśli nie tworzysz PWA, wystarczą Ci: favicon.ico, 32x32 PNG i 180x180 PNG. Te trzy pliki pokryją większość przypadków użycia.
Co wyróżnia generator favicon?
Prywatność - pliki nie opuszczają komputera
Wszystkie operacje wykonywane są lokalnie w przeglądarce. Obraz nie jest wysyłany na żaden serwer. Po zamknięciu strony nic nie zostaje.Kompletny zestaw w jednym miejscu
Favicon.ico, ikony PNG, apple-touch-icon, ikony PWA i manifest - wszystko z jednego obrazu, w jednym narzędziu.Obsługa PNG, JPG i SVG
Możesz użyć logo w dowolnym formacie. Jeśli masz SVG - ikony będą ostre we wszystkich rozmiarach.Gotowe do użycia na stronie i w PWA
Narzędzie generuje plik manifest.json dla aplikacji webowych. Poniżej znajdziesz instrukcję wgrania ikon na stronę.
Jak korzystać z generatora favicon?
Generowanie favicon to kilka prostych kroków:
1. Dodaj obraz źródłowy
Przeciągnij plik na wyznaczone pole lub wybierz grafikę z dysku.
Obsługiwane formaty: PNG, JPG, SVG. Najlepiej sprawdza się proste logo lub ikona o wymiarach co najmniej 512x512 pikseli.
2. Wybierz rozmiary ikon
Zaznacz, które rozmiary ikon potrzebujesz.
Możesz wybrać wszystkie lub tylko niektóre. Dla zwykłej strony wystarczą: favicon.ico, 32x32 i 180x180.
3. Skonfiguruj opcje generowania
Ustaw dodatkowe opcje:
- Tło - przezroczyste lub wybrany kolor
- Manifest - plik konfiguracyjny dla PWA
- Automatyczne pobieranie - pliki pobiorą się od razu po wygenerowaniu
4. Wygeneruj i pobierz pliki
Po uruchomieniu generowania narzędzie przetworzy obraz lokalnie - nic nie jest wysyłane na serwer.
Pobierz wszystkie pliki jako archiwum ZIP lub pobierz pojedyncze ikony osobno.
Rozmiary PNG
16x1632x32180x180
Przezroczyste tło (PNG/ICO)
Kolor tła:
Opcje generowania - co robi każda z nich?
Tło (przezroczyste lub kolor)
Domyślnie generator zachowuje przezroczystość. Możesz też wybrać konkretny kolor tła.
Generuj manifest (site.webmanifest)
Plik JSON dla aplikacji webowych (PWA). Jeśli nie tworzysz PWA, ta opcja nie jest wymagana.
Jak pobrać wygenerowane pliki?
Po wygenerowaniu ikon masz kilka opcji pobierania:
Pobierz wszystko jako ZIP
Przycisk Pobierz wszystko pakuje wszystkie wygenerowane pliki do jednego archiwum ZIP. To najwygodniejsza opcja, gdy potrzebujesz pełnego zestawu ikon.Pobierz pojedyncze pliki
Każda wygenerowana ikona ma własny przycisk pobierania - można pobrać pojedynczy plik bez konieczności pobierania całego zestawu. Przydatne, gdy potrzebna jest aktualizacja tylko jednego rozmiaru.
Gdzie i jak wgrać favicon?
WordPress
Większość motywów WordPress ma wbudowaną opcję ustawiania ikony witryny. Znajdziesz ją w panelu administracyjnym:
Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny
Wgraj tam plik 512x512 - WordPress automatycznie wygeneruje mniejsze rozmiary. Jeśli chcesz mieć pełną kontrolę nad ikonami, możesz też wgrać pliki bezpośrednio do katalogu głównego strony przez FTP.
Jaki obraz źródłowy działa najlepiej?
Favicon to bardzo mała grafika - nawet 16x16 pikseli. Dlatego nie każdy obraz sprawdzi się jako źródło:
Proste kształty i czytelne symbole
Najlepiej sprawdzają się proste logotypy, pojedyncze litery lub symbole. Unikaj złożonych grafik z wieloma detalami.Kwadratowy format
Favicon jest kwadratowy. Jeśli źródłowy obraz ma proporcje inne niż 1:1, zostanie przycięty lub rozciągnięty.Wystarczająco duży rozmiar
Zalecamy obraz źródłowy o wymiarach co najmniej 512x512 pikseli. Mniejsze obrazy będą skalowane w górę.Format SVG jako idealne źródło
SVG skaluje się bez utraty jakości, więc ikony we wszystkich rozmiarach będą ostre.Kontrastowe kolory
Favicon musi być widoczny na różnych tłach (jasne karty, ciemny tryb). Wybierz kolory, które zachowują czytelność.
Favicon w wynikach wyszukiwania Google
Google wyświetla favicon obok adresu strony w wynikach wyszukiwania. Na urządzeniach mobilnych ikona witryny pojawia się w wynikach od 2019 roku. Na komputerach stacjonarnych Google zaczął pokazywać favicon od stycznia 2020. Ikona strony jest więc widocznym elementem marki w każdym wyszukiwaniu.
Wymagania Google wobec favicon są precyzyjne. Ikona musi mieć wymiary co najmniej 48×48 pikseli. Kształt powinien być kwadratowy. Obraz musi być wyraźnie widoczny na białym tle. Google odrzuca ikony o treści nieodpowiedniej lub pustej.
Robot Google indeksuje favicon niezależnie od pozostałej zawartości strony. Aktualizacja ikony w wynikach wyszukiwania może potrwać od kilku dni do kilku tygodni. Plik favicon nie może być zablokowany w robots.txt - w przeciwnym razie Google nie pobierze nowej wersji.
Profesjonalna ikona witryny zwiększa rozpoznawalność marki wśród wyników wyszukiwania. Użytkownicy szybciej identyfikują znane favicon na liście wyników. To przekłada się na wyższy współczynnik klikalności (CTR). Wyszukiwarki Bing i DuckDuckGo również wyświetlają favicon obok wyników - pełny zestaw ikon zapewnia spójny wygląd marki we wszystkich wyszukiwarkach.
Favicon jako element tożsamości wizualnej marki
Favicon to mikroelement brandingu widoczny w wielu miejscach jednocześnie. Ikona pojawia się w kartach przeglądarki, na liście zakładek, w historii przeglądania i na ekranie głównym telefonu. Gdy użytkownik ma otwartych kilkanaście kart, favicon pozostaje jedynym widocznym elementem identyfikującym stronę.
Spójność kolorystyczna między favicon a logotypem firmy wzmacnia zapamiętywanie marki. Ikona witryny powinna wykorzystywać te same kolory i kształty co główne logo. Uproszczona wersja logotypu lub jego pierwszy znak najczęściej sprawdza się najlepiej w małych rozmiarach pikseli.
W polskim e-commerce profesjonalna ikona sygnalizuje wiarygodność sklepu. Na porównywarkach cenowych takich jak Ceneo czy Skąpiec favicon wyróżnia ofertę na tle konkurencyjnych wyników. Sklepy na platformach Shoper, Sky-Shop i WooCommerce pozwalają ustawić favicon w panelu administracyjnym w sekcji ustawień wyglądu.
Firmy usługowe - od gabinetów dentystycznych po kancelarie prawne - budują zaufanie klientów już na poziomie ikony w karcie przeglądarki. Brak favicon lub domyślna ikona przeglądarki może sugerować niski poziom profesjonalizmu strony.
Favicon dla PWA i aplikacji mobilnych w Polsce
Progressive Web Apps (PWA) wymagają dodatkowych ikon wykraczających poza standardowy favicon. Plik manifest.json musi zawierać tablicę ikon z wymiarami 192×192 i 512×512 pikseli w formacie PNG.
Ikony maskable to specjalny typ ikony dla systemu Android. System przycina maskable icon do różnych kształtów - koło, kwadrat z zaokrąglonymi rogami, kropla. Strefa bezpieczna obejmuje wewnętrzne 80% powierzchni obrazu. Kluczowe elementy graficzne powinny znajdować się w tej strefie, aby uniknąć przycięcia.
Apple wymaga osobnego pliku apple-touch-icon o wymiarach 180×180 pikseli. Ten plik musi być zadeklarowany w sekcji head dokumentu HTML - system iOS nie odczytuje go z pliku manifest.
W Polsce technologia PWA zyskuje na popularności. Banki takie jak mBank i ING oferują doświadczenie zbliżone do natywnej aplikacji przez przeglądarkę. InPost i Żabka wykorzystują PWA do szybkiego dostępu z ekranu głównego telefonu.
Audyt Lighthouse w narzędziach deweloperskich Chrome sprawdza obecność i poprawność favicon oraz ikon PWA. Wynik audytu wskazuje brakujące rozmiary i nieprawidłowe deklaracje w pliku manifest.json.
Najczęściej zadawane pytania dotyczące generatora favicon
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.