Generator favicon — favicon.ico i zestaw ikon aplikacji

Tworzy ikony we wszystkich rozmiarach — widoczne na karcie przeglądarki, ekranie głównym telefonu i w wynikach wyszukiwania — i pobiera je jako jeden plik ZIP.

Plik nie jest wysyłany na serwer — przetwarzanie odbywa się wyłącznie w przeglądarce tego urządzenia

Tekst lub emoji (1–2 znaki) Kolor tekstu

Grubość

Kształt

Wypełnienie tła Kolor tła

Margines wewnętrzny 12%

Informacje o aplikacji (site.webmanifest)

Nazwa witryny Krótka nazwa (pod ikoną na ekranie głównym, do 12 znaków) Kolor tematu (kolor paska adresu na urządzeniach mobilnych)

Moja witryna

Nowa karta

180 · iPhone

192 · Android

512

Kod HTML do wklejenia w <head>

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#3182f6">

Dotyczy sytuacji, gdy pliki z ZIP zostały wgrane do głównego katalogu witryny (/). Ten sam kod znajduje się też w head.html.

Reklama

Jak korzystać z Utwórz favicon

1Prześlij obraz albo ustaw tekst/emoji i kolor.
2Sprawdź wygląd dla każdego rozmiaru w podglądzie.
3Kliknij [Pobierz ZIP], a następnie wklej podany kod HTML do <head>.

Najczęściej zadawane pytania

Jaki obraz źródłowy jest najlepszy?

Najlepiej sprawdza się kwadratowy plik PNG lub SVG o rozmiarze min. 512×512. W małych rozmiarach proste kształty są lepiej widoczne.

Czy nie wystarczy jeden plik favicon.ico?

Wystarcza dla starszych przeglądarek, ale dla ekranu głównego iPhone'a (180px) i Androida (192 i 512px) potrzebny jest dodatkowo plik PNG.

Reklama