Bez przesyłania, 100% lokalnie, bez konta

Generator favicon

Prześlij logo lub ikonę i pobierz wszystkie standardowe rozmiary favicon jako PNG. Zawiera Apple Touch Icon i ikony PWA. Nic nie opuszcza urządzenia.

Jak działa Generator favicon

Generator favicon przyjmuje dowolny dostarczony obraz i skaluje go do standardowych wymiarów favicon za pomocą Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (ikona dotykowa Apple), 192x192 (Android Chrome) i 512x512 (manifest PWA). Wszystkie sześć rozmiarów jest generowanych w przeglądarce i pobieranych jako osobne pliki PNG. Obraz źródłowy nigdy nie opuszcza Twojego urządzenia.

Kompletny zestaw favicon pokrywa pełen zakres ikon kart przeglądarki, zakładek, skrótów ekranu głównego i ekranów powitalnych PWA. Użycie obrazu źródłowego o wysokiej rozdzielczości (co najmniej 512x512 pikseli) daje algorytmowi skalowania w dół jak najwięcej szczegółów. Tagi HTML link potrzebne do odwołania się do każdego wygenerowanego pliku są wyświetlane we fragmencie kodu, który można skopiować bezpośrednio do elementu head strony.

Napisał Bastien Sulyan

Generator favicon: instrukcja krok po kroku

  1. Upuść obraz źródłowy na obszar przesyłania. Dla najlepszych wyników użyj kwadratowego obrazu o rozmiarze 512 px lub większym.
  2. Obejrzyj sześć wygenerowanych rozmiarów w panelu wyników.
  3. Pobierz każdy z sześciu plików PNG osobno z panelu wyników.
  4. Skopiuj fragment HTML pokazujący tagi link dla wszystkich rozmiarów.
  5. Umieść pliki PNG w katalogu głównym witryny i wklej tagi link do nagłówka strony.

Typowe zastosowania

  • Programista konfiguruje nową stronę internetową i potrzebuje wszystkich rozmiarów favicon wygenerowanych z logo marki bez subskrypcji narzędzia projektowego.
  • Autor aplikacji PWA generuje ikony 192x192 i 512x512 wymagane w manifeście aplikacji webowej do instalacji na ekranie głównym.
  • Bloger odświeża identyfikację wizualną witryny i zastępuje domyślny favicon własną ikoną zbudowaną z logo.
  • Freelancer szybko przygotowuje pełny zestaw favicon dla projektu klienta bez czekania na zainstalowanie oprogramowania projektowego offline.

Często zadawane pytania

Jakich formatów obrazów mogę użyć jako źródła?

Jako dane wejściowe działa dowolny format, który przeglądarka może zdekodować: JPEG, PNG, WebP, GIF i SVG. Dla źródeł SVG przeglądarka rasteryzuje wektor do Canvas przed skalowaniem, więc wyjściowe pliki PNG są obrazami rastrowymi bez względu na to.

Dlaczego mój favicon wygląda rozmycie w karcie przeglądarki?

Rozmiary 16x16 i 32x32 są bardzo małe. Jeśli obraz źródłowy zawiera drobne detale lub cienkie linie, nie przetrwają skalowania w dół. Prosty, wyraźny projekt z czytelnymi kształtami sprawdza się znacznie lepiej w małych rozmiarach niż złożona ilustracja.

Czy narzędzie generuje pliki ICO?

Tak. Oprócz sześciu plików PNG narzędzie tworzy również plik favicon.ico, który łączy obrazy 16x16, 32x32 i 48x48 w jednym pliku. Tego formatu wciąż szukają starsze przeglądarki Windows i niektóre roboty indeksujące w katalogu głównym witryny. Nowoczesne przeglądarki są zadowolone z odnośników do plików PNG, więc publikowanie obu wersji nic nie kosztuje i pozwala każdemu klientowi wybrać odpowiedni format.

Czy obraz źródłowy jest przetwarzany na serwerze?

Nie. Wywołania Canvas drawImage, które tworzą każdy rozmiar, są uruchamiane w karcie przeglądarki. Obraz źródłowy jest odczytywany z lokalnego dysku, a sześć wyjściowych plików PNG jest tworzonych w pamięci i oferowanych jako pobrania. Żadne dane pliku nie przechodzą przez serwer.

Którego rozmiaru użyć jako ikony dotykowej Apple?

iOS i iPadOS używają pliku PNG 180x180 odwołującego się przez tag link apple-touch-icon. Ten rozmiar jest używany, gdy użytkownik dodaje witrynę do ekranu głównego na urządzeniu Apple. Narzędzie generuje ten plik razem z innymi rozmiarami.

Czy mogę użyć prostokątnego obrazu jako źródła?

Tak, ale wynik będzie mieć pola letterbox lub pillarbox, aby zmieścić się w kwadratowym canvas. Dla najlepszych wyników zacznij od kwadratowego obrazu lub przytnij go do kwadratu przed użyciem narzędzia.

Powiązane narzędzia

Utrzymuj wszystko lokalnie, odkrywaj narzędzia uzupełniające.

Wszystkie narzędzia do obrazów