Polski
Twórz favikony z obrazu, tekstu lub emoji: wszystkie rozmiary i kod HTML do wklejenia.
Ostatnia aktualizacja
Coddy uczy cię przez pisanie prawdziwego kodu w przeglądarce: interaktywne lekcje, natychmiastowa informacja zwrotna i pomoc AI, gdy utkniesz.
*Favicon* to malutka ikona, która pojawia się w kartach przeglądarki, zakładkach, historii i na ekranie głównym iOS / Androida, gdy ktoś zapisze twoją stronę. To drobiazg, który zaskakująco mocno wpływa na odbiór projektu: prawdziwy favicon to różnica między kwadratem zastępczym a gotowym produktem.
Nowoczesne przeglądarki wymagają favicon w kilku różnych rozmiarach i formatach. Ikony kart i zakładek to PNG 16×16 lub 32×32. Safari na iOS chce apple-touch-icon.png 180×180. Opcja Dodaj do ekranu głównego w Androidzie chce 192×192 i 512×512 w manifeście aplikacji webowej. Stare przeglądarki i niektóre integracje wciąż oczekują wielorozdzielczościowego favicon.ico. Ręczne przycinanie każdego z nich po kolei to mnóstwo żmudnej pracy, a generator favicon robi to jednym kliknięciem.
Ten generator działa w całości w przeglądarce. Wgrany obrazek jest dekodowany lokalnie do <canvas>, obok renderowany jest każdy rozmiar wyjściowy, a cała paczka (PNG, ICO, manifest, README i fragment HTML) trafia do pliku .zip bez wysyłania czegokolwiek.
favicon.ico to format kontenera, który może zawierać kilka rozmiarów (16, 32, 48), więc starsze programy zawsze znajdą to, czego potrzebują.apple-touch-icon.png i wpisów w manifest.webmanifest). Oba powinny być obecne.Użyj trybu **Tekst** dla monogramu z 1-3 znaków, **Emoji** dla ikony z jednego znaku albo **Obraz**, aby wrzucić PNG, JPEG lub SVG. Tryb obrazu to najlepszy punkt wyjścia, jeśli masz już logo.
Wybierz kolor tła (i kolor tekstu dla monogramów). Wybierz **Kwadrat**, **Zaokrąglony** lub **Koło**. Zaokrąglone kwadraty pasują do tego, jak iOS przycina ikony na ekranie głównym, więc wyglądają natywnie.
Nazwa strony staje się metatagiem application-name i polem short_name w manifest.webmanifest PWA. Użyj nazwy marki, którą użytkownicy zobaczą w zakładce przeglądarki.
Przewiń rząd podglądu, aby upewnić się, że ikona jest czytelna przy 16px i 32px (w kartach). Jeśli projekt traci czytelność w tak małym rozmiarze, uprość źródło: mniej znaków albo ciaśniejsze kadrowanie.
Kliknij **Pobierz paczkę favicon (.zip)**, aby dostać wszystkie pliki naraz. Umieść pliki w katalogu głównym strony, a potem wklej fragment HTML do <head>. Gotowe.
Każde pobranie zawiera poniższe pliki. Fragment HTML je podpina. Jeśli potrzebujesz tylko części, zachowaj te, które pasują do obsługiwanych przez ciebie platform.
| Plik | Rozmiar | Używany przez | Uwagi |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Karty przeglądarki (zapasowo dla starszych) | Wielorozdzielczościowy kontener ICO. Każda przeglądarka nadal odpytuje ten adres. |
favicon-16x16.png | 16×16 | Ikona karty przeglądarki | Używany na ekranach o wysokiej gęstości przez <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | Karta przeglądarki + zakładki | Główna ikona karty na ekranach retina. |
favicon-48x48.png | 48×48 | Kafelek strony w Windows, pasek zadań | Zawarty także w favicon.ico dla starszych programów. |
apple-touch-icon.png | 180×180 | Dodaj do ekranu głównego w Safari na iOS | Bez niego iOS używa zrzutu ekranu strony, więc zawsze go dołączaj. |
android-chrome-192x192.png | 192×192 | Ekran główny Androida | Wskazywany w manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | Monit instalacji PWA + ekran startowy | Wymagany dla instalowalnych PWA. |
site.webmanifest | - | Metadane instalacji PWA | Zawiera ikony, nazwę i kolor motywu. Podpinany przez <link rel="manifest">. |
Wpisz 1-3 litery (np. **Co**, **C** lub **JS**), wybierz kolor marki i zaznacz **Zaokrąglony**, aby uzyskać kształt przyjazny dla iOS.
Monogramy są najczytelniejsze przy 16px, bo nie ma w nich szczegółów do zgubienia. Użyj pogrubionej wielkiej litery lub ciasnej pary dwóch liter i zadbaj o wysoki kontrast koloru tekstu i tła.
Wybierz emoji pasujące do klimatu projektu: 🚀 dla premiery, 🧪 dla eksperymentu, 📚 dla dokumentacji. Ustaw neutralne tło.
Favicony z emoji dodają lekkości stronom osobistym, hackathonom i projektom pobocznym. Pamiętaj, że to samo emoji wygląda inaczej na macOS (Apple) i Windows (Segoe). Po eksporcie paczka zamraża wygląd z macOS / Linuksa / Chrome, który widzisz w podglądzie.
Wrzuć PNG lub SVG swojego logo, zwiększ suwak **Margines**, aby grafika nie dotykała krawędzi, i włącz **Wypełnij tło kolorem za obrazem**, jeśli logo ma przezroczyste krawędzie.
Pliki SVG renderują się ostro w każdym rozmiarze. PNG też działają, ale powyżej natywnej rozdzielczości stają się rozmyte, więc zacznij od źródła o rozmiarze co najmniej 512×512.
apple-touch-icon.png. Jeśli nie ma zadeklarowanej ikony Apple touch, iOS użyje zrzutu ekranu strony, który zwykle wygląda okropnie.<link rel="icon" href="/images/favicon.ico">. To działa, ale przeglądarki i tak sprawdzają /favicon.ico w katalogu głównym. Umieść tam też kopię albo pogódź się z błędami 404 w logach.favicon.ico?v=2) albo wyczyść pamięć podręczną strony.favicon.ico (16/32/48), PNG 32×32, apple-touch-icon.png 180×180 dla iOS oraz PNG 192×192 i 512×512 zadeklarowanych w site.webmanifest dla Androida i instalowalnych PWA. Paczka pobierana przez to narzędzie zawiera je wszystkie.<link rel="icon" type="image/png">. Wszystkie obsługują też starszy adres /favicon.ico. Favicony SVG działają w nowoczesnych przeglądarkach i pozwalają jednemu plikowi skalować się ostro do każdego rozmiaru. Są świetne, jeśli logo jest już wektorowe, ale Safari na iOS nadal potrzebuje zapasowego PNG.Cmd/Ctrl + Shift + R), wyczyść dane strony w DevTools albo zmień parametr zapytania w adresie favicon (/favicon.ico?v=2). CDN przed stroną zwykle też wymaga wyczyszczenia./apple-touch-icon.png. Paczka ją zawiera.<canvas>, a wszystkie wyniki (PNG, ICO, ZIP, manifest) powstają lokalnie. Nic nie opuszcza twojego komputera.