Generator faviconów
Local only — nothing is uploaded unless you save or share it.
Generator faviconów, który z dowolnego obrazu robi kompletny zestaw.
- Upuść kwadratowy obraz, najlepiej 512×512 albo większy
- Pobierz ikony albo te pojedyncze rozmiary, których potrzebujesz
- Wklej fragment HTML w sekcję head swojej strony
Pracuję…
Twój obraz nie był kwadratem, więc użyto największego wyśrodkowanego kwadratu. Ikony są zawsze kwadratowe — rozciągnięcie uczyniłoby go nieczytelnym przy 16 pikselach.
Wklej to do swojego <head>
Zapisz to narzędzie
Miej Generator faviconów pod ręką
Użyj menu Udostępnij w przeglądarce, a potem „Dodaj do ekranu głównego”.
O tym narzędziu
Favicon był kiedyś jednym małym plikiem, a teraz jest małą kolekcją, bo przeglądarki, ekrany główne iOS-a i launchery Androida chcą różnych rozmiarów. Ten generator tworzy zestaw, który naprawdę ma znaczenie, a nie historyczny stos dwudziestu plików: wielorozdzielczościowy favicon.ico zawierający wersje 16, 32 i 48 pikseli do ramki przeglądarki i zakładek, samodzielne pliki PNG w 16 i 32 dla nowoczesnych przeglądarek, ikonę dotykową Apple w 180 pikselach oraz ikony 192 i 512 pikseli dla Androida i progresywnych aplikacji internetowych. Daje też HTML do wklejenia w sekcję head oraz wpisy manifestu dla rozmiarów Androida, bo wiedza o tym, które pliki wygenerować, to dopiero połowa problemu. Obrazy niekwadratowe są przycinane do wyśrodkowanego kwadratu, a nie ściskane, bo rozciągnięte logo przy 16 pikselach jest nieczytelne. Wszystko powstaje w twojej przeglądarce, więc twoje logo nigdy nie jest wysyłane.
Najczęstsze pytania
Jakiego rozmiaru powinien być mój obraz źródłowy?
Co najmniej 512×512 i kwadratowy. Wszystko skalowane jest w dół z twojego oryginału, więc zaczynanie od małego daje miękkie ikony w większych rozmiarach. Logo wektorowe wyeksportowane w 1024×1024 daje najczystsze wyniki.
Czy nadal potrzebuję favicon.ico?
Tak, choć mniej niż kiedyś. Przeglądarki domyślnie proszą o /favicon.ico nawet bez znacznika link i to on wciąż pojawia się w niektórych widokach zakładek i historii. Plik .ico stąd zawiera trzy rozdzielczości, żeby przeglądarka mogła wybrać najostrzejszą.
Dlaczego moje niekwadratowe logo jest przycinane?
Bo każde miejsce na favicon jest kwadratem, a rozciąganie szerokiego logo, żeby pasowało, czyni je nieczytelnym przy 16 pikselach. Używany jest największy wyśrodkowany kwadrat. Jeśli to obcina coś ważnego, przygotuj najpierw kwadratową wersję swojego znaku — większość marek ma taką właśnie z tego powodu.
Dlaczego mój favicon nie aktualizuje się po wgraniu?
Przeglądarki trzymają faviconi w pamięci podręcznej wyjątkowo zaciekle, często ponad zwykłe odświeżenie. Spróbuj twardego przeładowania, otwórz adres ikony wprost albo sprawdź w oknie prywatnym. To niemal zawsze pamięć podręczna, a nie zepsuty plik.
Czy zamiast tego użyć favicona SVG?
Faviconi SVG są dobrze obsługiwane i skalują się doskonale, więc to dobry główny wybór, jeśli masz czystą grafikę wektorową. Nadal chcesz mieć plik .ico i ikonę dotykową Apple jako zapasowe, a właśnie one są w tym zestawie.
Pomóż ulepszyć to narzędzie
Znalazłeś błąd, chcesz zmiany albo brakuje Ci jakiegoś narzędzia?
Masz niewysłaną wiadomość.
Dzięki — mamy to. Odpowiedź znajdziesz w swojej skrzynce.Go to my messages