Poradnik
Rozmiar favicon: jakie wymiary i formaty są potrzebne
Favicon jest wyświetlany w wielu rozmiarach, od karty przeglądarki o boku 16 pikseli po ikonę aplikacji o boku 512 pikseli. Ten poradnik zbiera rozmiary, które mają znaczenie, i pokazuje, jak je dodać.
Rozmiar favicon na stronę: krótka lista
| Rozmiar | Plik | Gdzie jest używany |
|---|---|---|
| 16 × 16 px | favicon.ico | Karty przeglądarki i zakładki |
| 32 × 32 px | favicon.ico | Karty na ekranach o dużej gęstości pikseli, skróty w Windows |
| 48 × 48 px | favicon.ico | Windows i wyniki wyszukiwania Google |
| 180 × 180 px | apple-touch-icon.png | Ekran początkowy iPhone'a i iPada |
| 192 × 192 px | icon-192.png | Android i zainstalowane aplikacje webowe |
| 512 × 512 px | icon-512.png | Ekrany powitalne i sklepy z aplikacjami webowymi |
Jeden plik favicon.ico z rozmiarami 16, 32 i 48 px oraz trzy pliki PNG obsługują przeglądarki, telefony i wyszukiwarki. Nasz generator favicon tworzy je wszystkie z jednego obrazu.
Rozmiar favicon w pikselach dla wyszukiwarki Google
Google pokazuje favicony obok wyników wyszukiwania. Wytyczne wymagają kwadratowej ikony o boku co najmniej 8 pikseli i zalecają ikonę większą niż 48 × 48 pikseli, żeby dobrze wyglądała na różnych powierzchniach (Google Search Central). Spełnia to zalecenie favicon.ico z obrazem 48 px albo podlinkowany PNG o rozmiarze 192 px.
Formaty favicon: ICO, PNG i SVG
- ICO mieści kilka rozmiarów w jednym pliku i to o niego przeglądarki proszą pod adresem
/favicon.ico, gdy strona nie deklaruje ikony. Zachowaj go ze względu na zgodność. - PNG służy do Apple touch icon i ikon aplikacji wymienionych w manifeście.
- SVG działa jako favicon w nowoczesnych przeglądarkach i jest ostry w każdym rozmiarze. Dodaj go jako ikonę dodatkową, a nie jedyną.
Aby zamienić istniejący PNG na plik .ico z wybranymi rozmiarami, użyj konwertera PNG na ICO.
Favicon.ico w HTML: jak dodać ikony do strony
Wgraj pliki do katalogu głównego strony i dodaj te znaczniki w sekcji <head>:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Manifest wymienia ikony 192 i 512 px. Pomiń wiersz z SVG, jeśli nie masz wersji SVG.
Rozmiar favicon w WordPressie, Shopify i Squarespace
Kreatory stron proszą o jeden obraz i same tworzą z niego potrzebne rozmiary. WordPress nazywa go ikoną witryny i wymaga kwadratowego obrazu o boku co najmniej 512 pikseli. Shopify i Squarespace także przyjmują kwadratowy obraz w ustawieniach marki lub wyglądu. Wgraj duży, kwadratowy PNG i pozwól platformie go przeskalować, a potem sprawdź wynik na karcie przeglądarki.