Favicon (.ico) vs PNG

Formatul .ico a fost creat special pentru a păstra mai multe dimensiuni de pictogramă într-un singur container binar. Un favicon.ico bine construit conține cadre la 16×16, 32×32, 48×48 și 64×64 pixeli. Când un browser are nevoie de o favicon pentru o filă, deschide fișierul .ico, citește directorul ICO și selectează cadrul care se potrivește cel mai bine cu dimensiunea de afișare necesară. Această capacitate de dimensiuni multiple este avantajul definitoriu al .ico față de PNG.

PNG este un format cu o singură imagine. Un fișier PNG conține exact o imagine la exact o rezoluție. Pentru a acoperi mai multe dimensiuni numai cu PNG, aveți nevoie de mai multe fișiere și mai multe etichete `<link>` cu atribute `sizes=` explicite. Acest lucru este mai detaliat, dar permite un control precis asupra imaginii difuzate la fiecare rezoluție. PNG acceptă, de asemenea, o compresie fără pierderi mai bună decât cadrele ICO codificate BMP la orice rezoluție dată.

Compatibilitatea browserului este locul în care .ico câștigă decisiv. Fiecare browser – inclusiv vechiul IE, vechiul Edge, versiunile antice Safari și browserele de nișă obscure – preia /favicon.ico de la rădăcina domeniului fără a fi necesară nicio etichetă `<link>`. Chiar dacă omiteți complet eticheta de link, browserele vor încerca GET /favicon.ico ca convenție. PNG necesită etichete `<link rel='icon' type='image/png'>` explicite cu tipuri MIME corecte sau sunt ignorate.

Suportul pentru transparență este egal între .ico și PNG. Ambele formate acceptă un canal alfa de 8 biți (transparență completă per pixel). Cu toate acestea, .ico păstrează transparența doar atunci când cadrele sale interne utilizează compresia PNG, nu BMP. Vechile codificatoare ICO uneori sunt implicite la BMP, care are o transparență limitată (1-bit). Utilizați întotdeauna un generator modern care produce cadre .ico comprimate cu PNG.

Comparația dimensiunii fișierului depinde de context. Un singur PNG de 32×32 este mai mic decât un fișier .ico cu dimensiuni multiple care reunește cadre de 16, 32, 48 și 64 px. Cu toate acestea, .ico înlocuiește patru fișiere PNG separate plus patru etichete de link. Pentru sarcina utilă totală, un .ico de mai multe dimensiuni bine comprimat este aproape întotdeauna mai mic decât setul echivalent de PNG-uri individuale combinate.

PNG câștigă eficiența compresiei la orice dimensiune individuală. Algoritmul de compresie PNG (DEFLATE/zlib) este deosebit de eficient pentru logo-uri cu culori plate și lucrări de artă în stil pictogramă, cu margini ascuțite și palete de culori limitate. O siglă PNG de 32×32 la compresie optimă poate fi sub 200 de octeți. Cadrul BMP echivalent din interiorul unui .ico este întotdeauna de 4 KB, indiferent de conținutul imaginii.

Pentru eligibilitatea faviconului Căutare Google, sunt acceptate atât .ico, cât și PNG. Crawler-ul Google preia mai întâi favicon-ul conectat în HTML dvs. sau revine la /favicon.ico. Cerința minimă este de 48×48 de pixeli și o adresă URL accesibilă public. Un PNG de dimensiuni adecvate asociat cu `<link rel='icon' type='image/png' sizes='48x48' href='/favicon-48x48.png'>` satisface acest lucru la fel de bine ca un pachet .ico de aceeași dimensiune.

Comportamentul în modul întunecat diferă între formate. Fișierele PNG nu se pot adapta la schema de culori a utilizatorului — veți avea nevoie de JavaScript pentru a schimba în mod dinamic eticheta de link href, care este fragilă. Formatul .ico nu are deloc capacitatea de mod întunecat. Pentru adaptarea favicon-ului în modul întunecat, numai SVG îl acceptă în mod nativ printr-un bloc stil `@media (prefers-color-scheme: dark)` încorporat. PNG și .ico ar trebui să fie asociate cu o suprapunere SVG.

Configurația modernă optimă combină ambele formate. Utilizați `<link rel='icon' href='/favicon.ico'>` ca alternativă universală, `<link rel='icon' type='image/png' sizes='32x32' href='/favicon-32x32.png'>` pentru claritatea retinei și `<link rel='icon' type='image/svg+xml' href='/favicon.svg'>` pentru suport scalabil pentru modul întunecat. Browserele care înțeleg faviconurile SVG selectează SVG; altele cad până la PNG; browserele antice primesc .ico.

Integrarea cu sistemul de operare Windows este un domeniu exclusiv .ico. Comenzile rapide de pe desktop, pictogramele File Explorer și pinii Windows din bara de activități citesc toate formatul .ico. Dacă vreunul dintre utilizatorii dvs. fixează site-ul dvs. în bara de activități Windows sau creează o comandă rapidă de pe desktop către adresa URL, numai /favicon.ico este folosit ca pictogramă de comandă rapidă. Fișierele PNG sunt complet ignorate în acest context.

Pentru 180×180 apple-touch-icon, PNG este singurul format valid. iOS nu citește .ico pentru pictogramele de pe ecranul de pornire — necesită în mod special un PNG conectat prin `<link rel='apple-touch-icon'>`. Acesta este un caz în care PNG nu este doar preferat, ci și obligatoriu.

Configurația serverului nu trebuie trecută cu vederea. Multe servere web servesc .ico cu un tip de conținut incorect (`text/plain` în loc de `image/x-icon`) dacă nu este configurat în mod explicit. Fișierele PNG au un suport mai larg de tip MIME pe platformele de găzduire. Dacă vedeți că favicon.ico nu se încarcă, verificați dacă serverul returnează `Content-Type: image/x-icon` sau `image/vnd.microsoft.icon` pentru solicitările ICO.

favicon generator scoate ambele formate simultan. Nu trebuie să alegeți — pachetul de descărcare include favicon.ico, fișiere PNG de sine stătătoare la 32×32 și 180×180 și SVG pentru stiva completă modernă. Folosirea acestui pachet înseamnă că se răspunde automat la întrebarea ICO vs PNG: folosiți ambele, fiecare în contextul în care excelează.

Pentru o comparație completă a formatului care acoperă și SVG, consultați best favicon format guide. Acest ghid explică ce format să acordați prioritate pentru fiecare caz de utilizare — site-ul web standard, PWA, magazin de comerț electronic și instrument pentru dezvoltatori — și oferă o matrice de decizie pentru alegerea stivei de favicon.