Darmowy generator favicon
Źródło
Styl
Podgląd
Zawiera favicon.ico (16, 32 i 48 px), pliki PNG 16, 32, 180 (Apple), 192 i 512 (Android) oraz site.webmanifest.
Kod do wklejenia w sekcji <head> strony
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Umieść pliki z ZIP-a w katalogu głównym strony, a potem wklej ten kod.
Wszystko powstaje w Twojej przeglądarce: Twoje logo nie jest nigdzie wysyłane.
Jak korzystać z tego kalkulatora?
1. Wybierz źródło: jedną lub dwie litery (albo emoji) lub swoje logo
2. Dopasuj kształt, kolory i margines, patrząc na podgląd
3. Pobierz pakiet ZIP ze wszystkimi rozmiarami
4. Umieść pliki w katalogu głównym strony i wklej kod HTML do sekcji <head>
Szybka odpowiedź
Jakie rozmiary favicon są potrzebne?
Przygotuj plik favicon.ico z rozmiarami 16, 32 i 48 px dla przeglądarek, ikonę Apple 180 × 180 px dla iPhone'a i iPada oraz pliki PNG 192 i 512 px dla Androida i aplikacji instalowanych. Przykład: umieść pakiet w katalogu głównym (twojastrona.pl/favicon.ico) i wklej 5 linii kodu do sekcji <head>.
| Plik | Rozmiar | Używany przez |
|---|---|---|
| favicon.ico | 16, 32, 48 px | Karty, zakładki, Google |
| favicon-32x32.png | 32 px | Nowe przeglądarki |
| apple-touch-icon.png | 180 px | iPhone, iPad |
| android-chrome-192x192.png | 192 px | Android |
| android-chrome-512x512.png | 512 px | Ekran startowy, PWA |
O narzędziu Generator favicon
Co to jest?
Generator favicon tworzy małą ikonę widoczną na karcie przeglądarki, w zakładkach i na ekranie głównym telefonu. Zacznij od inicjału, skrótu, emoji lub swojego logo, dopasuj kształt i kolory, a potem pobierz pakiet gotowy do instalacji.
Do czego się przydaje?
Strona bez favicon pokazuje ogólną ikonę: wygląda mniej profesjonalnie i trudno ją znaleźć wśród dziesiątek kart. Google pokazuje też favicon obok Twojej strony w wynikach wyszukiwania na telefonie, co przyciąga wzrok i buduje zaufanie.
Jak to działa?
Każdy rozmiar jest rysowany bezpośrednio w swojej rozdzielczości (16, 32, 48, 180, 192 i 512 px), aby był ostry, zamiast zmniejszania jednego dużego obrazu. Plik favicon.ico zawiera rozmiary 16, 32 i 48 px jako obrazy PNG, format rozpoznawany przez wszystkie przeglądarki. Ikona Apple jest zawsze nieprzezroczystym kwadratem, bo iOS sam zaokrągla rogi. Wszystko jest liczone w Twojej przeglądarce.
Wskazówki
- Postaw na prostotę: przy 16 px jedna lub dwie grube litery są dużo czytelniejsze niż szczegółowe logo
- Wybierz mocny kontrast między tekstem a tłem, aby ikona była widoczna w trybie jasnym i ciemnym
- W przypadku logo zacznij od wersji kwadratowej lub samego symbolu, bez nazwy marki
- Wyczyść pamięć podręczną lub sprawdź w oknie prywatnym, jeśli po publikacji nadal widać stary favicon
- Google wymaga kwadratowego favicon o boku co najmniej 48 px, dostępnego pod adresem podanym w kodzie HTML
Osadź to narzędzie na swojej stronieZa darmoSkopiuj ten kod na swoją stronę lub bloga: narzędzie pojawi się bezpośrednio na Twojej stronie, za darmo i bez rejestracji.
Wszystkie narzędzia do osadzeniaPodobne narzędzia
- Zmiana rozmiaru obrazuZmień rozmiar obrazów w pikselach, w % lub do formatów mediów społecznościowych
- Kalkulator marżyMarża, narzut, marża procentowa i mnożnik ceny
- Generator kodów QRŁatwo twórz kody QR dla linków i tekstów
- Pogrubiony tekst na Instagram i LinkedInPisz pogrubieniem, kursywą lub przekreśleniem i wklejaj na Instagram, LinkedIn lub X.