Generator faviconKażdy rozmiar i blok head do tego.
Upuść logo i odbierz prawdziwy, wielorozdzielczościowy favicon.ico, rozmiary PNG, których żądają przeglądarki, apple touch icon, androidową ikonę maskable oraz wypełniony site.webmanifest. Wszystko powstaje w tej karcie, twój obraz nigdy nigdzie nie jedzie.
Upuść tutaj swoje logo
Albo dotknij, żeby wybrać plik. Najlepiej sprawdza się kwadratowy obraz od 512 px w górę.
PNG, JPG, WebP, SVG, ICO lub GIF
Twój obraz jest odczytywany, skalowany i pakowany w tej karcie. Nigdy nie trafia na serwer, bo na żadnym etapie żadnego serwera tu nie ma.
Jakich rozmiarów favicony naprawdę potrzebujesz w 2026 roku?
Dużo mniejszej liczby niż dwudziestoplikowe paczki, które większość generatorów wciąż rozdaje. Pięć powierzchni pokrywa każdą liczącą się przeglądarkę i każdy system, a wszystko powyżej to balast w twoim <head>.
favicon.ico, 16 i 32 i 48
To wciąż plik, którego przeglądarka szuka w katalogu głównym domeny, zanim przeczyta choć jedną linię HTML. Jeden kontener mieści wszystkie trzy rozmiary i właśnie dlatego ten konwerter favicon buduje prawdziwe .ico, a nie zmienia nazwy PNG. 16 px to karta, 32 px to karta na ekranie retina i pasek zakładek, 48 px to skróty w Windows.
favicon.svg, jeśli masz wektor
Wektorowa favicona jest ostra w każdym rozmiarze, a dzięki media query wpisanej w plik potrafi nawet reagować na systemowy tryb ciemny. Przeglądarki, które ją rozumieją, wolą ją od .ico. Jeśli wgrasz tu SVG, zostaje wektorem, nigdy nie jest rasteryzowany i oddawany jako podróbka.
apple-touch-icon.png, 180×180
Ikona, której iOS używa, gdy ktoś doda twoją stronę do ekranu głównego. Wystarczy jeden plik: od iOS 8 system sam skaluje w dół pojedynczą ikonę 180 px, więc dawny stos od apple-touch-icon-57x57 do 152x152 to martwy ciężar. Ten generator apple touch icon zapisuje jedną i robi ją nieprzezroczystą.
android-chrome 192 i 512, plus maskable
Wskazywane z site.webmanifest, a nie ze znacznika link. 192 px to ekran główny, 512 px to ekran startowy i monit o instalację. Wariant maskable to ten, który Android przycina do kształtu używanego przez launcher, więc jego grafika potrzebuje prawdziwego marginesu.
mstile-150x150.png, tanio go trzymać
Strony przypięte w Windows wciąż go czytają. Kosztuje jeden mały PNG i dwa znaczniki meta, więc jest w paczce, ale nic się nie zepsuje, jeśli go skasujesz. To uczciwa odpowiedź i dlatego stoi na końcu listy, a nie jest sprzedawany jako konieczność.
Dlaczego plik .ico zawiera kilka obrazów?
Bo .ico to format kontenera, a nie format obrazu. Zrozumienie tego dzieli favicony, które wyświetlają się wszędzie, od tych, które po cichu zawodzą w Windows i w czytnikach kanałów.
Najpierw katalog, potem obrazy
Plik zaczyna się sześciobajtowym nagłówkiem mówiącym, ile obrazów następuje, potem jest szesnastobajtowy wpis na każdy obraz z jego szerokością, wysokością, długością w bajtach i pozycją w pliku, a dopiero dalej dane obrazów. Wszystko jest little-endian. Ta struktura sprawia, że PNG z podmienionym rozszerzeniem nie jest .ico.
Rozmiar wybiera ten, kto czyta
Przeglądarka rysująca kartę 16 px czyta katalog, znajduje wpis 16 px i dekoduje tylko jego. Dasz jej jeden obraz 512 px, a zmniejszy go w locie, tanim samplerem i z rozmytym efektem. Dasz jej zrobione na miarę 16 px, a użyje właśnie tego.
W środku mogą siedzieć PNG
Pierwotny format osadzał BMP z odwróconą kolejnością pikseli i osobną, jednobitową maską przezroczystości. Każda przeglądarka i każdy Windows od Visty przyjmuje w kontenerze także PNG i to właśnie zapisuje ten konwerter ico: mniejsze pliki, prawdziwa alfa, żadnego archaicznego enkodera.
Jakość widać przy 16 px
Zmniejszenie logo z 1024 px prosto do 16 px próbkuje za mało pikseli źródłowych i daje szarą plamę. To narzędzie połowi obraz na pośrednich canvasach, z 1024 na 512, potem na 256 i tak dalej, żeby każdy piksel się liczył. To jedyny powód, dla którego mała favicona pozostaje czytelna.
Czy apple-touch-icon jest nadal potrzebny?
Tak, i to jedyny plik, którego zasady różnią się od wszystkich pozostałych ikon w paczce. Dwie rzeczy warto wiedzieć, obie już wyżej za ciebie załatwione.
iOS wyrzuca twoją przezroczystość
Safari składa ikonę ekranu głównego na czarnym, a nie na tapecie, więc logo starannie wyeksportowane z przezroczystym tłem ląduje jako kształt unoszący się na czarnym kafelku. Dlatego to narzędzie zawsze zapisuje apple-touch-icon z nieprzezroczystym tłem, domyślnie białym, nawet jeśli dla całej reszty wybrałeś przezroczystość. Od iOS 7 system nie dokłada też własnego połysku, więc ludzie widzą dokładnie to, co dostarczysz.
Android przycina, nie dokłada marginesu
Launcher Androida bierze ikonę maskable i tnie ją do własnego kształtu, koła, squircle albo zaokrąglonego kwadratu, zależnie od telefonu. Przetrwanie ma zagwarantowane tylko środkowe 80 %, więc logo wypełniające kadr od krawędzi do krawędzi traci swoje końcówki. Tutaj plik maskable trzyma 20 % marginesu niezależnie od suwaka, a okrągły podgląd pokazuje dokładnie to, co zostanie.
Jak dodać faviconę do strony?
Dwa kroki, a w drugim popełnia się większość błędów. Skopiuj blok wygenerowany przez narzędzie, zamiast pisać go z pamięci.
Wrzuć pliki do katalogu głównego
Połóż favicon.ico i resztę obok index.html, żeby odpowiadały pod twojastrona.pl/favicon.ico. Przeglądarki same z siebie pytają o dokładnie tę ścieżkę, bez żadnej podpowiedzi, i dlatego miejsce w katalogu głównym waży więcej niż znacznik link.
Wklej blok head na każdej podstronie
Nie tylko na stronie głównej. Ktoś, kto wejdzie na głęboką podstronę i doda ją do zakładek, powinien dostać właściwą ikonę. Jeśli twoja strona stoi na szablonie albo frameworku, blok należy do wspólnego layoutu.
Zadeklaruj .ico bez rozmiaru
Użyj rel="icon" href="/favicon.ico" sizes="any". Rozmiary są już w kontenerze, a wpisanie jednego na sztywno w kod odbiera przeglądarce możliwość sięgnięcia po pozostałe. Linia z SVG idzie pierwsza, żeby przeglądarki rozumiejące wektor wzięły właśnie ją.
Potem twarde odświeżenie, dwa razy
Favicony są cache’owane agresywnie i osobno od strony, więc stara ikona potrafi przetrwać zwykłe odświeżenie przez wiele dni. Zanim uznasz, że coś jest zepsute, otwórz plik wprost pod twojastrona.pl/favicon.ico i sprawdź, czy naprawdę serwowany jest nowy.
Chcesz sprawdzić, dokąd naprawdę prowadzi istniejący kod QR albo krótki link? Rozszyfruj go resolverem kodów QR
Potrzebujesz krótkiego linku do nowej strony? Zrób go darmowym skracaczem linków
Ikona to mniejsza połowa pierwszego wrażenia.
Faviconę ludzie widzą, gdy już są na twojej stronie. Trudniejszą robotę odwala link, który ich tu przyprowadził, i zwykle to właśnie tej części nikt nie mierzy. Jeśli to ci się przyda, LinkScale jest tym, co budujemy.
Zobacz, skąd przyszła wizyta
Kliknięcia, kraje, urządzenia i to, co stało się dalej, dla każdego rozdanego linku, zamiast jednej liczby w cudzym panelu.
Zmień cel później
Skieruj wydrukowany albo opublikowany link gdzie indziej po fakcie, bez proszenia kogokolwiek o aktualizację tego, co zapisał.
Jedna strona na wszystko
Strona link in bio ze sklepem, formularzem rezerwacji i social mediami, żeby jeden dozwolony link zaniósł dalej.
Pytania o generator favicon
Masz jeszcze pytania?
OnlinePrawdziwi ludzie, zwykle odpowiadają w kilka minut.
Jest darmowy, bez konta, bez znaku wodnego i bez limitu wygenerowanych plików. Twój obraz nigdy nie jest wysyłany: odczytuje go FileReader przeglądarki, rysuje na canvasie i pakuje w Bloby, wszystko wewnątrz strony. Za tym narzędziem nie stoi żaden endpoint, więc nie ma nawet dokąd tego wysłać. Możesz to sprawdzić, otwierając zakładkę sieci w przeglądarce podczas pracy albo odłączając internet po załadowaniu strony.
Zrób więcej z LinkScale
Favicona gotowa. Link, który przyprowadza ludzi, to druga połowa.
LinkScale to platforma do zarządzania linkami dla tych, którzy chcą wiedzieć, co dzieje się po kliknięciu, i zmienić cel bez przedruku czegokolwiek.
Free 14-day trial on every plan