Czego potrzebujesz w 2026
| Plik | Rozmiar | Zastosowanie |
|---|---|---|
| favicon.ico | 16–48 px (kilka rozmiarów w jednym pliku) | Starsze przeglądarki i część narzędzi |
| favicon.svg | Wektor | Nowoczesne przeglądarki; ostry w każdym rozmiarze |
| apple-touch-icon.png | 180 × 180 px | Ekran główny iPhone’a/iPada |
| icon-192.png, icon-512.png | 192 i 512 px | Android i manifest aplikacji webowej |
Przygotuj pliki
- Zacznij od kwadratowego znaku logo (ikona lub inicjał są czytelniejsze w 16 px niż pełny napis).
- Jeśli logo ma biały prostokąt, usuń go w narzędziu Usuń tło z logo.
- Otwórz konwerter zdjęć i wybierz ICO — plik będzie zawierał rozmiary od 16 do 256 px.
- Wersje PNG 180, 192 i 512 px zrobisz w narzędziu Zmień rozmiar zdjęcia.
Dodaj do strony
Umieść pliki w katalogu głównym strony i dodaj do sekcji <head>: <link rel="icon" href="/favicon.ico" sizes="48x48">, <link rel="icon" href="/favicon.svg" type="image/svg+xml"> oraz <link rel="apple-touch-icon" href="/apple-touch-icon.png">.
Favicon w wynikach Google
Google pokazuje favicony obok wyników. Wytyczne wymagają kwadratowej ikony o rozmiarze będącym wielokrotnością 48 px (48, 96, 144…), która reprezentuje markę i jest dostępna dla Googlebota. Zmiany mogą pojawić się w wynikach dopiero po pewnym czasie.
Najczęstsze pytania
Czy favicon może być przezroczysty?
Tak, ale sprawdź go w jasnym i ciemnym motywie przeglądarki. Jednolite tło pod ikoną często jest czytelniejsze w trybie ciemnym.