Narzędzia CometWeb
Generator ikon PWA i favicon online: PNG, SVG
Z PNG lub SVG przygotuj zestaw favicon i ikon PWA lokalnie w przeglądarce
Wygenerowane warianty
Tu zobaczysz swoje logo
Po dodaniu pliku zobaczysz siedem rozmiarów. Pobierzesz tylko te, których potrzebujesz.
Co dokładnie składa się na współczesny favicon?
Dawno minęły czasy jednego favicon.ico w roocie. Dzisiaj potrzebujesz kilku wariantów: PNG w różnych rozmiarach, Apple touch icon, ikona Androida, manifest.json dla PWA.
Generator robi z jednego źródła same ikony PNG (PNG lub SVG rastrowany do bitmapy, najlepiej 512×512+) i pokazuje fragment HTML do <head>.
Wszystko w przeglądarce przez canvas API i nic nie idzie na serwer. SVG jest najpierw rysowany do canvas, potem eksportowany jako PNG.
Projektuj dla najmniejszej ikony
Sprawdź logo w podglądzie 16×16, zanim pobierzesz duże warianty. Drobny napis lub cienkie linie mogą zniknąć. W takim przypadku przygotuj uproszczony symbol zamiast zmniejszać pełny znak firmowy.
Niezbędne rozmiary
- 16×16favicon-16.png
- Zakładka przeglądarki. Prosty symbol, nie pełne logo.
- 32×32favicon-32.png
- Standardowa ikona na ekranach HiDPI.
- 180×180apple-touch-icon.png
- Ikona iOS przy dodaniu strony do ekranu głównego. Dostępna do pobrania powyżej.
- 512×512favicon-512.png
- Duża ikona PWA wskazana w manifest.json.
Generator ikon PWA przygotowuje pliki 192×192 i 512×512 z obrazu PNG lub SVG. Ten generator działa lokalnie w przeglądarce i nie wysyła obrazu na serwer.
Wgraj PNG lub SVG, ustaw tło i padding, a następnie pobierz warianty 16×16, 32×32, 48×48, 96×96, 192×192 i 512×512. Generator działa lokalnie w przeglądarce i nie wysyła obrazu na serwer.
Dla kompatybilności wstecznej często tak. Współczesne przeglądarki preferują PNG.
Wgraj kwadratowy PNG lub SVG, wybierz tło i padding, a następnie pobierz warianty ikon. Generator działa lokalnie w przeglądarce.
Najczęściej używa się ikon 192×192 i 512×512 px w manifest.json. Generator tworzy także mniejsze warianty favicon: 16×16, 32×32, 48×48 i 96×96 px.
Android nie pokazuje ikony tak, jak ją narysowałeś, tylko przycina ją do kształtu, który sam wybiera: koła, kwadratu z zaokrągleniem albo kropli. Ikona maskowalna to taka, która to przeżywa: wszystko istotne mieści się w środkowych 80%, czyli w strefie bezpiecznej ze specyfikacji, a tło jest nieprzezroczyste, bo przez przezroczystość pod maską widać to, co jest pod spodem. Bez niej Android wstawia płaską ikonę w białe kółko. Ten generator tworzy wariant maskowalny 512×512 obok zwykłych ikon.
Bo te dwie deklaracje znaczą co innego. Ikona z purpose „any" jest używana tak, jak jest, i nie dostaje adaptacyjnego traktowania na Androidzie. Ikona z purpose „maskable" jest traktowana tak, jakby miała strefę bezpieczną, więc wszystko poza Androidem rysuje ją z marginesem i mniejszą. Specyfikacja oczekuje obu wpisów i tak właśnie wygląda manifest z tego narzędzia.
Minimum 512×512. Idealnie SVG.
Safari koloruje ikonę jednym kolorem. Plik powinien być prostym SVG ze ścieżką.
Co jeszcze może Ci się przydać
Ikony gotowe? Poznaj zakres audytu SEO w Insight przed kolejną publikacją strony.