Generator favicon z inicjałów i emoji
Utwórz prostą i łatwo rozpoznawalną faviconę bez przygotowywania obrazu. Wpisz jeden lub dwa inicjały albo wybierz pojedyncze emoji, a następnie ustaw kształt i kolor tła. W przypadku inicjałów możesz też wybrać kolor znaków i styl pisma; emoji zachowują natywny wygląd przeglądarki. Podgląd 512 px aktualizuje się w przeglądarce. Gotowy plik do pobrania zawiera małe ikony przeglądarki, ikony na urządzenia mobilne oraz pliki konfiguracyjne potrzebne do dodania projektu do witryny. Nic nie jest przesyłane i narzędzie nie korzysta ze sztucznej inteligencji.
Jak utworzyć faviconę
-
1
Wybierz zawartość ikony
Wpisz jeden lub dwa inicjały, aby utworzyć zwięzły znak literowy, albo użyj pojedynczego emoji.
-
2
Nadaj projektowi styl
Wybierz kwadrat, kwadrat z zaokrąglonymi rogami lub koło, a następnie ustaw kolor tła. Dla inicjałów możesz także zmienić kolor znaków i styl pisma; emoji zachowują natywny wygląd.
-
3
Sprawdź podgląd
Obejrzyj podgląd 512 px, ale upewnij się również, że projekt pozostaje wyraźny po zmniejszeniu do ikony 16 px na karcie przeglądarki.
-
4
Pobierz i zainstaluj
Pobierz utworzony lokalnie pakiet favicon, dodaj pliki do witryny i wklej lub dostosuj dołączony fragment sekcji `<head>`.
Co zawiera pakiet favicon
Jeden projekt favicony musi dobrze wyglądać w wielu miejscach, od małej karty przeglądarki po ekran główny telefonu. Generator renderuje ten sam projekt w praktycznych rozmiarach wymienionych poniżej i lokalnie pakuje wszystkie pliki.
| Element pakietu | Rozmiar lub zawartość | Przeznaczenie |
|---|---|---|
favicon.ico |
Obrazy 16, 32 i 48 px | Karty przeglądarki, zakładki i oprogramowanie, które nadal wymaga pliku ICO |
favicon-16x16.png |
16 × 16 px | Mała favicona dla przeglądarek |
favicon-32x32.png |
32 × 32 px | Standardowa favicona dla przeglądarek |
apple-touch-icon.png |
180 × 180 px | Ikona dotykowa Apple |
android-chrome-192x192.png |
192 × 192 px | Ikona aplikacji internetowej dla mniejszych widoków Androida |
android-chrome-512x512.png |
512 × 512 px | Większa ikona aplikacji internetowej |
mstile-150x150.png |
150 × 150 px | Grafika kafelka Microsoft |
site.webmanifest |
Manifest JSON | Wskazuje ikony Androida w przeglądarkach korzystających z manifestu aplikacji internetowej |
browserconfig.xml |
Konfiguracja XML | Wskazuje obraz i kolor kafelka Microsoft |
favicon-head.html |
Fragment HTML | Gotowe do skopiowania odwołania do ikon, manifestu i konfiguracji przeglądarki |
Utwórz faviconę czytelną także przy 16 px
Favicona nie jest miniaturowym plakatem. Drobne detale, długie słowa i subtelne różnice kolorów szybko znikają w rozmiarze karty przeglądarki. Wyraźny inicjał, krótki znak z dwóch liter lub proste emoji są zwykle łatwiejsze do rozpoznania niż złożona kompozycja.
- Przy inicjałach zadbaj o mocny kontrast między znakami a tłem.
- Pozostaw wolną przestrzeń wokół liter i emoji, aby maski platform nie ściskały projektu.
- Porównaj wersję kwadratową, kwadratową z zaokrąglonymi rogami i okrągłą, zanim wybierzesz najbardziej czytelną sylwetkę.
- Oceń małe wyeksportowane ikony, a nie tylko podgląd 512 px. Projekt atrakcyjny w pełnym rozmiarze może stać się nieczytelny przy 16 px.
- Przetestuj zainstalowaną faviconę w kilku przeglądarkach oraz na jasnym i ciemnym interfejsie.
Dodaj wygenerowane pliki do witryny
Zachowaj wygenerowane nazwy i umieść pliki tam, gdzie oczekuje ich dołączony fragment sekcji <head>, zwykle w katalogu głównym witryny. Wklej fragment do sekcji <head> każdego szablonu strony. Jeśli framework udostępnia zasoby statyczne z innego katalogu lub przez sieć dostarczania treści, przed wdrożeniem zaktualizuj ścieżki we fragmencie, manifeście i konfiguracji przeglądarki.
Dołączone pliki zawierają odwołania do ikon, ale same nie czynią witryny instalowalną progresywną aplikacją internetową. Instalacja może wymagać dodatkowych pól manifestu, bezpiecznego hostingu oraz spełnienia wymagań konkretnej przeglądarki.
Najczęściej zadawane pytania
Tak. Wpisz jeden lub dwa inicjały, a następnie wybierz kształt, kolor tła, kolor pierwszego planu i styl pisma. Krótki tekst jest celowy, ponieważ pozostaje bardziej czytelny w małych rozmiarach favicony.
Tak. Emoji zachowuje natywny wygląd przeglądarki, natomiast kształt i kolor tła możesz zmieniać. Przed pobraniem sprawdź podgląd, ponieważ wygląd różni się między systemami i przeglądarkami, a złożone emoji nie są dostępne wszędzie.
Tak. Pakiet zawiera plik favicon.ico z obrazami 16, 32 i 48 px, osobne favicony PNG 16 i 32 px oraz większe ikony dla urządzeń Apple, Android i Microsoft.
Generator favicon tworzy nowy projekt z inicjałów, krótkiego tekstu lub jednego emoji. Konwerter favicon to osobne narzędzie, które zmienia istniejący obraz PNG, JPEG lub WebP w pliki favicon.
Nie. Tekst lub emoji, renderowanie podglądu i tworzenie pakietu pozostają w przeglądarce. Narzędzie nie przesyła projektu ani nie pobiera żadnej witryny.
Nie. Stosuje tylko wybrane ustawienia i nie korzysta ze sztucznej inteligencji. Nie potrafi też określić, czy inicjały, emoji, kolory lub gotowy projekt naruszają znak towarowy albo prawa innej osoby. Sprawdź te prawa przed komercyjnym użyciem favicony.
Przeglądarki często zapisują favicony w pamięci podręcznej. Sprawdź, czy wygenerowane pliki i odwołania w sekcji <head> zostały opublikowane w oczekiwanych ścieżkach, a następnie wyczyść pamięć podręczną przeglądarki lub przetestuj stronę w oknie prywatnym. Niektóre wyszukiwarki i platformy odświeżają ikony według własnego harmonogramu.
Powiązane narzędzia
Zmiana rozmiaru obrazu
Zmieniaj rozmiar obrazów do dokładnych wymiarów w pikselach lub procentach, zachowując proporcje. Dobre do pracy partiami, bez przesyłania plików.
Narzędzie do zmiany rozmiaru obrazów do social media
Zmień rozmiar jednego obrazu do wbudowanych presetów dla Instagramu, Facebooka, X, LinkedIn, YouTube, Pinteresta i TikToka. Sprawdź każdy PNG i pobierz potrzebne formaty.
Wektoryzator PNG do SVG
Przekształcaj obrazy rastrowe PNG w ścieżki SVG bezpośrednio w przeglądarce. Najlepsze do logo, ikon i rysunków liniowych. Steruj progiem, liczbą kolorów i wygładzaniem.
Kompresor obrazów
Kompresuj obrazy JPG, PNG i WebP, aby zmniejszyć rozmiar pliku przy zachowaniu jakości wizualnej. Wszystko działa w przeglądarce, bez przesyłania plików.
Masowa zmiana rozmiaru obrazów
Przeciągnij kilka obrazów, dopasuj je lub rozciągnij do rozmiaru docelowego i wyeksportuj JPG, PNG albo WebP w jednym ZIP-ie. Przetwarzanie zostaje w przeglądarce.
Komprimuj plik GIF
Zmniejsz animowany plik GIF w przeglądarce: obniż wymiary, zachowaj mniej klatek i dopasuj jakość kodowania. Zobacz podgląd pętli przed pobraniem.