Generator favikon

Co jest w favicons.zip

Wgraj jeden obraz, a generator utworzy w przeglądarce wszystkie pliki potrzebne współczesnej stronie:

Plik	Rozmiar	Używany przez
favicon.ico	16, 32 i 48 px w jednym pliku	Karty przeglądarki, zakładki, Windows, każde narzędzie pytające o /favicon.ico
favicon-16x16.png	16×16	Karty na zwykłych ekranach
favicon-32x32.png	32×32	Karty na ekranach o wysokiej gęstości, skróty
favicon-48x48.png	48×48	Wyniki wyszukiwania Google, skróty na pulpicie
apple-touch-icon.png	180×180	„Do ekranu początkowego" na iPhonie i iPadzie
android-chrome-192x192.png	192×192	Ekran główny Androida
android-chrome-512x512.png	512×512	Strony zainstalowane jako aplikacja (PWA) i ekran startowy
site.webmanifest	—	Mówi Androidowi/Chrome, gdzie leżą dwie duże ikony
README-favicon.html	—	Znaczniki HTML do wklejenia

Jaki obraz źródłowy sprawdza się najlepiej

• Kwadratowy, prosty, wyrazisty. Przy 16 px masz łącznie 256 pikseli. Pełne logo ze sloganem zamienia się w plamę; jedna litera lub symbol pozostaje czytelny. Wiele marek ma uproszczony znak tylko na favicon.
• Co najmniej 512×512. Największa ikona ma 512 px, więc mniejszy obraz zostanie powiększony i będzie rozmyty. Idealne jest logo SVG — renderowane w wysokiej rozdzielczości przed zmniejszeniem.
• Przezroczysty PNG lub SVG. Przezroczystość zostaje w .ico i małych PNG, więc ikona dobrze wygląda w jasnym i ciemnym motywie przeglądarki.
• Obraz nie jest kwadratowy? Zostaje wpasowany w kwadrat bez przycinania, z przezroczystym marginesem po bokach. Jeśli wolisz wypełnić kwadrat, najpierw go przytnij albo zrób okrągłą wersję w przycinaniu do koła.

Tło ikony Apple touch

iOS nie dopuszcza przezroczystości w ikonach ekranu początkowego — przezroczyste miejsca robią się czarne. Dlatego apple-touch-icon.png (180×180) zawsze dostaje pełne tło. Domyślnie białe; pole koloru obok obszaru wgrywania pozwala ustawić kolor marki (próbnik kolorów odczyta go z logo). Pozostałe rozmiary zostają przezroczyste.

Gdzie umieścić pliki

1. Rozpakuj i wgraj wszystkie pliki do katalogu głównego strony, tak by https://twojastrona.pl/favicon.ico otwierał ikonę.
2. Wklej znaczniki z README-favicon.html do sekcji <head> każdej strony (albo do szablonu nagłówka motywu):

<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">

3. Jeśli strona działa w podkatalogu, popraw ścieżki.

W WordPressie Wygląd → Dostosuj → Tożsamość witryny → Ikona witryny załatwia to jednym obrazem 512×512 — użyj android-chrome-512x512.png. Shopify, Wix i Squarespace mają podobne pole „favicon".

Dołączony site.webmanifest zawiera tylko listę ikon. Jeśli chcesz, by odwiedzający mogli zainstalować stronę jak aplikację, dodaj name, short_name, theme_color, background_color i "display": "standalone".

„Zmieniłem favicon, a wciąż widzę stary"

Favicony są cache'owane uporczywiej niż prawie wszystko inne na stronie.

• Otwórz bezpośrednio https://twojastrona.pl/favicon.ico i wymuś odświeżenie (Ctrl + F5, na Macu Cmd + Shift + R).
• Dodaj wersję do linków, np. href="/favicon.ico?v=2", by przeglądarka uznała go za nowy plik.
• Wyczyść cache CDN lub wtyczki cache, jeśli z nich korzystasz.
• Zakładki i skróty na ekranie głównym zachowują starą ikonę, dopóki się ich nie utworzy na nowo.
• Google aktualizuje ikonę w wynikach dopiero po ponownym zindeksowaniu strony głównej, co może potrwać od kilku dni do tygodni. Google wymaga kwadratowej ikony o boku będącym wielokrotnością 48 px — PNG 48×48 i .ico to spełniają.

Powiązane narzędzia

• Usuń tło ze zdjęcia, zanim zrobisz z niego ikonę: Usuń tło.
• Logo tylko w WebP? Zamień je na PNG, jeśli program go nie otwiera.
• Potrzebujesz zwykłego obrazu 512×512 do sklepu albo profilu? Zmień rozmiar na 512×512.