Generowanie favicon i ikon aplikacji dla Twojej strony

Opublikowano 2026-02-27 · 2 min czytania

#Favicon #PWA #Design

Każdy poważny projekt potrzebuje czytelnego favicona w karcie przeglądarki, ikony Apple touch dla iOS oraz ikon aplikacji dla Androida i PWA. To narzędzie pomaga wygenerować je z jednego obrazu: wgraj kwadratowe logo, wybierz rozmiary, pobierz PNG i skopiuj fragment HTML do swojej strony.

Dlaczego favicon i ikony aplikacji są ważne

Favicon — mała ikona w karcie przeglądarki i zakładkach. Bez niej karta wygląda anonimowo, a Twoja marka jest mniej rozpoznawalna.
Ikona Apple touch — używana, gdy użytkownik dodaje stronę do ekranu głównego na iPhone i iPad. Odpowiedni rozmiar (np. 180×180) daje ostrą ikonę.
Ikon PWA / Android — potrzebne do „Dodaj do ekranu głównego” i instalacji. Typowe rozmiary: 192×192 i 512×512.

Jeden kwadratowy obraz źródłowy może to wszystko zapewnić. Generator działa w całości w przeglądarce: Twoje logo nie opuszcza urządzenia.

Zalecany obraz źródłowy

Użyj kwadratowego obrazu (PNG lub SVG) o wymiarach co najmniej 512×512 pikseli. Wyższa rozdzielczość jest w porządku; narzędzie przeskaluje. Unikaj zbyt małych lub zniekształconych obrazów, aby ikony były ostre na ekranach o wysokiej gęstości pikseli.

Szybki start z narzędziem

Wgraj — Kliknij „Wybierz plik” i wybierz logo (PNG lub SVG, kwadratowe, 512×512 lub większe).
Tło — Wybierz kolor tła, jeśli logo ma przezroczystość; jest też używany jako theme-color we fragmencie.
Rozmiary — Zaznacz potrzebne rozmiary (favicon 16/32, Apple 180, PWA 192/512 itd.).
Pobierz — Kliknij podgląd, aby pobrać dany rozmiar w PNG, lub „Pobierz wszystko jako ZIP”, aby dostać wszystko naraz.
Fragment — Skopiuj blok HTML i wklej do <head> strony. Wgraj PNG na serwer (np. /assets/icons/) i w razie potrzeby dostosuj ścieżki we fragmencie.

Gdzie umieścić pliki

Typowy układ:

Umieść PNG favicona i ikon w folderze np. /assets/icons/ lub w katalogu głównym.
Zaktualizuj fragment tak, aby wartości href wskazywały te ścieżki (np. /assets/icons/favicon-32x32.png).
Dodaj site.webmanifest dla PWA z tymi samymi ścieżkami do ikon 192×192 i 512×512.

Podsumowanie

Generator favicon i ikon aplikacji pozwala z jednego logo uzyskać wszystkie potrzebne rozmiary i gotowy fragment do wklejenia w <head>. Użyj kwadratowego obrazu w dobrej rozdzielczości, pobierz PNG i wstaw fragment do projektu.