Generator favicon
Zamień logo w kompletny pakiet favicon dla swojej strony.
Działa w przeglądarce. Twoje pliki nigdy nie opuszczają urządzenia.
- ICO plus każdy rozmiar PNG
- Gotowy kod HTML
- Regulowany margines
Jak wygenerować favicon
- Przeciągnij tutaj kwadratowe logo albo obraz.
- Dostosuj margines i tło, jeśli trzeba.
- Pobierz ZIP i wklej kod HTML.
Co jest w środku pliku ZIP
| Plik | Rozmiar | Używany przez |
|---|---|---|
| favicon.ico | 16, 32 i 48 px w jednym pliku | Starsze przeglądarki, zakładki |
| favicon-16x16.png | 16 x 16 | Karty przeglądarki |
| favicon-32x32.png | 32 x 32 | Karty przeglądarki, paski zadań |
| apple-touch-icon.png | 180 x 180 | Ekran główny iPhone'a i iPada |
| android-chrome-192x192.png | 192 x 192 | Ekran główny Androida |
| android-chrome-512x512.png | 512 x 512 | Ekran powitalny i ikona aplikacji Android |
| site.webmanifest | Plik tekstowy | Mówi Androidowi, której ikony użyć |
Gdzie mają trafić te pliki
Wgraj każdy plik z ZIP do głównego folderu swojej strony, tego samego, w którym jest index.html, a nie do podfolderu. Potem wklej dostarczony kod HTML wewnątrz sekcji head każdej strony, albo do wspólnego szablonu nagłówka strony, jeśli taki istnieje.
Wskazówki dotyczące marginesu i tła
- Dodaj margines od 10 do 15 procent dla logo, które dotyka krawędzi swojego kwadratu, żeby nie wyglądało na przycięte przy rozmiarze 16 pikseli.
- Włącz wypełnienie tła, jeśli Twoje logo ma przezroczystość i wygląda dziwnie na tle własnego koloru karty przeglądarki.
- Proste logo o wysokim kontraście czyta się lepiej w 16x16 niż logo z drobnymi szczegółami albo cienkim tekstem.
Generator favicon: najczęstsze pytania
Co jest w środku pliku ZIP?
favicon.ico z rozmiarami 16, 32 i 48 pikseli, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png, dwa pliki PNG android-chrome i plik site.webmanifest.
Gdzie te pliki mają trafić?
Wgraj je do głównego folderu swojej strony, a potem wklej kod HTML do sekcji head każdej strony.
Czy mój obraz powinien już być kwadratowy?
Kwadratowe logo daje najczystszy wynik. Obrazy niekwadratowe są dopasowywane do kwadratu z marginesem, więc nic się nie rozciąga.
Co robi margines?
Dodaje puste miejsce wokół logo wewnątrz kwadratu, co sprawia, że projekt nie dotyka krawędzi przy małych rozmiarach ikony.
Czy mój obraz jest wysyłany?
Nie. Każdy rozmiar ikony jest generowany w Twojej przeglądarce, więc obraz nigdy nie opuszcza Twojego urządzenia.
Czy potrzebuję wszystkich sześciu plików, czy wystarczy favicon.ico?
Nowoczesne przeglądarki korzystają głównie z plików PNG i site.webmanifest. favicon.ico jest zachowany dla starszych przeglądarek i niektórych pasków zakładek, więc wgraj wszystkie pliki dla najszerszej obsługi.
Jaki rozmiar obrazu wybrać na start?
Co najmniej 512 na 512 pikseli. Ikona bazowa jest generowana w tym rozmiarze, więc mniejszy obraz źródłowy zostaje rozciągnięty do tego rozmiaru i może wyglądać nieostro.
Czy plik manifestu wymaga edycji?
Wygenerowany site.webmanifest zawiera tekst zastępczy w miejscu nazwy strony. Otwórz go potem w edytorze tekstu i zaktualizuj pola name oraz short_name, żeby pasowały do Twojej strony.