Generator favicon
Przeglądarki oczekują wielu rozmiarów ikon: klasyczny favicon.ico 16×16, ikony kart 32×32, apple-touch-icon 180×180 i ikony PWA 192×192. Prześlij kwadratowe logo i pobierz kompletny zestaw — generowany lokalnie bez wysyłania zasobów marki na serwer.
Jak generować favicon
1. Prześlij kwadratowy PNG lub JPG (zalecane 512×512 lub większy).
2. Podgląd wygenerowanych rozmiarów.
3. Pobierz pakiet ikon lub pojedyncze pliki.
4. Dodaj tagi link do head HTML i umieść pliki w /public lub root strony.
Przykłady konfiguracji favicon
Nowa strona statyczna
Wygeneruj favicon.ico plus PNG 32×32 i dodaj standardowe tagi rel="icon" do layout.html.
Manifest PWA
Eksportuj PNG 192×192 i 512×512 do tablicy icons w manifest.json.
Wymiana po rebrandingu
Zamień jedno master logo i wygeneruj ponownie wszystkie rozmiary, by karty i skróty ekranu głównego pasowały.
Kiedy użyć generatora favicon
• Gdy uruchamiasz stronę i potrzebujesz wszystkich standardowych rozmiarów naraz.
• Gdy masz logo rastrowe, ale nie plik .ico w wielu rozmiarach.
• Gdy chcesz lokalnej generacji bez uploadu zasobów marki.
Kiedy ręcznie dopracować ikony
• Gdy logo jest szczegółowe — uprość do monogramu dla czytelności 16×16.
• Gdy favicon SVG wystarcza dla nowoczesnej publiczności.
• Gdy sklepy platform wymagają ściśle określonych warstwowych źródeł PSD.
Checklista tagów HTML link
Dołącz rel="icon" dla rozmiarów PNG, rel="apple-touch-icon" dla iOS i opcjonalnie manifest.json dla PWA. Umieść pliki na przewidywalnych ścieżkach (/favicon.ico nadal pomaga starym crawlerom).
Projekt pod 16×16
Drobne detale znikają w rozmiarze favicon. Używaj mocnych kształtów, wysokiego kontrastu i unikaj cienkich kresek. Wiele marek ma monogramy dla najmniejszych rozmiarów.
Cache busting po rebrandingu
Przeglądarki agresywnie cache’ują favicon. Zmień nazwy plików lub dodaj ?v=2 przy aktualizacji, by użytkownicy widzieli nowy znak.
Najczęstsze pytania
Jaki rozmiar powinien mieć obraz źródłowy?
Co najmniej 512×512 px kwadrat. Większe master lepiej skalują w dół niż powiększanie małych logo.
ICO vs favicon PNG?
Nowoczesne przeglądarki akceptują PNG; .ico pakuje wiele rozmiarów dla legacy kart Windows.
Rozmiar apple-touch-icon?
180×180 px dla skrótów iOS na ekranie głównym — PNG bez przezroczystości daje najlepsze efekty.
Przezroczyste tło?
Działa dla kart PNG; ikony iOS mogą dostać białe matte — testuj na urządzeniu.
Czy logo trafia na serwer?
Nie — skalowanie używa canvas lokalnie.
Źródło SVG?
Najpierw konwertuj SVG na PNG w wysokiej rozdzielczości, potem generuj favicon.