Generator faviconów

Stwórz komplet faviconów z jednego obrazu: ikony dla przeglądarek, urządzeń mobilnych i zakładek. Szybko, w przeglądarce i za darmo.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Generator Faviconów

Z jednego obrazka zrobisz paczkę faviconów i manifest.

Wgraj obraz (PNG/JPG/WEBP). Narzędzie wygeneruje standardowe rozmiary faviconów, plik site.webmanifest oraz paczkę ZIP do pobrania.

Wskazówka: najlepszy efekt daje kwadratowy obraz w wysokiej rozdzielczości.

Dane wejściowe

Obraz źródłowy

Nazwa aplikacji (opcjonalnie)

Kolor motywu (opcjonalnie)

Kolor tła (opcjonalnie)

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Generator faviconów — twórz ikony dla swojej strony internetowej

Generator faviconów tworzy kompletny pakiet ikon dla stron internetowych: favicon.ico, PNG różnych rozmiarów, ikony iOS/Android i SVG favicon. Prześlij logo lub obrazek — wygeneruj gotowy pakiet faviconów z kodem HTML do wklejenia.

Co to jest favicon?

Favicon (ang. "favorites icon" — ikona zakładek) to mała ikona identyfikująca stronę internetową wyświetlana w: zakładce przeglądarki (obok tytułu strony), pasku zakładek (Bookmarks/Ulubione), historii przeglądarki, wynikach wyszukiwania Google (jako "site icon"), skrótach na pulpicie i ekranie startowym mobilnym, liście aplikacji Progressive Web App (PWA). Dobrze zaprojektowany favicon wzmacnia rozpoznawalność marki i profesjonalizm strony.

Rozmiary i formaty faviconów

Kompletny pakiet faviconów obejmuje: favicon.ico — klasyczny format, zawiera kilka rozmiarów (16×16, 32×32, 48×48 px), obsługiwany przez wszystkie przeglądarki. favicon-16x16.png — miniaturka dla nowoczesnych przeglądarek. favicon-32x32.png — dla retina displays. apple-touch-icon.png — 180×180 px, dla iOS urządzeń (Safari, dodawanie do ekranu głównego). android-chrome-192x192.png — dla Androida (PWA). android-chrome-512x512.png — wysoka rozdzielczość dla PWA splash screen. safari-pinned-tab.svg — monochromatyczna ikona SVG dla Safari pinned tabs. site.webmanifest — manifest PWA definiujący ikony i motyw.

Kod HTML do wklejenia w head

Po wygenerowaniu faviconów, wklej ten kod w sekcji <head> HTML: <link rel="icon" type="image/x-icon" href="/favicon.ico"> (klasyczne), <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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">, <link rel="manifest" href="/site.webmanifest">. Generator tworzy gotowy blok kodu HTML do wklejenia.

Projektowanie dobrego faviconu

Zasady projektowania czytelnego faviconu: Prostota — favicon jest wyświetlany w 16×16 px, więc musi być czytelny w miniaturze. Unikaj drobnych szczegółów, małego tekstu i cienkich linii. Kolory — użyj maksymalnie 2–3 kolorów. Wysoki kontrast poprawia czytelność. Symbol, nie logo — najlepsze favicony to uproszczona wersja logo lub inicjał marki (G = Google, F = Facebook). Tło — transparentne tło PNG lub kolorowe pasujące do palety marki. Unikaj białego tła — znika na białych zakładkach. Testowanie — sprawdź favicon w wielu rozmiarach (16, 32, 192 px) i na ciemnym tle (dark mode).

Najczęściej zadawane pytania

Jak dodać favicon do strony HTML?

Najprostszy sposób: umieść favicon.ico w katalogu głównym serwera — przeglądarka automatycznie go pobierze. Dla pełnej kontroli: <link rel="icon" href="/favicon.ico"> w sekcji head. Dla SVG favicon (nowoczesne przeglądarki): <link rel="icon" href="/favicon.svg" type="image/svg+xml">. Dla iOS: <link rel="apple-touch-icon" href="/apple-touch-icon.png">.

Jak dodać favicon do WordPress?

WordPress 4.3+: Wygląd → Dostosuj → Tożsamość strony → Ikona witryny. Prześlij obraz min. 512×512 px — WordPress automatycznie przeskaluje do potrzebnych rozmiarów i wygeneruje kod HTML. Alternatywnie: wtyczka "Favicon by RealFaviconGenerator" obsługuje kompletny pakiet faviconów dla wszystkich platform.

Dlaczego favicon nie aktualizuje się po zmianie?

Przeglądarki agresywnie cachują favicony. Aby wymusić odświeżenie: dodaj parametr wersji do URL: <link rel="icon" href="/favicon.ico?v=2">, wyczyść cache przeglądarki (Ctrl+Shift+Del → zaznacz cached images and files), w Chrome: F12 → Sieć → prawy klik → "Wyczyść cache i mocno przeładuj". Zmiany favicon widać u nowych użytkowników natychmiast, u powracających po wygaśnięciu cache.

Jaki format favicon jest najlepszy — ICO, PNG czy SVG?

Zalecane podejście 2024: Użyj SVG jako podstawowego (nowoczesne przeglądarki), z fallback na ICO dla starszych. <link rel="icon" href="favicon.svg" type="image/svg+xml"> + <link rel="icon" href="favicon.ico" sizes="any">. SVG zalety: skalowalny do dowolnego rozmiaru bez utraty jakości, obsługuje dark mode (@media prefers-color-scheme), mały rozmiar pliku. ICO: obsługiwany przez absolutnie wszystkie przeglądarki, w tym IE11.

Jak stworzyć favicon który dostosowuje się do dark mode?

SVG favicon z dark mode: <svg xmlns="..." viewBox="0 0 100 100"><style>@media (prefers-color-scheme: dark) { .icon { fill: white } } .icon { fill: black }</style><circle class="icon" cx="50" cy="50" r="40"/></svg>. Generator obsługuje opcję tworzenia SVG z wariantem dark mode — ikona automatycznie zmienia kolor zależnie od ustawień systemowych przeglądarki.