Ce este un favicon și cum creezi unul din logo-ul tău (2026)
Un favicon este pictograma mică ce reprezintă site-ul tău într-un tab de browser, un marcaj sau pe ecranul de start al telefonului. Creează-l din simbolul logo-ului tău, simplifică-l ca să se citească la 16–32 pixeli și livrează setul minim din 2026: un SVG, un ICO de rezervă și un apple-touch-icon de 180×180.
Pe această pagină
Ce este un favicon?
Un favicon (prescurtare de la „favorite icon”) este imaginea pătrată mică ce reprezintă un site web într-un tab de browser, un marcaj, o intrare din istoric și pe ecranul de start al unui telefon. Este aproape întotdeauna o versiune simplificată a logo-ului unui brand — mai exact simbolul, pentru că nu există loc pentru numele complet la acea dimensiune.
De ce contează un favicon?
Un favicon este o bucată mică, dar constantă, de branding. Cu o duzină de tab-uri deschise, este adesea singurul mod în care cineva îți observă site-ul dintr-o privire, iar o pictogramă salvată pe ecranul de start stă lângă pictograme de aplicații lustruite. Un favicon clar, fidel brandului, arată îngrijit; unul lipsă sau neclar arată neterminat.
Dimensiunile și formatele de favicon de care ai nevoie
Nu ai nevoie de duzina de pictograme pe care le enumeră tutorialele vechi. În 2026, setul minim și fiabil este mic:
| Fișier | Dimensiune | Scop |
|---|---|---|
favicon.svg | oricare | browsere moderne; se poate adapta la modul întunecat |
favicon.ico | 16 + 32 | soluție de rezervă (browsere mai vechi) |
apple-touch-icon.png | 180×180 | ecranul de start iOS |
| Pictograme PWA (opțional) | 192, 512 | aplicații web instalabile |
Dimensiuni precum 64×64, 96×96 și 128×128, recomandate de ghiduri vechi, sunt depășite — sări peste
ele. .ico este o soluție de rezervă, nu fișierul principal: browserele care suportă SVG îl vor
prefera pe acesta.
Cum creezi un favicon din logo-ul tău
- Pornește de la simbol, nu de la logo-ul complet — numele nu se va citi la dimensiune de tab.
- Simplifică pentru dimensiuni foarte mici. Elimină detaliile fine, liniile subțiri și gradienții discreți care dispar la 16–32 pixeli. Preferă forme îndrăznețe și contrast ridicat.
- Păstrează-l pătrat, cu puțin padding, ca să nu fie înghesuit lângă marginile tab-ului.
- Exportă setul — SVG, ICO și PNG-ul de 180×180 — din fișierul vectorial master al logo-ului tău.
Pentru că SVG este formatul master ideal, merită să înțelegi SVG vs PNG pentru logo înainte să exporți.
Cum legi un favicon în HTML-ul tău
Trimite către fișiere din <head>-ul paginilor tale. Un set modern și minimal arată așa:
<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" />
Browserele care suportă SVG îl folosesc pe acesta; restul cad pe ICO.
Bonus: un favicon care se adaptează la modul întunecat
Un favicon SVG poate avea propriul stil pentru modul întunecat. Include o interogare media în interiorul SVG-ului, astfel încât simbolul își schimbă culorile odată cu tema browserului:
<style>
path {
fill: #18231d;
}
@media (prefers-color-scheme: dark) {
path {
fill: #eef1ea;
}
}
</style>
Chrome, Firefox și Edge respectă acest lucru; Safari încă nu, așa că alege culori care rămân lizibile în ambele teme, ca soluție de rezervă.
Testarea favicon-ului tău
Verifică-l într-un tab de browser real, în mod deschis și întunecat, și pe ecranul de start al unui
telefon. Pentru că browserele stochează agresiv favicon-urile în cache, fă o reîmprospătare forțată
după orice modificare — sau golește cache-ul redenumind fișierul sau adăugând ?v=2. Dacă arată
neclar la dimensiune de tab, simplifică simbolul și mai mult: favicon-ul este testul cinstit al cât
de bine se reduce un logo.
Dacă îți construiești logo-ul cu LogoSaga, exportul include deja un favicon.svg alături de SVG-ul
și PNG-ul logo-ului, astfel încât favicon-ul se potrivește mereu exact cu simbolul.
Întrebări frecvente
Ce dimensiune ar trebui să aibă un favicon?
Oferă un SVG scalabil plus dimensiuni raster PNG: 32×32 este standardul modern pentru tab, 16×16 este dimensiunea mică clasică, iar 180×180 este pictograma Apple touch. PWA-urile au nevoie și de 192×192 și 512×512.
Ce format ar trebui să aibă un favicon — SVG, PNG sau ICO?
Folosește un SVG pentru browsere moderne, un ICO ca soluție de rezervă pentru browsere vechi și PNG-uri pentru apple-touch-icon și dimensiunile PWA. SVG este scalabil și se poate adapta chiar și la modul întunecat; ICO acoperă browserele mai vechi.
Se poate schimba un favicon în modul întunecat?
Da, cu un favicon SVG. Include o interogare media prefers-color-scheme în interiorul SVG-ului ca să definești culori pentru modul deschis și cel întunecat. Safari încă nu o respectă, așa că alege o culoare neutră care se citește în ambele moduri.
De ce nu apare sau nu se actualizează favicon-ul meu?
Browserele stochează favicon-urile agresiv în cache. După o modificare, reîmprospătează forțat pagina sau forțează golirea cache-ului redenumind fișierul sau adăugând un query string precum favicon.svg?v=2, și confirmă că etichetele link din antetul paginii sunt corecte.
Surse
- What's in the head? Web page metadata — MDN Web Docs