PNG → ICO
Generator favicon
Utwórz z jednego obrazu wszystkie ikony, których potrzebuje strona: favicon.ico, Apple touch icon, ikony aplikacji i kod HTML do wklejenia. Wszystko dzieje się w przeglądarce.
Upuść tutaj logo lub ikonę PNG, JPG lub SVG. Najlepiej sprawdza się obraz kwadratowy. apple-touch-icon.png · 180
icon-192.png · 192
icon-512.png · 512
Wklej w sekcji <head> swojej strony
Działa w przeglądarce · pliki zostają na twoim urządzeniu
Jak zrobić favicon w generatorze
- Dodaj logo lub ikonę. PNG, JPG lub SVG. Najlepiej sprawdza się kwadratowy obraz o prostym kształcie.
- Dostosuj margines, narożniki i tło. Dodaj odstęp wokół ikony, zaokrąglij narożniki i wypełnij tło, jeśli logo jest ciemne na przezroczystym tle.
- Sprawdź karty przeglądarki. Podgląd pokazuje ikonę w jej rzeczywistym rozmiarze 16 px na jasnej i na ciemnej karcie.
- Pobierz ZIP i wklej kod HTML. Wgraj pliki do katalogu głównego strony i wklej znaczniki w sekcji
<head>.
Co tworzy generator favicon
| Plik | Rozmiar | Gdzie jest używany |
|---|---|---|
| favicon.ico | 16, 32 i 48 px | Karty przeglądarki, zakładki, skróty w Windows i każde narzędzie, które pobiera /favicon.ico |
| icon.svg | Skalowalny | Nowoczesne przeglądarki, gdy obraz źródłowy jest plikiem SVG |
| apple-touch-icon.png | 180 px | Skróty na ekranie początkowym iPhone'a i iPada |
| icon-192.png i icon-512.png | 192 i 512 px | Android i zainstalowane aplikacje webowe, wymienione w manifeście |
| manifest.webmanifest | – | Wskazuje przeglądarkom, gdzie są ikony aplikacji |
Ikony 192 i 512 px odpowiadają przykładowi manifestu aplikacji internetowej z serwisu web.dev. Apple touch icon zawsze dostaje jednolite tło, bo iOS wyświetla przezroczyste obszary jako czarne.
Generator favicon z PNG lub innego obrazu
Zacznij od najczystszej wersji logo, jaką masz. Na karcie przeglądarki favicon ma 16 na 16 pikseli, więc drobny tekst i cienkie linie znikają. Wiele marek używa tylko swojego symbolu albo pierwszej litery. Jeśli obraz źródłowy nie jest kwadratowy, generator wyśrodkowuje go na kwadratowym płótnie z przezroczystymi marginesami.
Użyj suwaka marginesu, gdy logo dotyka krawędzi, i wypełnij tło, gdy logo jest ciemne na przezroczystym tle, żeby pozostało widoczne na ciemnych kartach przeglądarki.
Generator favicon z pliku SVG
Jeśli upuścisz plik SVG, zestaw zawiera go jako icon.svg, a kod HTML dodaje go jako dodatkową ikonę. Przeglądarki, które obsługują favicony w SVG, używają go w każdym rozmiarze, a pozostałe sięgają po favicon.ico. Ikony PNG są rysowane z wektora, więc wychodzą ostre.
Favicon z generatora w wynikach Google
Google może wyświetlać favicon obok wyników wyszukiwania. Wytyczne wymagają kwadratowej ikony o boku co najmniej 8 pikseli i zalecają ikonę większą niż 48 na 48 pikseli (Google Search Central). Spełniają to rozmiar 48 px w pliku favicon.ico i ikona 192 px. Więcej szczegółów znajdziesz w poradniku o rozmiarach favicon.