Generator favicon

Do czego służy to narzędzie

Generator favicon zamienia literę, emoji lub twoje logo we wszystkie ikony, których potrzebuje nowoczesna strona. Renderuje ikonę w każdym rozmiarze, pakuje favicon.ico, tworzy manifest aplikacji webowej i podaje tagi <link> do wklejenia w <head> strony. Wszystko pobierzesz jako jeden plik ZIP.

Rozpoczęcie od tekstu to najszybszy sposób na czystą ikonę: wpisz od jednego do trzech znaków lub emoji, wybierz kolory, czcionkę i kształt (kwadrat, zaokrąglony lub koło). Ikony tekstowe dostają też skalowalny favicon.svg, który pozostaje ostry w każdym rozmiarze i na ekranach o wysokiej gęstości pikseli.

Jak używać

1. Wybierz Tekst lub Obraz jako źródło. W przypadku obrazu naciśnij Wybierz obraz… i wskaż kwadratowy PNG, SVG lub JPG.
2. Ustaw Kształt i włącz Wypełnij tło, aby umieścić ikonę na kolorowym kafelku, lub wyłącz, aby zachować przezroczystość.
3. Wpisz Nazwę strony: to podpis pod ikoną, gdy ktoś doda twoją stronę do ekranu głównego telefonu; trafia do site.webmanifest (Android) i tagu apple-mobile-web-app-title (iOS). Następnie ustaw Folder ikon, do którego wgrasz pliki, zwykle /.
4. Sprawdź podgląd: ikona 16 px to to, co ludzie widzą na karcie przeglądarki.
5. Naciśnij Pobierz ZIP, wgraj pliki na swoją stronę i wklej HTML do <head>.

Przykład

Ustawienia domyślne dają takie tagi:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">

Wskazówki

• Przeglądarki agresywnie cache’ują favicony. Po podmianie ikony otwórz stronę w oknie prywatnym, aby zobaczyć zmianę.
• iOS ignoruje przezroczystość w Apple touch icon i wypełnia ją czernią, więc zostaw wypełnione tło, aby ikona na ekranie głównym wyglądała czysto.