Porządny zestaw favikon to więcej niż jeden plik: przeglądarki chcą wielorozmiarowego .ico, iOS chce apple-touch-icon 180 px, Android chce plików PNG 192 i 512 px oraz manifestu sieciowego. To narzędzie renderuje je wszystkie z jednego obrazu i pakuje w jeden plik ZIP, razem z dokładnymi znacznikami HTML do wklejenia w <head>.
Podgląd pokazuje Twoją ikonę w rzeczywistych rozmiarach 16, 32 i 48 px, dzięki czemu możesz sprawdzić, czy pozostaje rozpoznawalna w maleńkich rozmiarach, zanim ją wdrożysz.
Jak używać
- Dodaj swoje logoObrazy kwadratowe sprawdzają się najlepiej; pozostałe są kadrowane do środka.
- Sprawdź małe rozmiaryPodgląd 16 px to to, co większość użytkowników faktycznie zobaczy w karcie.
- Pobierz plik ZIPfavicon.ico, sześć plików PNG, site.webmanifest oraz gotowy do wklejenia html-snippet.txt.
Jeden obraz na wejściu, pełny zestaw favicon na wyjściu
Wrzuć pojedyncze logo lub ikonę, a ten generator buduje kompletny zestaw, jakiego potrzebuje nowoczesna strona: wielorozmiarowy favicon.ico łączący wersje 16, 32 i 48 pikseli, samodzielne pliki PNG w rozmiarach 16, 32, 48, 180 dla ikony Apple touch oraz 192 i 512 dla instalacji na Androidzie i PWA, plus site.webmanifest. Wszystko schodzi jako jeden ZIP, więc możesz wrzucić go prosto do katalogu głównego projektu.
Dostajesz też gotowy do wklejenia fragment nagłówka HTML z już podpiętymi prawidłowymi znacznikami link i meta. Skopiuj go do swojego szablonu, prześlij pliki, a favicon pojawia się w kartach przeglądarki, zakładkach i skrótach na ekranie głównym, bez ręcznego pisania jakiegokolwiek kodu.
Ostre ikony w każdym rozmiarze
Favicony są nieznośnie małe, więc generator renderuje podglądy w prawdziwym rozmiarze przy 16, 32 i 48 pikselach, dokładnie tak, jak pokaże je karta przeglądarki. To pozwala wyłapać logo, które zamienia się w papkę przy 16px, zanim je wyślesz. Jeśli Twój obraz źródłowy nie jest kwadratowy, narzędzie przycina go centralnie, aby ikona pozostała zrównoważona zamiast ściśnięta.
Cały proces działa w przeglądarce z Twojego oryginalnego obrazu, co oznacza, że możesz wygenerować pliki PNG favicon oraz ICO z logo w wysokiej rozdzielczości bez żadnego przesyłania ani konta.
Do czego się przydaje
Uruchamianie nowej strony — Wygeneruj favicon.ico i każdy rozmiar PNG za jednym przebiegiem, aby karty i zakładki wyglądały wykończone już pierwszego dnia.
Dodawanie ikony instalacji PWA — Wyeksportuj pliki PNG 192 i 512 plus site.webmanifest, aby Twoja aplikacja instalowała się z porządną ikoną na ekranie głównym.
Ikona Apple touch — Utwórz apple-touch-icon 180x180, aby zakładki i ekrany główne iOS pokazywały wyraźny kafelek.
Zmiana marki istniejącej strony — Przepuść jedno nowe logo przez generator i zastąp cały zestaw ikon naraz.
Przekazanie klientowi — Przekaż pojedynczy ZIP z ico, plikami PNG, manifestem i fragmentem nagłówka, aby deweloper po prostu go wrzucił.
Sprawdzanie czytelności w małym rozmiarze — Użyj podglądu w prawdziwym rozmiarze 16px, aby potwierdzić, że szczegółowe logo wciąż czyta się jako ikona.
Niekwadratowe logo — Podaj szeroki znak słowny i pozwól przycięciu centralnemu zamienić go w zrównoważoną kwadratową faviconę.
Strona statyczna lub projekt frameworkowy — Skopiuj wygenerowane znaczniki nagłówka do szablonu Next, Astro lub zwykłego HTML i wyślij.
Wygeneruj pełny zestaw favicon z jednego obrazu — w przeglądarce, w jednym przebiegu
Favicon brzmi jak pojedyncza dopiska o rozmiarze 16×16 pikseli i przez lata tym była. Nowoczesne przeglądarki i platformy po cichu zamieniły ją w małą produkcję. By zrobić to dziś porządnie, potrzebujesz favicon.ico, rozpiętości plików PNG od 16px do 512px, ikony dotykowej Apple do ekranów głównych iOS, pliku site.webmanifest, by witrynę dało się zainstalować jako aplikację, oraz właściwego bloku znaczników <link> i <meta> w <head> Twojego HTML. Chybij rozmiar, a ikona karty wygląda rozmyto na ekranie retina; chybij manifest, a ikona „dodaj do ekranu głównego" wraca do zrzutu ekranu; pomyl blok znaczników, a niektóre platformy zignorują całość.
To dużo fikuśnego wyjścia jak na zadanie, które robisz raz na projekt, a potem zapominasz szczegóły. IMG.DIY bierze pojedynczy obraz źródłowy i produkuje kompletny zestaw — .ico, każdy rozmiar PNG, manifest webowy i gotowy do skopiowania fragment HTML — zmieniając rozmiar całkowicie w Twojej przeglądarce za pomocą Canvas. Twoje logo jest odczytywane lokalnie i renderowane do każdego rozmiaru docelowego na urządzeniu; nic nie jest wysyłane. Dla znaku marki albo logo niewydanego produktu, którego wolałbyś nie publikować na serwerze strony trzeciej przed premierą, ta lokalna gwarancja jest warta posiadania i nic nie kosztuje.
Ponieważ cały potok działa po stronie klienta, działa też offline, gdy PWA jest zapisana w pamięci, więc możesz regenerować ikony na zamkniętej maszynie służbowej albo bez połączenia. Za darmo, bez konta, bez znaku wodnego wypalonego w Twoje ikony.
Co go wyróżnia
- Cały zestaw, nie tylko .ico. ICO, pliki PNG od 16 do 512, ikona dotykowa Apple i
site.webmanifestw jednym pobraniu. - Dołączony HTML do skopiowania. Dokładny blok
<link>/<meta>do wrzucenia w<head>, by ikony faktycznie zarejestrowały się w przeglądarkach. - Nic nie wysyłane. Twoje logo jest skalowane lokalnie — przydatne, gdy znak jest poufny lub przed premierą.
- Jeden przebieg, bez kreatora. Podaj jeden obraz, dostań wszystko; bez wieloetapowego procesu pytającego o wybory platform, które potem musisz sprawdzać.
- Offline i czysto. Zapisana PWA, bez rejestracji, bez znaku wodnego na żadnej wygenerowanej ikonie.
IMG.DIY a inne generatory favicon
| Aspekt | favicon.io | realfavicongenerator.net | Ręcznie (aplikacja graficzna + kod) | IMG.DIY |
|---|---|---|---|---|
| Pliki wysyłane | Tak, na ich serwer | Tak, na ich serwer | Nie, lokalnie | Nie, zostają w przeglądarce |
| Pełny zestaw (.ico + PNG + manifest) | Tak | Tak, bardzo dokładny | Składasz go sam | Tak |
| Dostarczony fragment HTML | Tak | Tak, szczegółowy | Piszesz go sam | Tak |
| Kroki do wyniku | Kilka | Więcej (dużo opcji) | Wiele | Jeden przebieg |
| Działa offline | Nie | Nie | Tak | Tak, po pierwszej wizycie |
| Cena | Za darmo | Darmowy plan; płatne opcje | Koszt aplikacji + Twój czas | Za darmo |
| Wymagane konto | Nie | Nie | Nie | Nie |
Uczciwie o konkurencji: realfavicongenerator jest doskonały i naprawdę bardziej dokładny — podglądowo pokazuje Twoją ikonę na prawdziwych platformach, obsługuje przypadki brzegowe jak maski przypiętych kart Safari i motywy oraz pozwala dostroić wygląd per platforma. Jeśli chcesz tego poziomu kontroli i nie masz nic przeciwko wysłaniu obrazu, to świetny wybór. favicon.io jest szybki i prosty i też produkuje solidny zestaw. Różnica IMG.DIY to kombinacja kompletnego wyjścia z brakiem wysyłania i jednym przebiegiem: dostajesz te same praktyczne materiały — ico, PNG, manifest i HTML do podpięcia ich — bez opuszczania przeglądarki przez Twoje logo i bez przechodzenia przez kreator konfiguracji. Do „mam logo, daj mi wszystko, co trzeba wkleić, i nie wysyłaj mojego pliku nigdzie" to jest to dopasowanie.
Dlaczego IMG.DIY
Kompletny zestaw
ICO + PNG 16/32/48/180/192/512 + manifest.
HTML do wklejenia
Dokładne znaczniki link dołączone jako plik tekstowy.
Podgląd w rzeczywistym rozmiarze
Zobacz ikonę najpierw w rzeczywistych 16/32/48 px.
Prywatnie
Twoje logo nigdy nie opuszcza przeglądarki.