Rozmiary favicon: jakich ikon potrzebuje strona

Rozmiary favicon sprowadzają się dziś do pięciu plików: favicon.ico 32×32, ikony SVG, Apple touch icon 180×180 oraz dwóch plików PNG w manifeście aplikacji internetowej, 192×192 i 512×512, z których jeden jest maskable. Reszta, na przykład ikony Apple 57×57, kafelki Windows czy dodatkowe rozmiary PNG, to pozostałości, które można pominąć.

Tabela rozmiarów

Karty przeglądarki: favicon.ico i SVG

Karta pokazuje ikonę w rozmiarze 16 pikseli CSS, czyli 32 pikseli fizycznych na ekranie o dużej gęstości. Dlatego najważniejszy jest obraz 32×32 wewnątrz favicon.ico. Do tego samego pliku możesz dodać 16 i 48; przeglądarki wybiorą najbliższy.

Ikona SVG obejmuje wszystkie rozmiary naraz. Może też zawierać zapytanie media prefers-color-scheme, dzięki czemu ciemne logo jaśnieje na ciemnych kartach. Zadeklaruj najpierw ICO z sizes="32x32", a po nim SVG: przeglądarki obsługujące SVG wezmą jego, a pozostałe wrócą do ICO.

Google Search

Wytyczne Google dotyczące favicon wymagają kwadratowej ikony o wymiarach co najmniej 8×8 pikseli i zalecają ikonę większą niż 48×48. Obsługiwane formaty to BMP, GIF, ICO, PNG, JPEG, PPM i TIFF. SVG nie ma na tej liście, więc strona wyłącznie z SVG nie daje Google niczego do użycia. Google czyta zarówno rel="icon", jak i rel="apple-touch-icon", więc zadeklarowany Apple touch icon 180×180 spełnia już zalecenie co do rozmiaru. Jeśli chcesz osobnego pliku, sprawdzi się PNG 96×96.

iPhone i iPad

iOS używa Apple touch icon, gdy ktoś dodaje Twoją stronę do ekranu głównego. 180×180 to rozmiar dla obecnych iPhone'ów (60 punktów przy skali 3×); iPady zmniejszają go bez problemu, więc wystarczy jeden plik. Przezroczyste obszary na ekranie głównym robią się czarne, więc nadaj ikonie jednolite tło. Bez tej ikony iOS użyje zrzutu strony lub litery na zwykłym kafelku.

Android i instalowalne aplikacje internetowe

Android i Chrome czytają ikony z manifestu aplikacji internetowej. Ikona 192×192 trafia na ekran główny, a 512×512 pojawia się w oknie instalacji i na ekranie startowym.

Ikona maskable to osobny obraz 512×512, którego grafika wypełnia cały kwadrat. Android przycina go do kształtu używanego przez telefon: koła, squircle'a lub kwadratu z zaokrąglonymi rogami. Trzymaj logo wewnątrz wyśrodkowanego koła o średnicy równej 80% obrazu, a przetrwa każdą maskę. Bez ikony maskable Android zmniejsza zwykłą ikonę i umieszcza ją na białym kole.

Kod HTML

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

A tak wygląda część z ikonami w pliku site.webmanifest:

"icons": [
  { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
  { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
  { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]

Serwuj manifest jako application/manifest+json, a każdą ikonę z jej prawdziwym typem obrazu. Serwer, który na /favicon.ico odpowiada stroną HTML ze statusem 200, psuje ikonę, choć karta sieci wygląda w porządku. Aplikacje jednostronicowe robią tak często.

Rozmiary, które możesz pominąć

• Ikony Apple touch 57, 60, 72, 76, 114, 120, 144 i 152 px. iOS skaluje ikonę 180 px.
• mstile-*.png, browserconfig.xml i znaczniki msapplication-*. Obsługiwały kafelki Startu w Windows 8 i 10.
• mask-icon dla Safari. Safari 12 i nowsze używają dla przypiętych kart zwykłego favicon.
• Osobne linki do PNG 16×16 i 32×32, gdy favicon.ico zawiera już oba.

Sprawdź swój zestaw

Favicon Checker pobiera z Twojej strony każdy z powyższych plików, mierzy jego rzeczywisty rozmiar i format oraz pokazuje, jak ikony wyglądają w kartach, Google, iOS i Androidzie.