Darmowy generator favicon na wszystkie platformy

Generator favicon oszczędza żmudną część budowania marki strony: eksportowanie tego samego logo w sześciu rozmiarach, poprawne nazywanie każdego pliku i pisanie znaczników, które mówią każdej platformie, gdzie je znaleźć. Favicon jest mała, ale podróżuje daleko. Widać ją na kartach przeglądarki, w zakładkach i historii, na ekranach głównych telefonów oraz obok nazwy Twojej strony w wynikach Google, gdzie Google prosi o kwadratową ikonę o rozmiarze co najmniej 8x8 pikseli i zaleca większą niż 48x48 (Google Search Central, favicons in search results).

Jak korzystać z generatora favicon?

Przeciągnij do narzędzia plik PNG, JPG lub SVG, najlepiej o rozmiarze 512x512 pikseli lub większym. Generator rysuje Twój obraz na płótnie w każdym rozmiarze z wysokiej jakości wygładzaniem i pokazuje sześć wyników obok siebie.

1. Przygotuj kwadratowe źródło. Narzędzie skaluje obraz do każdego kwadratowego rozmiaru bez przycinania, więc prostokątne logo będzie wyglądać na rozciągnięte. Najpierw przytnij je do kwadratu, zostawiając niewielki margines wokół znaku.
2. Upuść plik lub kliknij, aby go wybrać. Podgląd pojawi się po sekundzie.
3. Pobierz paczkę przyciskiem „Pobierz wszystko (.zip)” albo każdy plik PNG osobno.
4. Skopiuj kod HTML do <head> każdej strony, zwykle w szablonie witryny.
5. Skopiuj manifest, uzupełnij pola name i short_name nazwą swojej marki i zapisz go jako site.webmanifest w katalogu głównym witryny.
6. Wgraj pliki do katalogu głównego swojej domeny, tak aby /favicon-32x32.png i pozostałe ścieżki z kodu działały.

Ponieważ przetwarzanie odbywa się w Twojej przeglądarce, generator działa z niepublikowanymi logo i plikami klientów, których nie wolno Ci wysyłać na serwer podmiotu trzeciego.

Jakich rozmiarów favicon potrzebujesz w 2026 roku?

Sześć plików PNG obejmuje przeglądarki, iOS, Androida i Windows. Tabela wymienia, co tworzy generator, gdzie każdy plik jest używany oraz który znacznik lub plik się do niego odwołuje.

Para 192 i 512 nie jest przypadkowa: w przeglądarkach opartych na Chromium manifest aplikacji webowej musi zawierać co najmniej ikonę 192x192 i ikonę 512x512, a Chrome skaluje je do pozostałych miejsc, w których ich potrzebuje (web.dev, add a web app manifest). Rozmiar 180x180 odpowiada ikonie iPhone’a o wysokiej rozdzielczości z przykładowego kodu Apple dla web clipów (Apple, configuring web applications). Kafelek Windows to plik przestarzały: nie szkodzi, a znacznik możesz pominąć, jeśli nie celujesz w stare instalacje Windows.

Jaki kod HTML daje generator?

Sześć linii dla <head>: dwa linki rel="icon" dla favicon PNG, ikonę Apple touch, link do manifestu, kafelek Windows i znacznik meta theme-color. Gdy strona wymienia kilka ikon, przeglądarka odczytuje ich atrybuty type i sizes, by wybrać najodpowiedniejszą, i przechodzi do następnej, jeśli plik się nie wczyta (MDN, link types).

Warto zmienić dwa ustawienia w wygenerowanym kodzie. theme-color i kolory manifestu domyślnie są białe (#ffffff): zastąp je kolorem swojej marki, jeśli chcesz, aby pasek przeglądarki i ekran startowy zainstalowanej aplikacji pasowały do Twojej strony. Manifest celowo zostawia też puste pola name i short_name: web.dev wyjaśnia, że wymagane jest co najmniej jedno z nich, a short_name jest używane na ekranie głównym, gdzie miejsca jest mało.

Czy favicon pomaga w SEO?

Nie jako czynnik rankingowy, ale kształtuje wygląd Twojego wyniku. Google może pokazywać Twoją favicon obok nazwy strony na górze każdego wyniku, więc wyraźna ikona pomaga wyszukującym rozpoznać Twoją markę i może podnieść Twój współczynnik klikalności w porównaniu z wynikami z ogólnym globusem.

Google podaje warunki kwalifikowania się, a brak jednego z nich to zwykła przyczyna, dla której favicon się nie pokazuje:

• Znacznik link na stronie głównej. Google odczytuje rel="icon", shortcut icon, apple-touch-icon i apple-touch-icon-precomposed.
• Dostęp dla robotów. Googlebot musi mieć dostęp do strony głównej, a Googlebot-Image do pliku ikony. Reguła w pliku robots.txt, która blokuje folder z obrazami, może ukryć Twoją favicon.
• Kwadratowy plik o rozmiarze co najmniej 8x8 pikseli, najlepiej większy niż 48x48, w obsługiwanym formacie: BMP, GIF, ICO, PNG, JPEG, PPM lub TIFF. Wygenerowane pliki PNG spełniają ten warunek.
• Jedna favicon na nazwę hosta. Subdomena może mieć własną ikonę; podkatalog taki jak /blog już nie.
• Stabilny adres URL, którego często nie zmieniasz.

Po zmianie Google musi ponownie przeszukać stronę główną, co według tej samej dokumentacji może potrwać od kilku dni do kilku tygodni. Zgłoszenie strony głównej do zaindeksowania w Search Console to przyspiesza.

Jak zaprojektować favicon, która pozostaje czytelna w 16 pikselach?

Projektuj najpierw pod najmniejszy rozmiar. W 16x16 cała ikona ma 256 pikseli, więc pełne logo z hasłem zamienia się w rozmazaną plamę. Te zasady utrzymują czytelność ikony:

• Użyj znaku logo, a nie pełnego logo. Symbol lub jedna pogrubiona litera przetrwa zmniejszenie; słowo nie.
• Wypełnij kwadrat. Zostaw cienki margines, ale unikaj dużych pustych obramowań, które czynią znak maleńkim na karcie.
• Postaw na mocny kontrast i dwa lub trzy płaskie kolory. Cienkie linie i gradienty znikają w małych rozmiarach.
• Sprawdź jasny i ciemny motyw. Przezroczysty PNG z ciemnym znakiem znika na ciemnym pasku kart; jednolite tło lub jasny kontur to naprawiają.
• Pomyśl o maskach na Androidzie. Android może przycinać ikony aplikacji do koła. MDN zaleca ikonę maskable z ważną częścią wewnątrz bezpiecznej strefy i nieprzezroczystym tłem (MDN, define app icons). Jeśli Twój znak dotyka krawędzi, wyeksportuj wersję z marginesem dla plików 192 i 512.

Jakie błędy z favicon zdarzają się najczęściej?

Większość zepsutych favicon wynika ze ścieżki lub pamięci podręcznej, a nie z samego obrazu.

• Pliki wgrane do złego folderu. Wygenerowany kod wskazuje na katalog główny (/favicon-32x32.png). Jeśli umieścisz pliki w /assets, zaktualizuj każdą ścieżkę.
• Brak pliku pod /favicon.ico. Gdy strona nie deklaruje ikony, standard HTML pozwala przeglądarkom domyślnie żądać /favicon.ico (WHATWG HTML standard, link types). Strony bez znaczników, takie jak pliki PDF czy strony błędów, wywołają wtedy błąd 404 w Twoich logach. Generator tworzy tylko pliki PNG, więc jeśli chcesz tego rozwiązania awaryjnego, wyeksportuj swój PNG 32x32 jako plik ICO w dowolnym edytorze obrazów.
• Stara ikona, która nie znika. Przeglądarki agresywnie buforują favicon. Po zmianie projektu zmień nazwę pliku lub dodaj parametr wersji (?v=2).
• Znaczniki tylko na stronie głównej. Przeglądarki odczytują ikonę strona po stronie, więc umieść kod we wspólnym szablonie.
• Rozciągnięte logo. Przytnij źródło do kwadratu przed generowaniem, jak opisano wyżej.

Gdy pliki są już online, uruchom ekstraktor favicon na swojej domenie, aby zobaczyć, które ikony faktycznie znajduje robot, a potem audyt SEO on-page, aby sprawdzić pozostałe znaczniki w head.

Jak favicon wpisuje się w Twoją markę w odpowiedziach AI?

Asystenci AI, tacy jak ChatGPT i Perplexity, często wyświetlają ikonę każdej cytowanej strony obok linku do źródła. Spójna favicon sprawia, że Twoja marka jest tam rozpoznawalna, ale to tylko oprawa: bycie cytowanym zależy od Twoich treści i Twojego autorytetu. Aby zobaczyć, czy Twoja strona w ogóle pojawia się w tych odpowiedziach, śledzenie wzmianek w AI mierzy wzmianki o Twojej marce co tydzień, prompt po prompcie i model po modelu, a panel GEO / SEO zestawia je z Twoimi kliknięciami i pozycjami w Google.

Kompletny zestaw favicon wymaga jednego kwadratowego obrazu i dwóch minut. Wygeneruj ikony powyżej, wklej kod do swojego szablonu, a potem zobacz plany Sorank, aby na autopilot zwiększać ruch, który te ikony zobaczy.