← Strona główna

Generator favicon online

Wgraj logo lub obraz (najlepiej kwadratowy 512×512) - wygeneruję komplet ikon plus plik site.webmanifest, spakowane w jeden ZIP. Wszystko w przeglądarce, bez wysyłania na serwer.

Przeciągnij obraz tutaj Dotknij, aby wybrać obraz lub kliknij, aby wybrać plik · PNG / JPG / SVG · zalecane 512×512
Podgląd wgranego obrazu
- -
Przygotowywanie…
Wybierz obraz, aby rozpocząć
Instalacja

Najpierw pobierz pliki przyciskiem powyżej. Umieść je w katalogu głównym swojej strony.

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon.png
  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico
  • site.webmanifest

Następnie skopiuj poniższy fragment do sekcji <head> swojej strony:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
Czym jest generator favicon i kiedy go potrzebujesz?

Favicon to mała ikonka, która pojawia się w zakładce przeglądarki, na liście ulubionych i na ekranie głównym telefonu po dodaniu strony do skrótów. Niby detal, ale brak favicona wygląda nieprofesjonalnie i od razu widać, że strona jest „z szablonu”.

Problem w tym, że favicon to nie jeden plik. Żeby działał wszędzie poprawnie, potrzebujesz kilkunastu rozmiarów oraz pliku site.webmanifest, który mówi przeglądarkom jak wyświetlać Twoją ikonę. Ten generator robi to wszystko za Ciebie w kilka sekund.

Jak używać generatora favicon?

Wrzuć swoje logo lub ikonę w formacie PNG, JPG albo SVG. Najlepiej kwadratową, minimum 512×512 pikseli - im większy oryginał, tym ostrzejsze ikony w mniejszych rozmiarach. Kliknij pobierz i dostajesz gotowy ZIP z kompletem plików i instrukcją instalacji.

Co jest w paczce ZIP?

Gotowy zestaw zawiera favicon w rozmiarach 16×16, 32×32, ikony dla Apple Touch, ikony dla Androida oraz plik site.webmanifest. Wgrywasz pliki na serwer, wklejasz jeden fragment kodu w sekcję <head> swojej strony i gotowe.

Masz stronę na WordPressie?

W WordPress favicon ustawisz w Wygląd → Dostosuj → Tożsamość witryny. Jeśli budujesz stronę od zera i potrzebujesz pomocy przy całej konfiguracji - napisz do mnie.