Generator favikon — ICO, PNG i Apple Touch Icon
Zamień jeden obraz w kompletny zestaw favikon: favicon.ico, ikony PNG, apple-touch-icon i manifest aplikacji webowej.
Apple-touch-icon jest zawsze nieprzezroczysty. Gdy nazwa aplikacji jest pusta, manifest użyje nazwy pliku obrazu.
Podgląd
Pliki w archiwum ZIP
Jak zrobić favikonę
- Wybierz kwadratowy obraz, najlepiej o wymiarach co najmniej 512 na 512 pikseli, w formacie PNG, JPG, WebP lub SVG.
- Zdecyduj, jak dopasować obrazy niekwadratowe: contain dopełnia je kolorem tła, cover przycina od środka.
- Ustaw kolor tła i motywu, margines wewnętrzny oraz to, czy małe ikony mają zachować przezroczyste tło.
- Wpisz nazwę i krótką nazwę aplikacji, które mają trafić do manifestu, a potem sprawdź podglądy na żywo.
- Pobierz archiwum ZIP ze wszystkimi plikami albo osobno favicon.ico i apple-touch-icon.png, i skopiuj fragment HTML.
Kiedy się przydaje
- Gdy nowa strona potrzebuje favikony, a nie chcesz otwierać edytora grafiki.
- Gdy brakująca lub rozmyta favikona pokazuje się w kartach jako pusta ikona strony.
- Gdy chcesz dodać apple-touch-icon, aby strona dobrze wyglądała zapisana na ekranie głównym iPhone'a.
- Gdy przygotowujesz ikony na Androida i manifest dla aplikacji progresywnej (PWA).
- Gdy z logo chcesz zrobić równy zestaw ikon z takim samym marginesem w każdym rozmiarze.
Najczęstsze pytania
Jakie rozmiary tworzy generator?
Zapisuje favicon.ico z obrazami 16, 32 i 48 pikseli w środku, osobne pliki favicon-16x16.png i favicon-32x32.png, apple-touch-icon.png o wymiarach 180 na 180 pikseli oraz ikony Androida 192 i 512 pikseli.
Dlaczego apple-touch-icon jest zawsze nieprzezroczysty?
iOS nie pokazuje przezroczystości w ikonie na ekranie głównym, więc przezroczysty PNG dostałby czarny albo biały prostokąt w tle. Generator wypełnia ten plik kolorem tła, a małe rozmiary favikony może zostawić przezroczyste.
Co wpisać w manifeście?
Pełną nazwę strony lub aplikacji oraz krótką nazwę o długości około dwunastu znaków, bo to ona pojawia się pod ikoną na telefonie. Kolor motywu barwi pasek przeglądarki, a kolor tła wypełnia ekran startowy.
Czy mogę użyć logo w formacie SVG?
Tak. Plik SVG jest rasteryzowany na szerokość 512 pikseli, a jego proporcje pochodzą z atrybutów width i height albo z viewBox, więc kwadratowe logo pozostaje kwadratowe.
Gdzie umieścić pliki na serwerze?
Włóż je do katalogu głównego strony obok pliku index.html, aby ścieżki ze fragmentu, takie jak /favicon.ico i /site.webmanifest, działały. Jeśli trzymasz je w podfolderze, popraw wartości href we fragmencie.
Czy mój obraz jest gdzieś wysyłany?
Nie. Obraz jest dekodowany i rysowany na kanwie w Twojej przeglądarce, a archiwum ZIP powstaje w pamięci, więc nic nie trafia na serwer.