Generator favicon

Utwórz favicon z dowolnego obrazu

Favicon to mała ikona wyświetlana na kartach przeglądarki, w zakładkach i na ekranach głównych telefonów. Ten generator przyjmuje jeden kwadratowy obraz i tworzy wyraźne ikony PNG we wszystkich rozmiarach potrzebnych nowoczesnym witrynom — od ikony karty 16×16 po ikonę 512×512 dla progresywnych aplikacji webowych — w całości w Twojej przeglądarce.

Upuść logo, a zobaczysz podgląd na żywo każdego rozmiaru, gotowy do pobrania osobno. Generujemy również dokładne znaczniki <link> do wklejenia w sekcji <head> Twojej strony, więc podpięcie favicony zajmuje kilka sekund.

Wskazówki dla wyraźnych ikon

Zacznij od kwadratowego obrazu o wymiarach co najmniej 512×512 pikseli. Wyraziste, proste kształty o silnym kontraście pozostają rozpoznawalne po zmniejszeniu do 16 pikseli, podczas gdy drobne szczegóły i mały tekst zamieniają się w plamę. Sprawdź podgląd 16×16 — jeśli nadal widać, co to jest, masz świetną faviconę.

Który rozmiar jest używany gdzie

• 16×16 i 32×32 — karty przeglądarki, zakładki i paski adresu.
• 48×48 i 64×64 — skróty na pulpicie oraz niektóre ikony w wynikach wyszukiwania i listach stron.
• 128×128 — większe wpisy w sklepach i katalogach rozszerzeń.
• 180×180 — Apple touch icon używana po dodaniu strony do ekranu głównego iPhone'a lub iPada.
• 192×192 i 512×512 — ikony ekranu głównego Androida i progresywnych aplikacji webowych wymienione w manifeście aplikacji webowej.

Warto wiedzieć

Każdy obraz jest skalowany wprost do kwadratu, więc użyj kwadratowego źródła; prostokątne logo zostałoby rozciągnięte. Przezroczystość jest zachowywana w plikach PNG, ale iOS nie wyświetla dobrze przezroczystych ikon touch, dlatego jednolite tło to bezpieczniejszy wybór dla wersji 180×180. Pliki mają nazwy w rodzaju favicon-32x32.png, zgodne z wygenerowanym fragmentem, więc zachowaj te nazwy podczas kopiowania ich do katalogu głównego witryny. Ta strona tworzy tylko pliki PNG; jeśli chcesz także klasyczny plik favicon.ico, utwórz go z obrazu źródłowego za pomocą konwertera PNG na ICO.

Dodawanie ikon do witryny

Pobierz potrzebne rozmiary, umieść je w publicznym katalogu głównym witryny i wklej wygenerowane znaczniki <link> w sekcji <head>. Jeśli tworzysz manifest aplikacji webowej, wskaż w jego liście ikon pliki 192×192 i 512×512. Po wdrożeniu wyszukiwarki i przeglądarki mogą dłuższy czas odświeżać faviconę z pamięci podręcznej, więc przetestuj w oknie prywatnym i nie martw się, jeśli stara ikona utrzyma się przez dzień lub dwa.