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. 1

    Wybierz zawartość ikony

    Wpisz jeden lub dwa inicjały, aby utworzyć zwięzły znak literowy, albo użyj pojedynczego emoji.

  2. 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. 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. 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