Generator favicon
Zamień obraz lub literę w pełny zestaw plików favicon wraz z kodem HTML do ich użycia.
Twoje pliki nigdy nie opuszczają Twojego urządzenia
Upuść obraz tutaj
PNG, JPEG, WebP, GIF, BMP lub AVIF. Lub przełącz poniżej na ikonę z litery.
Otwierane na tym urządzeniu. Nic nie jest przesyłane.
Jeden obraz naraz, do 50 MB i około 100 megapikseli. Ikony z liter używają 1 lub 2 znaków.
Jak stworzyć favicon
- Wybierz obraz albo przełącz na Litery i wpisz jeden lub dwa znaki w wybranych kolorach.
- Dla obrazu wybierz wyśrodkowane przycięcie do kwadratu albo dopasowanie z marginesem. Sprawdź podglądy w rozmiarach 16, 32, 48 i 180 pikseli.
- Naciśnij Utwórz pliki favicon, pobierz archiwum .zip i wklej kod HTML na swoje strony.
Co zawiera zestaw favicon
Favicon to mała ikona na karcie przeglądarki, w liście zakładek lub w wynikach wyszukiwania. Przeglądarki szukają kilku różnych plików: favicon.ico do starszych i ogólnych zastosowań, ikon PNG 16 i 32 pikseli dla kart, ikony Apple touch 180 pikseli dla ekranów głównych iPhone'a i iPada oraz ikon 192 i 512 pikseli dla Androida i instalowalnych aplikacji internetowych. Mały plik site.webmanifest wymienia ikony Androida.
To narzędzie rysuje każdy rozmiar osobno z oryginału, więc małe rozmiary są pomniejszane z pełnego obrazu, a nie powiększane z maleńkiego. Plik .ico jest zapisywany jako kontener z trzema obrazami PNG o rozmiarach 16, 32 i 48 pikseli. Ikony z liter są rysowane bezpośrednio w każdym rozmiarze, więc krawędzie pozostają ostre.
Wskazówki
- Używaj wyrazistych, prostych kształtów i mocnego kontrastu. Drobne szczegóły znikają przy 16 pikselach.
- Chcesz kwadratowy obraz z fragmentu zdjęcia? Najpierw użyj narzędzia Przytnij obraz z proporcjami 1:1.
- Potrzebujesz innych rozmiarów? Zmień rozmiar obrazu daje dowolną szerokość i wysokość.
Najczęstsze pytania
Czy mój obraz jest przesyłany?
Nie. Ikony są rysowane w przeglądarce na twoim urządzeniu, a archiwum zip jest tam też tworzone. Nic nie jest wysyłane na serwer.
Jakie pliki otrzymam?
favicon.ico (wersje 16, 32 i 48 pikseli), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 pikseli), android-chrome-192x192.png, android-chrome-512x512.png i site.webmanifest, w jednym archiwum .zip.
Gdzie umieścić pliki?
W katalogu głównym witryny, tak aby były dostępne pod adresami takimi jak /favicon.ico. Potem wklej fragment HTML pokazany po utworzeniu plików do sekcji head swoich stron.
Od jakiego obrazu zacząć?
Kwadratowy obraz o wymiarach co najmniej 512 × 512 pikseli daje najczystszy wynik, bo największa ikona ma 512 pikseli. Proste kształty znacznie lepiej znoszą zmniejszenie do 16 pikseli niż szczegółowe. Sprawdź podglądy 16 i 32 pikseli.
Jaka jest różnica między przycinaniem a marginesem?
Przycinanie bierze wyśrodkowany kwadrat z obrazu, a resztę odrzuca. Dopasowanie z marginesem zachowuje cały obraz, wyśrodkowuje go z niewielkim marginesem i wypełnia wolne miejsce kolorem tła albo zostawia je przezroczyste.
Czy plik .ico jest poprawny?
Tak. Zawiera trzy obrazy zakodowane jako PNG w rozmiarach 16, 32 i 48 pikseli, które odczytuje każda obecna przeglądarka.