Jak używać
- Wybierz Tekst lub emoji i wpisz od jednego do trzech znaków albo wybierz Obraz i dodaj logo. Najlepiej działa kwadratowy PNG o rozmiarze co najmniej 512 px.
- Wybierz kolory i kształt, czyli kwadrat, zaokrąglenie albo koło.
- Sprawdź podgląd w rozmiarach 16, 32, 64 i 128 px.
- Pobierz ZIP, wgraj pliki do katalogu głównego witryny i wklej kod HTML do sekcji head.
Opis opcji
- favicon.ico
- Zawiera wersje 16, 32 i 48 px dla przeglądarek, zakładek i skrótów Windows.
- apple-touch-icon.png
- Obraz 180 × 180 px z jednolitym tłem, używany po dodaniu witryny do ekranu iPhone'a lub iPada.
- icon-192.png i icon-512.png
- Pliki wskazywane w site.webmanifest dla ekranów głównych Androida i instalowanych aplikacji internetowych.
- icon.svg
- Skalowalna ikona dla współczesnych przeglądarek, dołączana przy źródle tekstowym lub pliku SVG.
Kod HTML
Po wgraniu plików do katalogu głównego witryny dodaj do sekcji head każdej strony:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Najczęściej zadawane pytania
Które pliki są naprawdę potrzebne?
favicon.ico w katalogu głównym obsługuje wszystkie przeglądarki. Dodaj apple-touch-icon.png dla iOS oraz manifest z ikonami 192/512, jeśli witryna ma być instalowana na Androidzie.
Dlaczego favicon jest rozmazany w rozmiarze 16 px?
Drobne szczegóły znikają przy 16 × 16 pikselach. Użyj pogrubionej litery albo uproszczonego znaku logo zamiast pełnego logo z tekstem.
Zmieniłem favicon, ale nadal widzę starą.
Przeglądarki długo przechowują favicony w pamięci. Wykonaj twarde odświeżenie albo dodaj do odnośnika parametr wersji, na przykład /favicon.ico?v=2.
Czy emoji może być faviconą?
Tak. Emoji są rysowane czcionką emoji systemu, więc wynik odpowiada podglądowi.
Prywatność
To narzędzie działa w całości w przeglądarce. Twoje pliki i tekst są przetwarzane na Twoim urządzeniu i nigdy nie trafiają na nasze serwery.