Generator favicon: z obrazka, tekstu lub emoji
Generator favicon w przeglądarce: wybierz litery, emoji lub logo, ustaw kolor i kształt, pobierz wszystko jako ZIP: favicon.ico, wszystkie rozmiary PNG, site.webmanifest i gotowy kod HTML. Wszystko powstaje bezpośrednio w przeglądarce.
Jak to obliczamy
Favicon to mała ikona na karcie przeglądarki, w zakładkach, w historii i obok Twojej strony w wynikach wyszukiwania Google. Ten generator favicon zamienia obrazek, jedną do trzech liter lub emoji we wszystkie pliki, których dziś potrzebuje strona internetowa – razem z kodem HTML.
Jakie pliki i rozmiary?
| Plik | Rozmiar | Zastosowanie |
|---|---|---|
| favicon.ico | 16, 32, 48 px | klasyczny favicon; przeglądarki pobierają /favicon.ico nawet bez znacznika HTML |
| favicon-16x16.png, favicon-32x32.png | 16 i 32 px | karta przeglądarki, zwykła i wysoka rozdzielczość |
| apple-touch-icon.png | 180 px | ikona, gdy ktoś doda stronę do ekranu głównego iPhone’a lub iPada |
| android-chrome-192x192.png, -512x512.png | 192 i 512 px | manifest aplikacji webowej: ekran główny i ekran powitalny na Androidzie/w Chrome |
| site.webmanifest | – | nazwa, kolory i ikony strony jako instalowalnej aplikacji webowej |
Do faviconu w wynikach wyszukiwania Google wymaga kwadratowego obrazka o wymiarach co najmniej 8 × 8 pikseli i zaleca większy niż 48 × 48 pikseli. Chrome oczekuje w manifeście ikon 192 i 512 pikseli, a Apple podaje 180 × 180 pikseli dla ikony na ekranie głównym iPhone’a.
Jak dodać favicon do strony
- Pobierz i rozpakuj plik ZIP.
- Wgraj wszystkie pliki do katalogu głównego strony (tam, gdzie jest strona startowa).
- Wklej kod HTML do sekcji
<head>każdej podstrony (WordPress, Wix, Squarespace i inne mają zwykle zamiast tego ustawienie „Ikona witryny”).
Jeśli pliki leżą w podfolderze, wpisz go w polu „Folder na serwerze” – manifest i HTML dopasują się automatycznie. Przeglądarki uparcie trzymają favicony w pamięci podręcznej; nowa ikona często pojawia się dopiero po wyczyszczeniu cache lub w oknie prywatnym.
Jaki favicon jest dobry?
- Prosty: przy 16 × 16 pikselach szczegóły znikają. Litera, symbol lub sam znak graficzny logo działa lepiej niż pełny napis.
- Kontrastowy: ikona musi być rozpoznawalna na jasnych i ciemnych kartach. Bezpieczny wybór to kolorowe tło z jasnym znakiem.
- Kwadratowy: niekwadratowe logo zostanie tu przycięte do środka albo dopasowane z marginesem.
Emoji jako favicon – uwaga na licencję
Emoji jest rysowane czcionką emoji zainstalowaną na Twoim urządzeniu – dlatego na iPhonie wygląda inaczej niż na Windowsie czy Androidzie. Standard Unicode określa tylko, jaki znak chodzi, a nie jak wygląda. Grafika należy do producenta czcionki (np. Apple, Microsoft, Google), a ich licencje nie pozwalają po prostu używać tych obrazków jako logo czy faviconu strony.
Przy prywatnej stronie ryzyko jest niewielkie; na stronie komercyjnej użyj otwarcie licencjonowanego zestawu emoji i przestrzegaj jego warunków:
- Twemoji (pierwotnie od Twittera): grafiki na licencji CC BY 4.0 – wymagane podanie autora. Źródło: github.com/jdecked/twemoji
- Noto Emoji (Google): czcionka na licencji SIL Open Font License 1.1, obrazki i narzędzia na Apache 2.0. Źródło: github.com/googlefonts/noto-emoji
Pobierz tam wybrane emoji jako PNG lub SVG i wybierz tutaj „Obrazek / logo”. To ogólna informacja, a nie porada prawna.
Prywatność
Wszystkie pliki powstają w przeglądarce. Obrazek nie jest nigdzie wysyłany ani zapisywany. Do przygotowania logo przydadzą się konwerter zdjęć i zmiana rozmiaru zdjęcia.
Najczęściej zadawane pytania
Jaki rozmiar powinien mieć favicon?
16 × 16 i 32 × 32 piksele na kartę przeglądarki, co najmniej 48 × 48 (kwadrat) dla Google, 180 × 180 dla urządzeń Apple oraz 192 × 192 i 512 × 512 dla Androida i aplikacji webowych. Generator tworzy wszystkie rozmiary naraz.
Czy nadal potrzebuję favicon.ico?
Warto go mieć: wiele przeglądarek, czytników RSS i narzędzi pobiera /favicon.ico bezpośrednio, bez znacznika HTML. Plik ICO z tego generatora zawiera obrazy PNG 16, 32 i 48 pikseli.
Jak dodać favicon do strony?
Wgraj pliki do katalogu głównego strony i wklej kod HTML do sekcji <head>. W WordPressie możesz też użyć „Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny” z plikiem PNG 512 px.
Czy mogę użyć emoji jako faviconu?
Grafiki emoji od Apple, Microsoftu czy Google należą do tych firm. Na strony komercyjne użyj otwarcie licencjonowanego zestawu, np. Twemoji (CC BY 4.0, z podaniem autora) lub Noto Emoji (OFL 1.1), i wgraj tutaj ten obrazek.
Dlaczego nie widzę nowego faviconu?
Przeglądarki długo przechowują favicony w pamięci podręcznej. Otwórz stronę w oknie prywatnym lub wyczyść cache. W wynikach Google zmiana może potrwać od kilku dni do kilku tygodni.
Czy moje logo jest wysyłane?
Nie. Wszystkie pliki powstają w przeglądarce; obrazek nigdy nie opuszcza urządzenia.
Źródła i podstawa prawna
- Google Search Central – Define a favicon to show in search results
- web.dev – Add a web app manifest (icons 192 × 192 and 512 × 512)
- MDN – Web app manifest: icons
- W3C – Web Application Manifest
- Apple – Human Interface Guidelines: App icons (iPhone 180 × 180 px)
- Apple – Safari Web Content Guide: Configuring Web Applications (apple-touch-icon)
- Microsoft Learn – Icons (ICO file format: ICONDIR, ICONDIRENTRY)
- Unicode Technical Standard #51 – Unicode Emoji
- Twemoji – graphics licensed CC BY 4.0
- Noto Emoji – font licensed SIL OFL 1.1
- Open-source licenses of the libraries used (MIT, LGPL-3.0)
Stan na:
Podobne narzędzia
- Zmiana rozmiaru zdjęciaZmiana rozmiaru zdjęcia online za darmo: w pikselach lub procentach, z zachowaniem proporcji lub przycięciem, szablony Instagram i YouTube. Bez wysyłania.
- Konwerter zdjęć: JPG, PNG, WebP, AVIFZmień format zdjęcia bez wysyłania plików: PNG na JPG, JPG na PNG, WebP na JPG, HEIC na JPG lub na AVIF – do 20 zdjęć naraz, pobieranie w ZIP. Za darmo.
- Generator kodów QR – za darmo i na zawszeZrób kod QR z linku, Wi-Fi, kontaktu (vCard), e-maila, telefonu lub SMS. Wybierz kolory, pobierz PNG lub SVG. Za darmo, bez rejestracji, kod nie wygasa.
- Dodaj znak wodny do zdjęćDodaj znak wodny do zdjęć online: tekst lub logo, krycie, obrót, 9 pozycji lub kafelki. Do 20 zdjęć naraz, pobieranie ZIP, bez wysyłania. Za darmo.
- Generator palet kolorówGenerator palet kolorów: dobierz pasujące kolory do jednego koloru bazowego – dopełniające, analogiczne, triada, kwadrat, monochromatyczne – z HEX, RGB i HSL.
- Sprawdzanie kontrastu kolorów (WCAG 2.2)Sprawdź kontrast kolorów tekstu i tła: współczynnik kontrastu WCAG 2.2 z oceną AA/AAA dla zwykłego tekstu, dużego tekstu i elementów interfejsu.