Utilia
Kategorie ▾
Język: pl ▾

Generator favicon

Utwórz favicon.ico, ikony PNG, apple-touch-icon i site.webmanifest z jednego obrazu lub emoji, z gotowymi znacznikami HTML. Pobierz ZIP bez przesyłania.

Źródło

Dopasowanie
site.webmanifest

Jak zrobić favicon

  1. W sekcji Źródło wybierz Obraz lub Tekst lub emoji. - Obraz: upuść plik PNG, JPG, WebP lub SVG. Najlepiej sprawdza się kwadratowe logo o rozmiarze co najmniej 512 × 512 px. Wybierz Cały obraz, aby zmieścić je w ikonie, lub Wypełnij i przytnij, aby pokryć cały kwadrat. - Tekst lub emoji: wpisz literę, inicjały lub emoji, a potem ustaw Czcionka, Pogrubienie i Kolor tekstu.
  2. Ustaw Kolor tła albo zaznacz Przezroczyste tło. Wybierz Kształt (Kwadrat, Zaokrąglony lub Koło) oraz Margines (%), aby zostawić miejsce wokół zawartości.
  3. Opcjonalnie rozwiń site.webmanifest i wpisz Nazwa aplikacji (web manifest), Krótka nazwa, Kolor motywu oraz Adres URL folderu z ikonami (zostaw /, jeśli pliki trafią do katalogu głównego strony).
  4. Kliknij Generuj favicony. Ikony pojawią się w rzeczywistym rozmiarze obok makiety karty przeglądarki. Od tej chwili każda zmiana od razu je aktualizuje.
  5. Kliknij Pobierz ZIP, wgraj pliki na swoją stronę, a potem kliknij Kopiuj znaczniki i wklej je w sekcji <head> swoich stron.

Co zawiera archiwum ZIP

Plik Rozmiar Gdzie jest używany
favicon.ico 16, 32 i 48 px Karty przeglądarki, zakładki, starsze przeglądarki, Windows
favicon-16x16.png 16 × 16 Karty przeglądarki
favicon-32x32.png 32 × 32 Karty na ekranach o dużej gęstości pikseli, skróty na pasku zadań
apple-touch-icon.png 180 × 180 Ekran główny iPhone’a i iPada
android-chrome-192x192.png 192 × 192 Ekran główny Androida (web manifest)
android-chrome-512x512.png 512 × 512 Ekrany powitalne przy instalacji (web manifest)
site.webmanifest — Nazwa, kolory i ikony strony instalowalnej jako aplikacja
favicon-tags.html — Znaczniki HTML do wglądu

Plik ICO zawiera trzy obrazy PNG – format odczytywany przez Windows (od wersji Vista) i wszystkie aktualne przeglądarki. Ikona apple-touch-icon jest zawsze zapisywana na jednolitym tle, bo iOS wyświetla przezroczyste piksele jako czarne; przy przezroczystym tle używany jest kolor biały.

Znaczniki HTML

Wygenerowane znaczniki wyglądają tak (z twoim adresem folderu):

<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="#ffffff">

Przeglądarki same pobierają też /favicon.ico z katalogu głównego domeny, więc trzymanie go tam pomaga nawet na stronach bez tych znaczników.

Wskazówki projektowe

  • Postaw na prostotę. Przy 16 × 16 px szczegóły znikają. Najlepiej czyta się pojedyncza litera, wyrazisty symbol albo najprostsza wersja twojego logo.
  • Sprawdź podgląd w rzeczywistym rozmiarze. Ikona 16 px na makiecie karty to dokładnie to, co widzą odwiedzający.
  • Pamiętaj o trybie ciemnym. Ciemne logo na przezroczystym tle może zniknąć w ciemnym motywie przeglądarki; pomaga kolorowe tło lub niewielki margines.
  • Emoji wyglądają inaczej w każdym systemie, bo każda platforma rysuje je we własnym stylu. Pliki PNG zachowują wygląd z twojego urządzenia.

Najczęściej zadawane pytania

Jakie rozmiary powinien mieć favicon?

W praktyce: favicon.ico z rozmiarami 16, 32 i 48 px, apple-touch-icon 180 px oraz pliki PNG 192 i 512 px do web manifestu. To narzędzie tworzy je wszystkie z jednego źródła.

Czy mogę użyć logo w SVG?

Tak. Pliki SVG są rysowane w wysokiej rozdzielczości przed utworzeniem ikon. SVG wyświetlany jest jako zwykły obraz, więc jego skrypty nigdy się nie uruchamiają.

Jak zrobić favicon z emoji?

Wybierz Tekst lub emoji, wpisz lub wklej emoji, wybierz tło albo zostaw przezroczyste i wygeneruj. Wynikiem są prawdziwe pliki PNG i ICO, więc działają w każdej przeglądarce.

Dlaczego nowy favicon się nie wyświetla?

Przeglądarki bardzo agresywnie zapisują favicony w pamięci podręcznej. Odśwież stronę z wyczyszczeniem pamięci podręcznej, otwórz ją w oknie prywatnym albo dodaj do adresu numer wersji, np. /favicon.ico?v=2.

Czy mój obraz jest przesyłany na serwer?

Nie. Ikony, archiwum ZIP i manifest tworzone są w twojej przeglądarce; nic nie opuszcza twojego urządzenia.

Podobne narzędzia