Formatele favicon explicate: ICO, PNG, SVG și ce le trebuie browserelor

De ce faviconurile sunt încă surprinzător de complicate

Un favicon arată ca o singură imagine mică, dar se află la intersecția dintre interfața browserului, marcaje, taburi, scurtături fixate, rezultate de căutare, ecrane principale mobile și instalări de aplicații web progresive. Fiecare context are așteptări ușor diferite.

De aceea, sfaturile despre faviconuri par adesea dezordonate. Unele echipe livrează doar un singur favicon.ico, pentru că asta era cândva suficient. Altele generează o duzină de fișiere fără să știe care sunt folosite efectiv. Calea de mijloc rezonabilă este mai restrânsă: înțelege ce fac bine ICO, PNG și SVG, apoi livrează un set compact care acoperă browserele actuale și contextele uzuale ale dispozitivelor.

Faviconurile nu sunt locul în care să demonstrezi o conductă sofisticată de imagini. Sunt locul în care trebuie să fii previzibil, explicit și compatibil.

ICO: formatul vechi care refuză să dispară

ICO este containerul clasic pentru iconițe Windows. Poate conține mai multe imagini bitmap la dimensiuni diferite, de obicei 16×16, 32×32 și 48×48 pixeli. Asta contează pentru că un favicon poate fi randat foarte mic într-un tab de browser, mai mare într-o listă de marcaje și diferit din nou în scurtăturile Windows.

Detaliul important este că ICO este un container, nu pur și simplu o singură imagine. Un favicon.ico bun conține de obicei mai multe dimensiuni raster, astfel încât browserul sau sistemul de operare să poată alege cea mai apropiată potrivire în loc să scaleze un singur bitmap minuscul.

ICO este încă util din trei motive:

• Browserele pot solicita automat /favicon.ico, chiar dacă nu îl legi în HTML.
• Unele browsere și integrări mai vechi îl așteaptă.
• Este o soluție de rezervă sigură atunci când declarațiile de iconițe mai noi sunt ignorate.

Asta nu înseamnă că ICO ar trebui să fie singura ta iconiță. Este incomod de editat, nu este deosebit de prietenos cu fluxurile de lucru moderne și este slab ca sursă de adevăr pentru un semn de brand. Tratează-l ca soluție de rezervă pentru compatibilitate.

În practică, pune un /favicon.ico real la rădăcina site-ului. Nu servi un 404 acolo decât dacă îți plac logurile zgomotoase și reîncercările inutile ale browserului.

PNG: calul de povară fiabil

PNG este în continuare cel mai previzibil format raster pentru faviconuri și iconițe touch. Suportă transparența, este acceptat pe scară largă și se comportă consecvent între browsere și platforme.

Pentru faviconuri, PNG este util când vrei iconițe cu dimensiuni explicite în pixeli, cum ar fi 32×32 sau 48×48. Pentru iconițele de pe ecranul principal mobil, PNG este practic obligatoriu în unele medii. Apple touch icons, de exemplu, sunt bazate pe PNG în utilizarea normală de producție.

Câteva reguli practice ajută:

• Exportă dintr-o sursă vectorială, nu dintr-un bitmap deja mic.
• Fă iconița lizibilă la 16×16 înainte să te preocupe dimensiunile mai mari.
• Adaugă suficient spațiu interior, astfel încât semnul să nu pară tăiat în contexte rotunjite sau mascate.
• Evită textul fin, liniile subțiri și ilustrațiile detaliate.

Compresia PNG nu merită, de obicei, o atenție obsesivă pentru faviconuri, deoarece fișierele sunt foarte mici. Totuși, nu livra o iconiță touch de 500 KB doar pentru că a ieșit direct dintr-un export de design. Dacă revizuiești deja alegeri mai ample legate de imagini, aceeași gândire disciplinată din deciziile privind formatele de imagine pe web-ul modern se aplică și aici: alege formatul pentru sarcină, nu pentru că este la modă.

SVG: opțiunea modernă și flexibilă

Faviconurile SVG sunt atractive pentru că sunt independente de rezoluție. Un singur fișier mic poate fi randat clar la multe dimensiuni și poate fi editat direct în cod sau exportat din software de design.

Versiunile moderne de Chromium, Firefox și Safari acceptă faviconuri SVG. Asta face din SVG un format principal bun pentru favicon pe multe site-uri, mai ales când iconița este un logo simplu, un glif sau un semn geometric.

Dar faviconurile SVG vin cu rezerve.

În primul rând, SVG-ul ar trebui să fie autonom. Nu te baza pe fonturi externe, imagini la distanță sau scripturi. Browserele aplică restricții pentru SVG folosit ca imagine și, chiar dacă ceva funcționează într-un browser, poate eșua în altul.

În al doilea rând, păstrează-l simplu vizual. SVG nu rezolvă magic problema celor 16 pixeli. O ilustrație vectorială detaliată este tot o pată neclară când este înghesuită într-un tab.

În al treilea rând, ai grijă la stilizarea dinamică. Unele echipe folosesc prefers-color-scheme în interiorul unui favicon SVG, astfel încât iconița să se adapteze la temele deschise și întunecate ale browserului. Acest lucru poate funcționa, dar comportamentul browserelor și cachingul pot fi inegale. Dacă recunoașterea brandului contează, o singură iconiță robustă bate adesea una adaptivă și isteață.

SVG este o sursă bună și un format modern bun de livrare. Nu este un motiv să sari peste fișierele de rezervă.

Ce caută de fapt browserele

Browserele descoperă faviconuri în două moduri principale: linkuri HTML explicite și solicitări implicite la rădăcină.

Comportamentul implicit este cel vechi: dacă browserul vrea o iconiță și nu a găsit una, poate solicita /favicon.ico. De aceea, fișierul ICO de la rădăcină rămâne util chiar și pe site-urile moderne.

Comportamentul explicit folosește elemente <link> în head-ul documentului. O configurație modernă compactă arată așa:

<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="/site.webmanifest">

Manifestul poate apoi indica iconițe PNG mai mari folosite pentru aplicații web instalabile:

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

Aceasta nu este singura configurație validă, dar este o bază bună. Oferă browserelor moderne un SVG, furnizează o soluție de rezervă ICO convențională, acoperă salvările pe ecranul principal iOS și susține contextele de instalare a aplicațiilor.

Setul de favicon pe care ar trebui să îl livreze majoritatea site-urilor

Pentru un site obișnuit de marketing, un site de documentație, o aplicație SaaS sau o publicație, acest set este suficient:

• /favicon.ico care conține 16×16 și 32×32, opțional 48×48.
• /icon.svg ca favicon modern scalabil.
• /apple-touch-icon.png la 180×180.
• /icon-192.png și /icon-512.png dacă ai un manifest web app.

Poți adăuga mai multe dimensiuni dacă o platformă are o cerință specifică, dar nu genera zece fișiere din obișnuință. Fiecare fișier în plus este încă un lucru de cache-uit, uitat, denumit greșit sau lăsat învechit după un rebranding.

Dacă site-ul tău nu este instalabil și nu are manifest, s-ar putea să nu ai nevoie de iconițele de 192 și 512 pixeli. Dacă site-ul tău se comportă ca o aplicație, probabil că ai nevoie de ele.

Moduri comune de eșec

Cele mai frecvente buguri de favicon nu sunt artistice. Sunt probleme de livrare.

Una este cachingul agresiv. Browserele țin cu încăpățânare de faviconuri. În timpul testării, o iconiță schimbată poate să nu apară până când nu faci hard refresh, nu ștergi datele site-ului, nu folosești un nume nou de fișier sau nu testezi într-un profil proaspăt. Pentru rebrandinguri în producție, schimbarea la /icon.svg?v=2 poate ajuta în HTML, dar rădăcina /favicon.ico este mai dificilă, pentru că browserele o solicită direct. Înlocuirea fișierului și așteptarea expirării cache-urilor face adesea parte din treabă.

O altă problemă comună este tipul MIME greșit. SVG ar trebui servit ca image/svg+xml, PNG ca image/png, iar ICO, în mod obișnuit, ca image/x-icon sau image/vnd.microsoft.icon. Multe browsere sunt indulgente, dar nu toate contextele sunt. Dacă ceva eșuează doar într-un singur browser, inspectează răspunsul de rețea înainte să redesenezi iconița. Aceleași obiceiuri folosite când depanezi redirecturi și headere HTTP în producție se aplică aici: uită-te la răspunsul real, nu la ce susține CMS-ul că servește.

O a treia problemă este densitatea designului. Logo-urile care funcționează excelent în headerul unui site eșuează adesea ca faviconuri. Iconița din tab este un test brutal. Elimină cuvintele, simplifică formele, crește contrastul și testează la dimensiuni reale. Dacă iconița este conținut semnificativ în interiorul paginii, atunci aspecte de accesibilitate precum textul alternativ contează; pentru faviconul în sine, este decor de interfață al browserului, nu conținut de pagină. Pentru această distincție, vezi ghidul nostru pragmatic pentru textul alternativ al imaginilor.

<!-- tool-cta:start -->

💡 Încercați asta: Generați dintr-o singură trecere variantele ICO, PNG și SVG pe care le așteaptă browserele moderne cu Ultimate Favicon Generator.

<!-- tool-cta:end -->

O listă simplă de verificare pentru implementare

Folosește această listă de verificare înainte de livrare:

1. Pornește de la un master vectorial curat.
2. Testează semnul la 16×16 și 32×32.
3. Exportă un favicon SVG autonom.
4. Generează o soluție de rezervă ICO cu mai multe dimensiuni.
5. Exportă o iconiță Apple touch de 180×180.
6. Adaugă PNG-uri de 192×192 și 512×512 dacă folosești un manifest.
7. Pune /favicon.ico la rădăcina site-ului.
8. Verifică codurile de stare, tipurile MIME și headerele de caching.
9. Testează în cel puțin un browser Chromium, Firefox și Safari dacă publicul tău include dispozitive Apple.

Faviconurile sunt mici, dar sunt și foarte vizibile. Unul stricat face un site să pară neterminat. Unul bine făcut dispare în interfață, ceea ce este exact scopul.