Strona główna / Design / Generator favicon i ikon aplikacji
Ikony i branding

Generator favicon i ikon aplikacji

Wgraj logo, zobacz podgląd ikon w wielu rozmiarach, pobierz PNG i skopiuj snippet HTML do swojej strony lub PWA.

Nie wybrano pliku
Użyj kwadratowego PNG lub SVG w dobrej rozdzielczości (zalecane min. 512×512).
Używany jako wypełnienie i jako theme-color w sugerowanym fragmencie HTML.
Wybierz, jakie rozmiary generować. Kliknij ikonę lub jej etykietę, aby pobrać dany PNG.

Podgląd ikon

Kliknij ikonę lub etykietę, aby pobrać ten rozmiar w PNG. Zapisz pliki w projekcie (np. /assets/icons).

Generator działa w całości w przeglądarce. Pamiętaj o wgraniu pobranych PNG i dopasowaniu ścieżek we fragmencie do struktury projektu.

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

  1. Wgraj — Kliknij „Wybierz plik” i wybierz logo (PNG lub SVG, kwadratowe, 512×512 lub większe).
  2. Tło — Wybierz kolor tła, jeśli logo ma przezroczystość; jest też używany jako theme-color we fragmencie.
  3. Rozmiary — Zaznacz potrzebne rozmiary (favicon 16/32, Apple 180, PWA 192/512 itd.).
  4. Pobierz — Kliknij podgląd, aby pobrać dany rozmiar w PNG, lub „Pobierz wszystko jako ZIP”, aby dostać wszystko naraz.
  5. 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.

  1. Wgraj kwadratowy obraz (PNG lub SVG, zalecane min. 512×512).
  2. Wybierz kolor tła i rozmiary ikon do wygenerowania (favicon, Apple touch, PWA).
  3. Kliknij podgląd, aby pobrać każdy PNG, następnie skopiuj fragment HTML do <head> strony.

Najczęściej zadawane pytania

Co najmniej 512×512 pikseli dla najlepszej jakości. Obrazy kwadratowe sprawdzają się najlepiej; narzędzie skaluje i wyśrodkuje logo.

Standardowe favicon: 16×16 i 32×32. Apple: 180×180. PWA: 192×192 i 512×512. Generowany fragment je zawiera.

Nie. Wszystko działa w przeglądarce. Twoje logo nie opuszcza urządzenia.

Powiązane narzędzia

Konwerter obrazów Inspektor podglądu linku Generator linków ze znacznikiem czasu YouTube Base64 Encode / Decode

To narzędzie jest udostępniane wyłącznie do użytku osobistego i edukacyjnego. Nie hostujemy ani nie przechowujemy żadnych treści ani plików multimedialnych użytkowników na naszych serwerach. Całe przetwarzanie odbywa się lokalnie w Twojej przeglądarce. Nie jesteśmy powiązani ani zatwierdzeni przez żadne wspomniane sieci społecznościowe, platformy lub firmy. Korzystaj z tego narzędzia na własną odpowiedzialność, zgodnie z regulaminem danej platformy.