Generator favicon
Nie publikuj strony z domyślną ikoną karty. Prześlij jeden obraz i wyeksportuj zestaw faviconów oczekiwany przez przeglądarki, iOS, Android i PWA.
Prześlij obraz
Obsługiwane PNG, JPG i SVG. Najlepiej działa źródło 512x512 albo większe.
Podgląd strony
Snippet HTML
<!-- Add inside <head> --> <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">
Dobre praktyki favicon
Dlaczego wiele rozmiarów ma znaczenie
Przeglądarki, zakładki, przypięte karty, instalacja i skróty mobilne proszą o różne rozmiary. Pełny zestaw utrzymuje ikonę ostrą zamiast pozwalać platformom powiększać mały plik.
PNG kontra ICO
Nowoczesne przeglądarki dobrze obsługują ikony PNG. ICO nadal pomaga przy zgodności ze starszymi przeglądarkami, a PNG zwykle daje czystszą przezroczystość i prostszą obsługę zasobów.
Projektuj pod małe rozmiary
Favicon często widać w 16x16. Proste kształty, mocny kontrast i mniej detali zwykle przeżywają lepiej niż pełne logo ściśnięte do karty.
Przewodnik po ikonach platform
Przeglądarka desktopowa
Używane w kartach, zakładkach i historii przeglądarki.
iOS / iPhone
Używane, gdy strona jest dodawana do ekranu głównego. Najczęściej dobrze działa nieprzezroczysta grafika.
Android Chrome
Używane razem z web manifestem dla instalacji, splash screenów i widoku przełączania zadań.
Szybka instrukcja instalacji
Pobierz i rozpakuj
Użyj przycisku pobierania, aby wyeksportować ZIP z zasobami PNG, plikami manifestu i fragmentem do sekcji head.
Prześlij do katalogu publicznego
Umieść rozpakowane pliki tam, gdzie są publicznie dostępne, na przykład w katalogu public strony.
Dodaj kod do head
Skopiuj wygenerowany fragment do `head` dokumentu i wyczyść cache przeglądarki, aby sprawdzić nowe ikony.
Częste pytania
Co zawiera plik ZIP?
ZIP zawiera typowe favicony PNG dla przeglądarek, Apple touch icons, rozmiary ikon Android i plik `site.webmanifest`.
Czym jest site.webmanifest?
To manifest JSON, który mówi przeglądarkom, jak strona ma zachowywać się po instalacji na ekranie głównym albo uruchomieniu jak aplikacja.
Jak użyć tych ikon?
Prześlij wygenerowane pliki do katalogu publicznego i dodaj wygenerowany kod head na stronach, które mają udostępniać favicon.
Dlaczego nadal widzę starą favicon?
Przeglądarki mocno cache'ują favicony. Spróbuj twardego odświeżenia, wyczyszczenia danych strony, zmiany URL-a ikony albo testu w świeżym profilu przeglądarki.
Czy favicon powinna dokładnie odpowiadać ikonie aplikacji?
Powinna być spójna, ale nie musi być identyczna. Wiele marek używa uproszczonego znaku dla favicon i bogatszej ikony dla zainstalowanej aplikacji.