Czy mój obraz jest wysyłany na serwer?

Nie. Wszystkie operacje wykonywane są lokalnie w przeglądarce. Obraz nie opuszcza komputera - narzędzie działa całkowicie offline po załadowaniu strony.

Jaki minimalny rozmiar powinien mieć obraz źródłowy?

Zalecamy obraz o wymiarach co najmniej 512x512 pikseli. Dzięki temu ikony w największych rozmiarach (512x512, 192x192) będą ostre i czytelne. Przy mniejszych obrazach źródłowych jakość może być niższa.

Czy mogę wygenerować tylko niektóre rozmiary ikon?

Tak. Przed wygenerowaniem możesz wybrać, które rozmiary ikon potrzebujesz. Możesz wygenerować tylko wybrane rozmiary - zaznacz te, które będą używane na stronie.

Co to jest plik site.webmanifest i czy go potrzebuję?

Plik site.webmanifest to plik konfiguracyjny dla aplikacji webowych (PWA). Zawiera informacje o ikonie, nazwie i kolorach aplikacji. Jeśli planujesz, że strona będzie działać jako aplikacja (np. dodawana do ekranu głównego telefonu), warto go wygenerować. Dla zwykłych stron nie jest wymagany.

Dlaczego warto użyć formatu SVG jako źródła?

Format SVG to grafika wektorowa, która skaluje się bez utraty jakości. Jeśli masz logo w formacie SVG, użyj go jako źródła - ikony we wszystkich rozmiarach będą ostre i wyraźne.

Jak stworzyć favicon dla strony internetowej

Wygeneruj favicon.ico i wszystkie ikony PNG (16x16, 32x32, 180x180, 512x512) z jednego obrazu. Instrukcja z opisem rozmiaru ikon, kodu HTML i wgrywania do WordPress oraz Next.js.

Co to jest favicon i do czego służy?

Favicon (skrót od favorite icon) to mała ikona, która pojawia się w kilku miejscach: na karcie przeglądarki obok tytułu strony, w zakładkach (ulubionych) oraz 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 masz kilkanaście kart w przeglądarce, favicon jest często jedynym widocznym elementem identyfikującym stronę.

Dla aplikacji webowych (PWA - Progressive Web Apps) favicon w odpowiednich rozmiarach jest niezbędny do prawidłowego wyświetlania ikony aplikacji na urządzeniach mobilnych i w sklepach z aplikacjami.

Jakie rozmiary ikon są potrzebne?

Generator tworzy zestaw ikon zgodny z aktualnymi wytycznymi (2024-2025). Każdy rozmiar ma swoje zastosowanie:

favicon.ico (32x32) - klasyczny format ikony rozpoznawany przez wszystkie przeglądarki. Wyświetla się na karcie przeglądarki w starszych systemach i jako domyślna ikona w przypadku braku innych.
16x16 PNG - najmniejsza ikona, używana w niektórych przeglądarkach na kartach oraz w interfejsie (np. obok adresu URL).
32x32 PNG - standardowy rozmiar favicon dla nowoczesnych przeglądarek. Wyświetla się na kartach i w zakładkach.
180x180 PNG (apple-touch-icon) - ikona dla urządzeń Apple (iPhone, iPad). Wyświetla się, gdy użytkownik doda stronę do ekranu głównego.
192x192 PNG - ikona dla urządzeń z Androidem i przeglądarki Chrome. Używana w manifestach PWA jako mniejsza ikona aplikacji.
512x512 PNG - największa ikona, wymagana przez manifesty PWA. Wyświetla się w ekranach startowych aplikacji i jako ikona w sklepach z aplikacjami.

Jeśli nie planujesz tworzyć PWA, wystarczą Ci: favicon.ico, 32x32 PNG i 180x180 PNG. Te trzy pliki pokryją większość przypadków użycia na stronach internetowych.

Jak korzystać z generatora?

Generowanie favicon to kilka prostych kroków:

1. Dodaj obraz źródłowy
Przeciągnij plik na pole do dodania pliku lub kliknij, żeby wybrać 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
- Auto-download - automatyczne pobieranie po wygenerowaniu
4. Wygeneruj i pobierz pliki
Kliknij przycisk 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
Kliknij przycisk „Pobierz wszystko". Wszystkie wygenerowane pliki zostaną spakowane do jednego archiwum ZIP. To najwygodniejsza opcja, gdy potrzebujesz wszystkich ikon.
Pobierz pojedyncze pliki
Każda wygenerowana ikona ma własny przycisk pobierania. Kliknij na konkretny plik, żeby pobrać tylko tę jedną ikonę. Przydatne, gdy chcesz zaktualizować tylko jeden rozmiar.

Gdzie i jak wgrać favicon?

Lokalizacja plików favicon zależy od technologii, na której oparta jest strona:

WordPress i inne CMS-y

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.

Własna strona HTML

Umieść wygenerowane pliki w katalogu głównym strony (tam, gdzie jest plik index.html). Następnie dodaj w sekcji <head> odpowiednie tagi:

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

Generator podpowiada dokładny kod HTML do skopiowania po wygenerowaniu ikon.

Next.js / React

W Next.js (App Router) umieść pliki favicon w katalogu app/ lub public/:

app/favicon.ico - automatycznie rozpoznawany przez Next.js
app/apple-icon.png - ikona dla Apple
public/ - pozostałe ikony (192x192, 512x512)

Możesz też skonfigurować ikony w pliku layout.tsx przez obiekt metadata.icons.

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. Oto kilka wskazówek:

Proste kształty i czytelne symbole

Najlepiej sprawdzają się proste logotypy, pojedyncze litery lub symbole. Unikaj złożonych grafik z wieloma detalami - przy małych rozmiarach staną się nieczytelne.

Kwadratowy format

Favicon jest kwadratowy. Jeśli źródłowy obraz ma proporcje inne niż 1:1, zostanie przycięty lub rozciągnięty. Przed generowaniem przytnij grafikę do kwadratu.

Wystarczająco duży rozmiar

Zalecamy obraz źródłowy o wymiarach co najmniej 512x512 pikseli. Mniejsze obrazy będą skalowane w górę, co może obniżyć jakość większych ikon.

Format SVG jako idealne źródło

Jeśli masz logo w formacie SVG (grafika wektorowa), użyj go. 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ść w obu przypadkach.

FAQ

Najczęściej zadawane pytania

Wypróbuj narzędzie

Teraz, gdy wiesz jak działa generator, możesz stworzyć favicon dla swojej strony. Jeśli potrzebujesz pomocy przy tworzeniu strony lub identyfikacji wizualnej - skontaktuj się z nami. Zajmujemy się tworzeniem stron internetowych i projektowaniem identyfikacji wizualnej.

Przejdź do generatora favicon Zobacz inne narzędzia