Generator favicon
Tworzenie ikon favicon z tekstu, emoji lub obrazów dla witryny
Projekt favicony
Wybierz emoji
0% to kwadrat; 100% używa oryginalnej, w pełni zaokrąglonej ścieżki.
Plik obrazu do 10 MiB. Renderer źródłowy rozciąga obraz do kwadratu.
Podgląd i pliki
To ilustracja. Renderowanie emoji w przeglądarce i systemie może się różnić.
Podgląd na żywo zaktualizowany. Wygeneruj pliki, gdy projekt będzie gotowy.
Wygenerowane pliki PNG
Projekt został zmieniony. Te pliki nadal zawierają ostatnio wygenerowany projekt; wygeneruj je ponownie, aby je zaktualizować.
Pliki PNG: 16, 32, 48, 64, 128 i 256 px. Plik ICO zawiera wygenerowany plik PNG 32 px.
Dodaj do swojej witryny
- Prześlij pobrane pliki i użyj skopiowanych tagów w sekcji head swojej strony.
- Domyślne ścieżki w tagach odnoszą się do katalogu głównego witryny; zmień je, jeśli pliki umieścisz gdzie indziej.
- Pobrany plik ICO zawiera jeden obraz PNG, a nie wszystkie wygenerowane rozmiary.
- Ikony Apple touch i ikony manifestu aplikacji internetowej to osobne zasoby; to narzędzie ich nie generuje.
- Nie ma gwarancji, że favicona pojawi się w wynikach wyszukiwania.
- Narzędzie odczytuje plik w przeglądarce, bez jego przesyłania. Zachowaj nietkniętą kopię oryginału.
O generatorze favicon
Nasz darmowy generator favicon online pozwala tworzyć profesjonalne favicony z tekstu, liter, emoji lub wgranych obrazów, bezpośrednio w przeglądarce. Favicony to małe ikony widoczne na kartach przeglądarki, w zakładkach i wynikach wyszukiwania; odgrywają kluczową rolę w rozpoznawalności marki i wygodzie użytkowników. Dzięki temu narzędziu można zaprojektować i pobrać favicony w wielu rozmiarach, bez oprogramowania graficznego i wiedzy technicznej.
Generator obsługuje trzy tryby tworzenia: tryb tekstu/litery do tworzenia favicon z jednego lub dwóch znaków z pełną kontrolą nad czcionką, kolorem i stylem; tryb emoji do szybkiego generowania favicon z dowolnego emoji z regulowanym tłem i rozmiarem; oraz tryb wgrywania do tworzenia kwadratowych plików favicon z obrazów, które przeglądarka potrafi zdekodować. Narzędzie renderuje lokalnie, bez przesyłania wybranego pliku; nie oznacza to gwarancji prywatności dla każdego innego skryptu ani żądania na stronie.
Narzędzie generuje sześć kwadratowych rozmiarów PNG: 16, 32, 48, 64, 128 i 256 px. Można pobrać pojedyncze pliki, jednoobrazowy plik ICO 32 px oparty na PNG oraz pasujące znaczniki link HTML. Te zasoby nie obejmują wszystkich wymagań dotyczących ikon na każdej platformie.
Najważniejsze funkcje
- Trzy tryby tworzenia: tekst/litera, emoji i wgrany obraz
- Regulowany kolor tekstu, kolor tła, rodzina czcionek i grubość czcionki
- Regulowane zaokrąglenie narożników, od kwadratu do koła
- Obsługa przezroczystego tła w trybach tekstu i emoji
- Siatka szybkiego wyboru popularnych emoji z 32 często używanymi emoji
- Generuje sześć standardowych rozmiarów favicon: 16x16, 32x32, 48x48, 64x64, 128x128 i 256x256
- Podgląd na żywo aktualizowany podczas zmiany ustawień
- Makieta karty przeglądarki pokazująca, jak będzie wyglądać favicon
- Pobieranie pojedynczych rozmiarów jako plików PNG
- Pobieranie kontenera favicon.ico z jednym wygenerowanym PNG 32 px; zgodność zależy od klienta
- Kopiowanie znaczników link HTML do schowka, by łatwo wdrożyć je w witrynie
- Całe przetwarzanie odbywa się w przeglądarce, bez przesyłania na serwer
Jak korzystać z generatora favicon
- Wybierz tryb: Opcja Tekst/litera tworzy favicon ze znaków, Emoji używa emoji, a Wgraj obraz przekształca istniejący obraz.
- Dostosuj projekt: W trybie tekstu należy wpisać 1-2 znaki i ustawić rozmiar czcionki, kolory, zaokrąglenie narożników, rodzinę czcionek i grubość. W trybie emoji należy wybrać lub wpisać emoji i skonfigurować tło oraz rozmiar. W trybie wgrywania należy wybrać plik obrazu z urządzenia.
- Oglądaj podgląd na żywo: Podgląd 256x256 aktualizuje się natychmiast po zmianie ustawień. Makieta karty przeglądarki pokazuje, jak favicon będzie wyglądać na prawdziwej karcie.
- Wygeneruj favicony: Przycisk „Generuj favicony” tworzy wszystkie sześć standardowych rozmiarów na podstawie projektu.
- Pobierz favicony: Można pobrać osobne pliki PNG dla każdego rozmiaru, plik favicon.ico lub skopiować znaczniki link HTML do sekcji head witryny.
- Dodaj do witryny: Pobrane pliki należy umieścić w katalogu głównym witryny, a znaczniki link HTML wkleić do sekcji head dokumentu HTML.
Zastosowania
- Start nowej witryny: Szybkie utworzenie profesjonalnego favicon dla nowej witryny lub aplikacji internetowej bez udziału grafika.
- Marka osobista: Favicon z literą lub inicjałami do osobistego bloga, portfolio lub strony zawodowej.
- MVP startupów: Tymczasowy, ale dopracowany favicon na wczesnych etapach tworzenia, gdy pełna identyfikacja marki jeszcze nie istnieje.
- Projekty poboczne i eksperymenty: Charakter dla projektów hobbystycznych, zgłoszeń hackathonowych i stron eksperymentalnych dzięki własnym faviconom z emoji lub tekstu.
- Testowanie tworzenia stron: Generowanie zastępczych favicon dla środowisk deweloperskich, serwerów testowych lub prototypów dla klientów.
- Zarządzanie wieloma witrynami: Odrębne favicony dla różnych witryn, subdomen lub aplikacji internetowych ułatwiają rozróżnianie wielu otwartych kart.
- Dokumentacja i samouczki: Zasoby favicon dla witryn demonstracyjnych, przykładów kodu i materiałów edukacyjnych.
- Tworzenie rozszerzeń przeglądarki: Zasoby ikon dla rozszerzeń przeglądarki, które potrzebują małych, rozpoznawalnych ikon w różnych rozmiarach.
Najczęściej zadawane pytania
Czym jest favicon?
Favicon (od „favorites icon”, czyli ikona ulubionych) to mała ikona powiązana z witryną. Pojawia się na kartach przeglądarki, listach zakładek, w historii przeglądarki i wynikach wyszukiwarek. Favicony pomagają użytkownikom szybko rozpoznać i znaleźć witrynę wśród wielu otwartych kart i zakładek.
Jakich rozmiarów favicon należy używać?
Narzędzie udostępnia pliki PNG 16, 32, 48, 64, 128 i 256 px oraz ICO 32 px. Należy wybrać rozmiary wymagane przez docelowego klienta; wyszukiwarka Google obecnie zaleca kwadratowe ikony większe niż 48 px, a uwzględnienie ich nie jest gwarantowane.
Jaka jest różnica między formatami PNG i ICO?
PNG to rastrowy format obrazu, a ICO to kontener ikon. Narzędzie eksportuje sześć plików PNG i osadza wygenerowany PNG 32 px w jednym wpisie ICO. Należy sprawdzić wymagania docelowego klienta; żaden z formatów nie gwarantuje powszechnej obsługi.
Czy można utworzyć przezroczysty favicon?
Tak, w trybach Tekst/litera i Emoji można włączyć opcję przezroczystego tła. Powstaje favicon z przezroczystym tłem, przydatny, gdy ma zlewać się z kolorem tła karty przeglądarki.
Czy wgrany obraz jest wysyłany na serwer?
Narzędzie renderuje wybrany obraz w przeglądarce, bez jego przesyłania. Pliki są ograniczone do 10 MiB, a obsługiwane formaty zależą od dekodowania w przeglądarce. To stwierdzenie nie obejmuje przechowywania, śledzenia ani żądań wykonywanych przez inne skrypty w witrynie.
Jak dodać favicon do witryny?
Pobrane pliki favicon należy umieścić w katalogu głównym witryny (lub w wybranym podkatalogu), a następnie dodać znaczniki link HTML do sekcji head kodu HTML. Gotowe znaczniki link można skopiować z tego narzędzia. Na przykład: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Wskazówki i dobre praktyki
- Postaw na prostotę: Favicony są wyświetlane w bardzo małych rozmiarach. Warto używać wyrazistych, prostych kształtów i kontrastowych kolorów, które pozostają rozpoznawalne w rozmiarze 16x16 pikseli.
- Najwyżej 1-2 znaki: W faviconach z tekstu najlepiej sprawdza się jeden znak. Dwa znaki mogą działać, ale w małych rozmiarach bywają mniej czytelne.
- Wybierz kontrastowe kolory: Tekst lub emoji powinny wyraźnie odcinać się od tła. Wysoki kontrast zapewnia widoczność na kartach przeglądarki.
- Testuj w małych rozmiarach: Przed ostatecznym zatwierdzeniem zawsze należy sprawdzić wygląd favicon w rozmiarach 16x16 i 32x32. To, co świetnie wygląda w 256x256, może być nieczytelne w mniejszych rozmiarach.
- Pomyśl o trybie ciemnym: Wielu użytkowników korzysta z ciemnych motywów przeglądarki. Favicon z przezroczystym tłem i ciemną zawartością może stać się niewidoczny. Warto dodać kolorowe tło lub użyć jasnej zawartości.
- Wykorzystaj zaokrąglenie narożników: Zaokrąglone rogi (20-30%) nadają faviconom nowoczesny, dopracowany wygląd. Pełne koło (100%) dobrze sprawdza się przy pojedynczych literach lub emoji.
- Uwzględnij wiele rozmiarów: Należy przygotować zasoby odpowiednie dla docelowych klientów. Narzędzie generuje sześć wymienionych rozmiarów PNG i jeden plik ICO; ikony Apple touch i manifestu aplikacji internetowej wymagają osobnych zasobów, a pełne pokrycie urządzeń nie jest gwarantowane.