[ Narzędzie online ]
Generator
Favicon
Stwórz favicon dla swojej strony internetowej — wybierz tryb, dostosuj wygląd i pobierz gotowe pliki.
Tryb generowania
Podgląd na żywo
Podgląd główny (192×192)
Twój favicon jest gotowy.
Zmień ustawienia po lewej i pobierz pliki poniżej.
Podgląd w różnych rozmiarach
Jak wygląda w zakładce przeglądarki
Pobierz favicon
Kod HTML do wklejenia w <head>
<!-- Favicon --> <link rel="icon" type="image/x-icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <!-- Apple Touch Icon --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- Android / PWA --> <link rel="manifest" href="/site.webmanifest">
[ Web design ]
Poradnik
favicon
Wszystko, co musisz wiedzieć o favicon przy tworzeniu stron internetowych.
Rozmiary favicon
Podstawowe rozmiary to 16×16 px i 32×32 px dla przeglądarek desktopowych. Przy projektowaniu stron internetowych dla urządzeń mobilnych niezbędne są: Apple Touch Icon 180×180 px oraz Android Chrome Icon 192×192 px i 512×512 px.
Formaty plików
ICO to klasyczny format obsługiwany przez wszystkie przeglądarki. PNG oferuje lepszą jakość i przezroczystość. SVG to nowoczesny format wektorowy. Przy tworzeniu stron internetowych zaleca się stosowanie kombinacji: favicon.ico + PNG 32×32 + Apple Touch Icon PNG.
Gdzie umieścić favicon?
Plik favicon.ico umieszczony w katalogu głównym strony (/) jest automatycznie wykrywany przez przeglądarki. Pozostałe warianty podaje się w sekcji <head> za pomocą tagów <link rel="icon">. W WordPress możesz to zrobić przez Customizer lub wtyczkę.
Apple Touch Icon
Apple Touch Icon to ikona wyświetlana na ekranie głównym iPhone i iPad. Rozmiar 180×180 px, format PNG bez przezroczystości (iOS dodaje zaokrąglenie automatycznie). Bez tej ikony iOS użyje małej miniaturki strony jako skrótu, co wygląda nieprofesjonalnie.
Android Manifest
Plik site.webmanifest definiuje ikony dla Androida i Progressive Web Apps. Wymaga ikon 192×192 px i 512×512 px w formacie PNG. Prawidłowy manifest pozwala dodać stronę internetową do ekranu głównego Androida z ikoną wysokiej jakości.
Favicon a SEO
Google wyświetla favicon obok wyników wyszukiwania w wersji mobilnej. Atrakcyjna ikona może zwiększyć CTR (klikalność). Przy projektowaniu stron internetowych nastawionych na SEO warto zadbać o każdy detal — w tym o spójny i rozpoznawalny favicon marki.
Favicon w projektowaniu stron internetowych
Favicon to jeden z tych detali, o których często się zapomina przy projektowaniu stron internetowych, a które mają ogromne znaczenie dla profesjonalnego odbioru witryny. Mała ikonka w zakładce przeglądarki to pierwszy wizualny element, który użytkownik widzi — zanim jeszcze zerknął na treść strony. Tworzenie stron internetowych bez faviconu to jak wydawanie wizytówki bez logo.
Przy tworzeniu stron dla naszych klientów w Studio Kalmus zawsze dbamy o komplet ikon: favicon.ico dla starszych przeglądarek, PNG dla nowoczesnych, Apple Touch Icon dla iPhone oraz ikony dla Androida i PWA. Dopracowany zestaw ikon to standard przy profesjonalnym tworzeniu stron internetowych.
Google wyświetla favicon obok wyników wyszukiwania w wersji mobilnej. Rozpoznawalna, spójna z marką ikona może realnie zwiększyć CTR — czyli klikalność Twojej strony internetowej w wynikach wyszukiwania. To jeden z elementów kompleksowej optymalizacji SEO, którym zajmujemy się w ramach usług pozycjonowania stron.
Nasz Generator Favicon działa w przeglądarce — żadne pliki nie są wysyłane na serwer. Canvas API renderuje podgląd w czasie rzeczywistym, a pobieranie odbywa się bezpośrednio do Twojego komputera. Narzędzie jest darmowe i nie wymaga rejestracji — tak jak wszystkie nasze darmowe narzędzia online dla twórców stron internetowych.
[ FAQ ]
Częstozadawane
pytania
Odpowiedzi na najczęstsze pytania o favicon przy tworzeniu stron internetowych.
Potrzebujesz profesjonalnej strony internetowej?
Favicon to dopiero początek. W Studio Kalmus tworzymy kompletne strony internetowe — od projektu graficznego i identyfikacji wizualnej, przez tworzenie stron w Next.js i WordPress, po pozycjonowanie SEO. Wszystko w jednym miejscu, z pełną obsługą.