Jak korzystać: Generator favicon
- 1
Wybierz źródło
Wgraj logo lub obraz o rozmiarze do 25 MB, wpisz od jednej do trzech liter w jednej z 11 czcionek albo wybierz emoji.
- 2
Zaprojektuj ikonę
Wybierz jedną z 12 opcji kształtu, od braku kształtu lub zwykłego kwadratu po ciastko czy koniczynę, a do tego kolor tła lub przezroczystość, margines i promień narożników.
- 3
Sprawdź każdy rozmiar
Zobacz podgląd ikony od 16 do 192 pikseli, na jasnych i ciemnych kartach przeglądarki oraz w bezpiecznym obszarze ikon maskable z Androida.
- 4
Pobierz i zainstaluj
Zapisz plik favicon.zip, rozpakuj go do folderu swojej strony i wklej wygenerowany kod HTML do sekcji head.
Limity i Pro
Bez limitu zestawów ikon z tekstu lub emoji; obrazy do 25 MB, po jednym naraz. Każdy zestaw zawiera 10 plików.
Plan Pro zwiększa limit wgrywanych obrazów z logo do 4 GB. Zobacz Pro
O narzędziu: Generator favicon
Generator favicon tworzy z jednego projektu kompletny zestaw ikon, jakiego potrzebuje nowoczesna strona. Archiwum ZIP zawiera plik favicon.ico z obrazami 16, 32 i 48 px, osobne pliki PNG 16, 32 i 48 px, ikonę apple-touch-icon 180 px z nieprzezroczystym tłem (iOS sam dodaje zaokrąglone narożniki), ikony Android Chrome 192 i 512 px, ikonę maskable 512 px, której zawartość mieści się w bezpiecznym obszarze 80%, plik site.webmanifest z nazwą aplikacji, nazwą skróconą i kolorem motywu oraz gotowy do wklejenia fragment HTML ze znacznikami link i theme-color. Wszystkie pliki PNG są optymalizowane bezstratnie.
Wgrane obrazy są skalowane filtrem Lanczosa, dlatego duże logo pozostaje wyraźne nawet przy 16 px, a logo SVG jest najpierw rysowane w rozmiarze 1024 px. Ikony z tekstu powstają w wybranej czcionce, a emoji w czcionce Noto Color Emoji, więc wynik wygląda tak samo w systemie każdego odwiedzającego. Jeśli ikony nie mają leżeć w katalogu głównym strony, wpisz folder, na przykład /icons/, a ścieżki we fragmencie i w manifeście dostosują się do niego.
Typowe zastosowania to nowa strona lub blog, aplikacja internetowa instalowana na ekranie głównym, wewnętrzny panel, który ma wyróżniać się wśród kart przeglądarki, albo szybka ikona zastępcza do pobocznego projektu. Drobne detale i długie słowa znikają przy 16 px, dlatego najlepiej sprawdzają się proste kształty oraz jedna lub dwie litery. Narzędzie nie hostuje plików ani nie edytuje Twojej strony – wgrywasz je samodzielnie.
Prywatność
Ikony są rysowane na kanwach w tej karcie i kodowane przez kodek PNG działający w WebAssembly w Web Workerze, więc wgrane logo nie opuszcza urządzenia. Jeśli wybierzesz jedną z czcionek Google albo źródło Emoji, przeglądarka pobierze tę czcionkę z Google Fonts dopiero po rozpoczęciu edycji; zapytanie zawiera nazwę czcionki, nigdy Twój tekst, a przy wczytywaniu strony nic nie jest pobierane.
Funkcje
Kompletny zestaw ikon
Pliki ICO, PNG w różnych rozmiarach, Apple touch icon, ikony Androida i maskable oraz manifest aplikacji w jednym archiwum ZIP.
Obraz, tekst lub emoji
Jako źródła użyj swojego logo, od jednej do trzech liter w 11 czcionkach albo dowolnego emoji.
Wyraziste kształty
Kwadrat, zaokrąglony, koło i osiem kształtów Material z regulacją marginesu i promienia narożników.
Kod HTML do wklejenia
Znaczniki link, kolor motywu i ścieżki manifestu są generowane dla wybranego folderu.