Wygeneruj zestaw favicon _

Jak działa generowanie favicon w przeglądarce

Cały proces generowania działa wewnątrz karty przeglądarki przy użyciu Canvas API i biblioteki kompresji fflate. Żadnego przetwarzania po stronie serwera, żadnego przesyłania, żadnych usług stron trzecich.

1. Załaduj obraz źródłowy lub wyrenderuj tekst bądź emoji na niewidocznym canvasie w wysokiej rozdzielczości. Jeśli wybrałeś obraz, zostanie on zdekodowany natywnie przez przeglądarkę. Jeśli wybrałeś tryb tekstowy, strona rysuje Twoje słowo na canvasie z wybraną czcionką, kolorem pierwszego planu i kolorem tła.
2. Dla każdego docelowego rozmiaru (16, 32, 48, 180, 192, 512 pikseli) strona tworzy nowy niewidoczny canvas o dokładnie takim wymiarze, a następnie rysuje na nim zawartość źródłową za pomocą Canvas API. Wbudowane skalowanie obrazu w przeglądarce automatycznie obsługuje zmniejszanie z filtrowaniem dwuliniowym lub dwusześciennym, tworząc ostry favicon w każdym rozmiarze.
3. Każdy canvas jest eksportowany do blob PNG przez canvas.toBlob(). Panel podglądu pokazuje wszystkie sześć rozmiarów, abyś mógł sprawdzić wynik przed pobraniem. Gotowy blok HTML i fragment manifestu aplikacji webowej (manifest.json) są budowane na podstawie nazw plików, więc możesz je wstawić bezpośrednio do sekcji head swojej witryny.
4. Po kliknięciu Pobierz ZIP strona odczytuje wszystkie blob PNG do pamięci, używa fflate do spakowania ich wraz z plikiem manifest.json w jeden archiwum ZIP i uruchamia pobieranie jednym kliknięciem. Cały pakiet jest budowany w Twojej przeglądarce — nic nie jest przesyłane na żadnym etapie.

Dlaczego warto generować favicony w przeglądarce?

• Kompletny zestaw favicon eliminuje błąd 404 przeglądarki przy pierwszej wizycie i zapewnia profesjonalny wygląd witryny w zakładkach, kartach przeglądarki i ekranach instalacji PWA. Brakujące rozmiary oznaczają, że przeglądarka albo nic nie ładuje, albo stosuje rozmytą skalę najbliższego sąsiada.
• Dołączony kod HTML i fragment manifestu oszczędzają ręcznego pisania sześciu tagów i bloku JSON manifestu. Wklej je do sekcji head swojej witryny, dostosuj ścieżki, jeśli trzeba, i gotowe w sekundy zamiast minut.
• Generowanie po stronie klienta to jedyna opcja na zablokowanych komputerach firmowych, które nie mają edytora zdjęć. Ponieważ nic nie jest przesyłane, nie ma ryzyka wycieku danych i nie jest potrzebny przegląd zgodności dla wrażliwych obrazów lub obrazów z logo.
• Tryb tekstu i emoji pozwala wygenerować favicon bez żadnego obrazu. Wpisz inicjał marki, literę lub emoji, wybierz czcionkę i kolor, a otrzymasz kompletny zestaw — idealny do projektów osobistych, prototypów lub stron, które potrzebują tymczasowego faviconu.

Typowe zastosowania generowania favicon

Każda witryna, którą ludzie dodają do zakładek lub instalują, potrzebuje faviconu. Oto trzy scenariusze, w których generator działający w przeglądarce oszczędza czas.

• Tworzenie nowej strony docelowej lub mikrowitryny. Wygeneruj kompletny zestaw favicon z logo marki w minutę, skopiuj tagi do sekcji head witryny i wdróż. Żadne narzędzie projektowe nie jest potrzebne.
• Tworzenie ikon PWA dla progresywnej aplikacji webowej. Ikony PNG 192×192 i 512×512 są wymagane dla pliku manifest.json. Wygeneruj je wraz z resztą zestawu favicon w jednym kroku, zamiast ręcznie skalować logo.
• Tworzenie placeholderów dla prototypów i witryn stagingowych. Wpisz pojedynczą literę lub emoji, wybierz kolor tła i uzyskaj realistyczne favicony bez czekania na finalne materiały marki od zespołu projektowego.

Przykład: generowanie zestawu favicon z logo firmy

Masz logo PNG o wymiarach 500×500 i potrzebujesz pełnego zestawu favicon dla nowej witryny marketingowej.

Otwórz tę stronę i upuść logo PNG w strefę przesyłania. Obraz ładuje się, a podgląd pojawia się obok siatki rozmiarów. Kliknij Generuj favicony. Strona rysuje logo na sześciu niewidocznych canvasach w rozmiarach 16, 32, 48, 180, 192 i 512 pikseli i pokazuje każdy wynik. Poniżej panelu podglądu pojawia się gotowy blok HTML z wpisami rel="icon" dla rozmiarów 16/32/48, linkiem apple-touch-icon dla rozmiaru 180 i linkiem manifest dla ikon PWA. Fragment manifestu poniżej wymienia ikony 192 i 512. Kliknij Pobierz ZIP — strona pakuje wszystkie sześć PNG oraz manifest.json do pojedynczego archiwum ZIP za pomocą fflate. Cały proces trwa dwie sekundy i nie zużywa przepustowości poza początkowym ładowaniem strony.

Jakie rozmiary favicon generuje to narzędzie?

Sześć rozmiarów: 16×16, 32×32 i 48×48 dla standardowych favicon przeglądarki, 180×180 dla ikony Apple Touch oraz 192×192 i 512×512 dla ikon manifestu PWA. Każdy rozmiar jest eksportowany jako PNG. Nowoczesne przeglądarki akceptują favicony PNG przez .

Czy mogę wygenerować favicon z tekstu lub emoji?

Tak. Przełącz się na tryb tekstu lub emoji, wpisz słowo lub wklej emoji, wybierz czcionkę, kolor pierwszego planu i kolor tła, a następnie kliknij Generuj. Tekst jest renderowany na niewidocznym canvasie w wysokiej rozdzielczości, a następnie skalowany do każdego docelowego rozmiaru faviconu.

Czy obraz jest przesyłany na serwer?

Nie. Obraz nigdy nie opuszcza Twojego urządzenia. Strona używa API File przeglądarki do odczytania obrazu do pamięci i Canvas API do skalowania i eksportowania każdego faviconu. Otwórz panel Sieć w DevTools podczas generowania — jedyne żądania wychodzące to początkowy ładunek strony i wywołania reklam. Żadne dane obrazu nie są przesyłane.

Jakie formaty są akceptowane do przesyłania obrazów?

Każdy format, który przeglądarka może zdekodować: PNG, JPEG, WebP, GIF i SVG (rasteryzowany przez przeglądarkę). Limit rozmiaru pliku to 10 MB na przesłanie.

Jak działa pobieranie ZIP?

Strona używa biblioteki fflate (ładowanej na żądanie ze współdzielonej ścieżki vendor) do spakowania wszystkich wygenerowanych plików PNG oraz manifest.json do standardowego archiwum ZIP. Pakowanie odbywa się w całości w pamięci przeglądarki — bez przesyłania, bez komunikacji z serwerem. ZIP jest udostępniany jako blob do pobrania jednym kliknięciem.

Czy mogę używać tych faviconów na dowolnej stronie internetowej?

Tak. Wygenerowane favicony PNG działają na każdej nowoczesnej przeglądarce obsługującej tag . Ikona Apple Touch 180×180 obsługuje iOS i Safari. Ikony PWA 192×192 i 512×512 spełniają wymagania manifestu dla Chrome na Androidzie i innych przeglądarek obsługujących PWA.

Czy istnieje opcja prawdziwego formatu .ico?

Obecna wersja generuje PNG, ponieważ każda nowoczesna przeglądarka akceptuje je przez . Prawdziwy wielorozdzielczy format .ico nie jest jeszcze obsługiwany i może zostać dodany w przyszłej wersji.