Generator faviconów
Działa w całości w Twojej przeglądarce. Twoje pliki i dane nigdy nie opuszczają Twojego urządzenia.
16×16favicon-16x16.png
32×32favicon-32x32.png
48×48favicon-48x48.png
180×180apple-touch-icon.png
192×192icon-192.png
512×512icon-512.png
<link rel="icon" href="/favicon.ico" sizes="32x32"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
O tym narzędziu
Wgraj logo albo dowolny obraz zbliżony do kwadratu, a strona narysuje z niego sześć rozmiarów potrzebnych na stronie internetowej: 16, 32 i 48 pikseli na karty przeglądarki, 180 na ikonę, którą iOS zapisuje na ekranie głównym, oraz 192 i 512 dla Androida. Do pobrania trafia jedno archiwum ZIP z tymi plikami PNG, plikiem favicon.ico, plikiem site.webmanifest i gotowym HTML-em do sekcji <head>.
Co znajduje się w archiwum ZIP?
Sześć plików PNG (favicon-16x16.png, favicon-32x32.png, favicon-48x48.png, apple-touch-icon.png, icon-192.png i icon-512.png) oraz favicon.ico z wersjami 16, 32 i 48 pikseli w jednym pliku. Format ICO od czasów Windows Vista pozwala trzymać wewnątrz obrazy skompresowane jako PNG, więc plik pozostaje mały, a starsze przeglądarki, które szukają wyłącznie /favicon.ico, wciąż znajdą coś do wyświetlenia.
site.webmanifest wymienia ikony 192 i 512 pikseli oraz zawiera nazwę aplikacji wpisaną w ustawieniach, a także short_name przycięty do 12 znaków, czyli mniej więcej tyle, ile Android pokazuje pod ikoną na ekranie głównym. Jeśli pole zostawisz puste, pojawi się nazwa “My site”. Ostatni plik, favicon.html, to te same pięć znaczników <link>, które przycisk kopiowania umieszcza w schowku.
Czy moje obrazy są gdzieś wysyłane?
Nie. Obraz jest rysowany na elemencie canvas bezpośrednio na stronie i kodowany do PNG przez samą przeglądarkę, po czym pakowany do archiwum w tej samej karcie. Nic nie trafia na żaden serwer, więc niepublikowane jeszcze logo albo znak marki klienta nie opuszcza twojego komputera. Możesz otworzyć stronę, odłączyć kabel sieciowy i wszystko nadal będzie działać.
Jaki plik najlepiej wgrać?
Narzędzie przyjmuje pliki PNG, JPEG, WebP i SVG. Najlepiej sprawdza się kwadratowe źródło, bo obraz jest skalowany i wyśrodkowany, więc szeroki baner skończy z przezroczystymi pasami u góry i u dołu. SVG jest najwygodniejszym formatem dla logo, ponieważ każdy rozmiar jest rysowany bezpośrednio z wektora, a nie ze skalowanej bitmapy. Niezależnie od tego, co wgrasz, pamiętaj, że 16 pikseli to naprawdę mało: pełny napis w tym rozmiarze zamienia się w nieczytelną plamę, a pojedyncza litera lub symbol wypada dużo lepiej.
Po podmianie plików warto pamiętać, że przeglądarki trzymają favicony w pamięci podręcznej długo, więc nowa ikona może pojawić się dopiero po twardym odświeżeniu strony. Strona MDN o typach linków tłumaczy, do czego służy każdy znacznik w wygenerowanym fragmencie kodu.