Generator favicon

Wpisz 1-2 znaki (np. inicjały firmy), wybierz kształt i kolory – gotowy favicon możesz pobrać jako SVG lub skopiować kod HTML.

Tekst (1-2 znaki)

Kolor tła

Kolor tekstu

Kształt

Styl

Podgląd

Czym jest favicon?

Favicon (skrót od favorites icon) to mała ikona wyświetlana w karcie przeglądarki, na pasku zakładek, w wynikach wyszukiwania i na ekranie głównym urządzeń mobilnych. Jest istotnym elementem identyfikacji wizualnej strony internetowej.

Wymagane formaty i rozmiary

Rozmiar	Format	Zastosowanie
16×16	ICO/PNG	Karta przeglądarki
32×32	ICO/PNG	Pasek zakładek, Windows
48×48	PNG	Windows
180×180	PNG	Apple Touch Icon (iOS)
192×192	PNG	Android Chrome
512×512	PNG	Android splash screen, PWA
Dowolny	SVG	Nowoczesne przeglądarki (skalowalny)

Formaty favikon – ICO vs PNG vs SVG

ICO (tradycyjny)

Może zawierać wiele rozmiarów w jednym pliku
Wymagany dla starszych przeglądarek (IE)
Umieszczany w katalogu głównym jako favicon.ico

PNG (nowoczesny)

Jeden rozmiar per plik
Lepsza jakość przy małym rozmiarze
Obsługuje przezroczystość (kanał alfa)

SVG (najnowszy)

Skalowalny do dowolnego rozmiaru
Obsługuje prefers-color-scheme (dark mode!)
Nie wymaga wielu plików
Wsparcie: Chrome, Firefox, Edge (brak Safari na iOS)

Jak dodać favicon do strony

Podstawowe tagi HTML

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">

Plik manifest.json (PWA)

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Gdzie umieszczać pliki favicon

/favicon.ico – katalog główny (przeglądarki szukają go automatycznie)
/apple-touch-icon.png – iOS szuka tego pliku domyślnie
/manifest.json lub /site.webmanifest – ikony PWA
Tagi <link> w <head> dokumentu HTML

Wsparcie przeglądarek

Przeglądarka	ICO	PNG	SVG	Manifest
Chrome	✓	✓	✓	✓
Firefox	✓	✓	✓	✓
Safari	✓	✓	✗	Częściowo
Edge	✓	✓	✓	✓
iOS Safari	✓	✓	✗	Częściowo

Wskazówki projektowe

Prostota – favicon jest bardzo mały, unikaj detali
Kontrast – ikona musi być widoczna na jasnym i ciemnym tle
Rozpoznawalność – użyj logo lub jego fragmentu (litera, symbol)
Testuj w małych rozmiarach – sprawdź jak wygląda w 16×16 px
Dark mode – SVG favicon może reagować na tryb ciemny za pomocą CSS media query
Unikaj tekstu – jest nieczytelny w tak małym rozmiarze

Częste błędy

Brak favicon (przeglądarka pokazuje domyślną ikonę)
Tylko format ICO bez PNG (niższa jakość na Retina)
Brak Apple Touch Icon (iOS pokaże screenshot strony)
Zbyt skomplikowana grafika (nieczytelna w 16×16)
Cache przeglądarki – po zmianie favicon dodaj ?v=2 do URL

Jeśli ten kalkulator był przydatny, sprawdź również: JSON, .htpasswd, CV i więcej kalkulatorów.

Kalkulator zawiera walidację danych wejściowych i działa lokalnie w przeglądarce. Dzięki temu możesz szybko porównać różne scenariusze bez przesyłania danych na serwer.

favicongenerator faviconikona stronyfavicon onlinefavicon svgfavicon generator

Najczęstsze pytania (FAQ)

Co to jest favicon?

Favicon to mała ikona wyświetlana w karcie przeglądarki, zakładkach i na ekranie głównym telefonu. Pomaga użytkownikom szybko rozpoznać stronę.

Jaki format favicon jest najlepszy?

SVG – skalowalny, lekki, obsługiwany przez nowoczesne przeglądarki. Dla starszych przeglądarek warto dodać też PNG 32x32 i ICO.

Jak dodać favicon do strony?

Wklej w <head>: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. Dla Apple: <link rel="apple-touch-icon" href="/icon-180.png">.

AGenerator favicon