Generator favicon
Wszystkie rozmiary favicon, prawdziwy wielorozmiarowy .ico i manifest aplikacji z jednego obrazu. Wszystko działa lokalnie — nic nie jest wysyłane.
- Wejście
- PNG · JPEG · WebP · SVG
- Wyjście
- ICO · PNG · webmanifest · ZIP
Upuść swoje logo
PNG, JPEG, WebP lub SVG. Najlepiej kwadratowe i co najmniej 512 × 512 px. Możesz też wkleić obraz.
Wszystkie pliki favicon z jednego obrazu w generatorze favicon
Ten generator favicon zamienia jedno logo w komplet plików, których strona potrzebuje dzisiaj: favicon.ico z ikonami 16, 32 i 48 pikseli w środku, ostre pliki PNG od 16 do 512 pikseli, Apple touch icon, ikony Android Chrome, site.webmanifest oraz tagi HTML do wklejenia na stronę. Dopasuj grafikę do kwadratu, dodaj margines, zaokrąglij rogi lub połóż ją na jednolitym kafelku, a potem pobierz wszystko w jednym pliku ZIP. Skalowanie i budowa ZIP-a odbywają się na Twoim urządzeniu, więc logo nigdzie nie jest wysyłane.
Jak zrobić favicon
- Upuść na stronę plik PNG, JPEG, WebP lub SVG albo go wklej. Najostrzejszy wynik daje kwadratowe logo o wymiarach co najmniej 512 × 512 pikseli lub plik SVG.
- Wybierz Dopasuj, aby zachować cały obraz z wolnym miejscem dookoła, albo Wypełnij, aby przyciąć go do kwadratu. Dodaj margines i promień zaokrąglenia, jeśli chcesz zaokrąglony kafelek.
- Wybierz kolor tła lub zostaw przezroczystość. Apple touch icon zawsze dostaje jednolite tło, bo iOS maluje przezroczyste obszary na czarno.
- Uzupełnij nazwę aplikacji i kolory manifestu, a potem naciśnij Pobierz ZIP albo pobierz pojedyncze pliki z podglądu.
- Wgraj pliki do katalogu głównego strony i wklej tagi HTML do sekcji
<head>każdej podstrony.
Jakich plików favicon naprawdę potrzebują współczesne przeglądarki?
Porady o favicon są pełne pozostałości z 2012 roku: dziesiątki rozmiarów, XML kafelków Windows i maski przypiętych kart Safari. Dzisiejsze przeglądarki szukają znacznie mniej. Cztery pliki obsługują praktycznie każdą używaną przeglądarkę, telefon i system operacyjny.
Reszta zawartości ZIP-a jest dla kompletu: pliki PNG 16, 32 i 48 pikseli dla narzędzi i systemów CMS, które pytają o nie z nazwy, oraz opcjonalny kafelek Windows 150 × 150 dla starszych przypiętych stron. Dodatkowe pliki nie szkodzą, ale nie musisz linkować ich wszystkich.
- favicon.ico
- Uniwersalna rezerwa. Przeglądarki same pobierają /favicon.ico, nawet jeśli żaden tag na niego nie wskazuje, i tak samo robią czytniki RSS, menedżery zakładek i roboty wyszukiwarek. Jeden plik zawiera wersje 16, 32 i 48 pikseli, a każda z nich to PNG w kontenerze ICO, który odczyta każda przeglądarka od czasów Windows Vista.
- icon.svg
- Wektorowy favicon, ostry w każdym rozmiarze i przy każdym powiększeniu. Chrome, Edge, Firefox i nowsze wersje Safari używają go, gdy jest podlinkowany. Dostaniesz go tylko wtedy, gdy zaczniesz od pliku SVG; obraz rastrowy nie stanie się prawdziwym wektorem.
- apple-touch-icon.png
- Nieprzezroczysty PNG 180 × 180, który iPhone i iPad pokazują, gdy ktoś doda Twoją stronę do ekranu początkowego. iOS nakłada własną zaokrągloną maskę, więc rogi powinny być kwadratowe, a tło jednolite.
- Ikony manifestu
- Pliki PNG 192 i 512 pikseli wymienione w site.webmanifest. Android używa ich do skrótu na ekranie początkowym i ekranu powitalnego zainstalowanej aplikacji webowej, a Chrome sprawdza je, zanim zaproponuje instalację strony.
Tagi HTML do wklejenia
Fragment kodu linkuje plik ICO z sizes="32x32" zamiast sizes="any". Przy "any" Chrome wybiera ICO nawet wtedy, gdy dostępny jest SVG. Jeśli wgrasz plik SVG, fragment linkuje także jego, więc przeglądarki obsługujące favicony SVG go użyją, a pozostałe wrócą do ICO. Bez SVG linkowane są zamiast tego pliki PNG 32 i 16 pikseli.
Meta tag theme-color barwi pasek przeglądarki na Androidzie i w Safari, a site.webmanifest zawiera nazwę aplikacji, kolory i duże ikony. Zostaw nazwy plików bez zmian i umieść wszystkie pliki w katalogu głównym domeny albo zmień ścieżki we fragmencie tak, by pasowały do miejsca, w którym je umieścisz.
Jak zaprojektować favicon, który przetrwa 16 pikseli
- Upraszczaj. Ikona 16 × 16 to w sumie 256 pikseli. Logotypy tekstowe i cienkie linie zamieniają się w papkę; pojedyncza litera, symbol lub sygnet bez napisu są znacznie czytelniejsze.
- Dbaj o kontrast na obu kolorach kart. Karty przeglądarki są jasne lub ciemne zależnie od motywu. Podgląd pokazuje każdy rozmiar na białym i prawie czarnym kafelku, więc ciemne logo znikające w trybie ciemnym zauważysz przed publikacją.
- W razie wątpliwości użyj kafelka. Jednolite tło z niewielkim marginesem i zaokrągleniem rogów sprawia, że cienkie lub przezroczyste logo jest widoczne na każdej karcie i wygląda celowo na ekranie początkowym.
- Zaczynaj od dużego obrazu. Obrazy są zmniejszane w krokach o połowę, co daje czyste krawędzie, ale nic nie doda szczegółów, których nie ma w źródle. Daj co najmniej 512 pikseli albo plik SVG.
- Sprawdź kolory. Jeśli kolor marki jest zbyt blady na białej lub ciemnej karcie, przetestuj go w narzędziu sprawdzania kontrastu albo przelicz wartość podaną w innym zapisie w konwerterze kolorów.
Dlaczego nic nie jest wysyłane
Większość generatorów favicon wysyła Twoje logo na serwer, żeby je przeskalować. Ten rysuje każdy rozmiar na kanwie w przeglądarce, zapisuje plik ICO bajt po bajcie w JavaScripcie i buduje ZIP-a małym modułem WebAssembly, więc obraz nigdy nie opuszcza Twojego urządzenia, a narzędzie działa offline po załadowaniu strony. Ma to znaczenie przy niewydanej jeszcze marce lub logo klienta, którego nie wolno Ci jeszcze udostępniać.
Najczęstsze pytania
- Jaki rozmiar powinien mieć favicon?
- Karty przeglądarki pokazują favicony w rozmiarze 16 × 16 pikseli CSS, czyli 32 × 32 na ekranach o dużej gęstości, dlatego ICO zawiera wersje 16, 32 i 48 pikseli. Dodaj Apple touch icon 180 × 180 oraz ikony 192 i 512 pikseli dla manifestu, a obsłużysz każdy typowy przypadek. Zacznij od obrazu o wymiarach co najmniej 512 × 512 pikseli.
- Czy nadal potrzebuję pliku favicon.ico?
- Tak. Przeglądarki, czytniki kanałów i roboty wyszukiwarek automatycznie pobierają /favicon.ico, nawet gdy żaden tag na niego nie wskazuje, a starsze przeglądarki rozumieją tylko ICO. Trzymaj go w katalogu głównym strony obok ikon SVG i PNG.
- Czy mogę użyć SVG jako favicon?
- Tak. Chrome, Edge, Firefox i nowsze Safari obsługują favicony SVG przez tag link z type="image/svg+xml". Wgraj tutaj plik SVG, a zostanie dołączony jako icon.svg obok rezerwowego ICO, a fragment HTML podlinkuje oba.
- Co to jest apple-touch-icon?
- To plik PNG 180 × 180 pikseli, którego iPhone lub iPad używa, gdy ktoś doda Twoją stronę do ekranu początkowego. Powinien mieć jednolite tło i kwadratowe rogi, bo iOS sam zaokrągla rogi i zamienia przezroczyste obszary na czarne.
- Dlaczego mój favicon się nie wyświetla?
- Przeglądarki agresywnie przechowują favicony w pamięci podręcznej, często przez kilka dni. Sprawdź, czy plik jest dostępny pod ścieżką z tagu link, a potem wymuś pełne odświeżenie lub otwórz stronę w oknie prywatnym. Zmiana nazwy pliku lub dodanie parametru wersji, np. favicon.ico?v=2, wymusza ponowne pobranie.
- Jak przekonwertować PNG na ICO?
- Upuść plik PNG na tę stronę i pobierz favicon.ico. Generator skaluje go do 16, 32 i 48 pikseli i pakuje wszystkie trzy rozmiary do jednego pliku ICO, a każdy z nich jest zapisany w kontenerze jako PNG.
- Do czego służy site.webmanifest?
- To mały plik JSON, który przekazuje Androidowi i Chrome nazwę strony, kolor motywu, kolor tła oraz ikony 192 i 512 pikseli używane po dodaniu strony do ekranu początkowego lub zainstalowaniu jej jako aplikacji.
- Czy moje logo jest wysyłane na serwer?
- Nie. Każda ikona jest rysowana i kodowana w Twojej przeglądarce, a ZIP powstaje na Twoim urządzeniu. Nic nie jest nigdzie wysyłane, a po załadowaniu strona działa także offline.