Căutarea „dimensiune favicon” încă afișează liste cu cincisprezece fișiere moștenite din 2014. În practică, șase dimensiuni acoperă acum filele browserelor, rezultatele de căutare, iOS, Android și PWA. Iată care sunt și de ce.
Dimensiunile de care ai cu adevărat nevoie
Fiecare rând corespunde unei utilizări documentate în pachetul propus. Tabelul preferă un set restrâns și interoperabil unei colecții de variante istorice.
| Fișier | Dimensiuni | Utilizare |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | File, marcaje, browsere vechi, roboți de indexare |
| favicon.svg | vectorial, pătrat | Browsere moderne, clar la orice dimensiune, acceptă modul întunecat |
| favicon-96x96.png | 96×96 | Rezultate de căutare Google pe mobil |
| apple-touch-icon.png | 180×180 | Ecran de pornire iOS și iPadOS, fără transparență |
| web-app-manifest-192x192.png | 192×192 | Ecran de pornire Android, declarat în manifestul web |
| web-app-manifest-512x512.png | 512×512 | Ecran de lansare PWA, versiunea „maskable” |
De ce 16, 32 și 48 se află în același .ico
ICO este un format container: un singur fișier poate conține mai multe imagini, iar browserul o alege pe cea potrivită afișării. Exact de asta ai nevoie, deoarece dimensiunea solicitată se schimbă în funcție de context.
16×16 deservește o filă pe un ecran standard. 32×32 oferă o variantă pentru ecranele cu densitate mare și alte interfețe ale browserului. 48×48 completează containerul și respectă regula multiplilor de 48 documentată de Google pentru faviconurile din rezultatele de căutare.
Distribuirea unui .ico care conține doar 16×16 este cea mai frecventă greșeală: pe un ecran Retina, pictograma este mărită și rămâne mereu neclară.
180×180 pentru iOS, 192 și 512 pentru Android
iOS nu citește manifestul web pentru pictograma ecranului de pornire: caută o etichetă apple-touch-icon. Este suficientă o singură dimensiune, 180×180, care acoperă toate dispozitivele iPhone și iPad recente. Sistemul o micșorează singur pentru dispozitivele mai vechi.
Android folosește în schimb manifestul web. Sunt suficiente două intrări: 192×192 pentru pictograma ecranului de pornire și 512×512 pentru ecranul de lansare când site-ul este instalat ca aplicație. Versiunea 512 trebuie declarată cu purpose „maskable”, adică desenată astfel încât să suporte decuparea într-un cerc sau pătrat cu colțuri rotunjite.
Pentru o pictogramă maskable, păstrează elementele esențiale în zona centrală de 80%. Orice element din exterior poate fi decupat în funcție de producătorul telefonului.
De la ce imagine sursă să pornești
Cel mai bun punct de plecare este un SVG: se redimensionează fără pierderi la toate dimensiunile de mai sus. În lipsa lui, folosește un PNG pătrat de cel puțin 512×512 pixeli, astfel încât inclusiv pictograma Android de lansare să fie obținută prin micșorare, niciodată prin mărire.
O siglă orizontală cu text nu funcționează la 16×16: la această dimensiune, un cuvânt devine o pată de trei pixeli. Extrage simbolul sau pornește de la una ori două litere pe un fundal contrastant.
La final, verifică contrastul pe fundaluri luminoase și întunecate: o siglă neagră dispare într-o filă cu temă întunecată. Tocmai pentru asta există varianta întunecată a faviconului SVG.
Dimensiunile de care nu mai ai nevoie
Generatoarele mai vechi încă produc fișiere pentru integrări istorice, precum dalele Windows care folosesc mstile-150x150.png și browserconfig.xml. Adaugă-le doar dacă lista platformelor acceptate vizează explicit acele interfețe.
Seria lungă apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 și 152x152 datează din perioada când iOS nu putea redimensiona imaginile. O singură imagine de 180×180 le înlocuiește pe toate.
Eliminarea declarațiilor inutile simplifică depozitul de cod și HTML-ul. Verifică browserele și platformele pe care le vizezi înainte de a elimina o integrare existentă.
Surse primare
Întrebări frecvente
Mai este necesar un favicon.ico?
Da, dar numai la rădăcina site-ului. Browserele moderne preferă SVG-ul, însă numeroși roboți de indexare, agregatoare și clienți de e-mail încă solicită /favicon.ico fără să citească HTML-ul. Fișierul are câțiva kiloocteți: păstrează-l.
Ce dimensiune de favicon folosește Google în rezultatele de căutare?
Google solicită o pictogramă a cărei latură este multiplu de 48 pixeli și o afișează de obicei la 48×48. Un PNG de 96×96 sau un SVG acoperă ușor această cerință. Pictograma trebuie să fie accesibilă roboților și să nu fie blocată de robots.txt.
Faviconul poate fi dreptunghiular?
Tehnic, da; vizual, nu. Fiecare context de afișare rezervă un pătrat: o imagine dreptunghiulară este fie deformată, fie centrată cu benzi goale. Pornește întotdeauna de la un pătrat și adaugă spațiu în jurul simbolului dacă este nevoie.