Ce dimensiuni de favicon îți trebuie în 2026? Setul ideal

În 2026, setul ideal de favicon este: un favicon.ico care conține imagini de 16, 32 și 48 px, un PNG de 96x96 (pentru Google Search), un favicon SVG opțional, un apple-touch-icon.png de 180x180 și PNG-uri de 192x192 și 512x512 (plus un 512 maskable) declarate într-un manifest de aplicație web. Tile-urile Windows și dimensiunile Apple vechi sunt necesare doar dacă trebuie să susții dispozitive foarte vechi. Mai jos explicăm de ce, cu un tabel de dimensiuni, cod HTML gata de utilizat și greșelile frecvente de evitat.

Peisajul faviconurilor era haotic: fiecare browser și sistem de operare cerea propria dimensiune, ceea ce producea faimoasele blocuri <head> de 20 de linii. Astăzi, cea mai mare parte din asta este depășită. Browserele moderne scalează o singură pictogramă bună, iOS vrea o singură dimensiune, iar Android citește manifestul. Acest articol separă ce este cu adevărat necesar de ce este doar util.

Răspunsul scurt: setul ideal de fișiere favicon

• favicon.ico (16, 32, 48 px într-un singur fișier) în rădăcina site-ului. Browserele, cititoarele de feeduri și multe instrumente încă solicită automat /favicon.ico.
• favicon.svg (opțional, dar recomandat) pentru o redare clară la orice dimensiune și suport pentru modul întunecat.
• PNG 16x16, 32x32 și 96x96 ca variante de rezervă explicite. Versiunea de 96 px ajută în Google Search, care cere un multiplu de 48 px.
• apple-touch-icon.png de 180x180, opac, fără transparență.
• PNG de 192x192 și 512x512 în manifest.json, plus o pictogramă maskable de 512x512 pentru Android.
• Eticheta meta theme-color pentru colorarea interfeței browserului pe mobil.
• Tile-uri Windows (70, 150, 310 px) cu browserconfig.xml, doar pentru Windows vechi și site-urile fixate în IE11.

Tabel cu dimensiuni favicon: scop, nume de fișiere și prioritate

Folosește acest tabel ca listă de verificare. „Necesar” înseamnă că un site obișnuit va arăta defect sau neterminat fără el; „Recomandat” înseamnă un câștig clar de calitate; „Opțional” înseamnă utilizare de nișă sau veche.

favicon.ico: 16, 32 și 48 px într-un singur fișier

Un fișier ICO este un container care conține mai multe imagini bitmap. Un favicon.ico bun include imagini de 16x16, 32x32 și 48x48, astfel încât browserul sau sistemul de operare să poată alege varianta cea mai potrivită. Pune-l în rădăcina domeniului (https://example.com/favicon.ico). Chiar dacă HTML-ul tău indică altundeva, mulți crawleri, cititoare RSS și browsere mai vechi cer exact acest URL, așa că dacă îl ai, eviți zgomotul de 404 din loguri.

Nu redenumi pur și simplu un PNG în .ico. Majoritatea browserelor tolerează asta, dar unele instrumente îl resping și pierzi avantajul mai multor rezoluții. Exportă un ICO real.

Favicon PNG: 16, 32 și 96 px

Linkurile PNG cu sizes explicit permit browserului să aleagă cel mai bun bitmap fără să analizeze ICO-ul. În practică, 32x32 acoperă taburile high-DPI, iar 16x16 este aproape redundant astăzi. Dimensiunea 96x96 merită adăugată, deoarece Google Search afișează favicon-uri lângă rezultate și cere o pictogramă pătrată a cărei dimensiune este multiplu de 48 px (48x48, 96x96, 144x144 și așa mai departe). Un fișier de 96 px oferă Google o sursă mai clară decât unul de 48 px atunci când redimensionează pentru rezultatele de pe mobil.

Sfat de design: la 16 px, detaliile fine dispar. Folosește o formă simplă și îndrăzneață, contrast ridicat și puțin text sau deloc. Poți ajusta și previzualiza pictograma în editorul MakeFav înainte de export.

Favicon SVG și modul întunecat

Un favicon SVG este un singur fișier minuscul care rămâne clar la orice densitate a ecranului. Este acceptat de browserele bazate pe Chromium și de Firefox. Suportul din Safari a fost istoric limitat, așa că nu te baza niciodată doar pe SVG: păstrează variantele de rezervă ICO și PNG.

Cel mai mare avantaj este tematizarea. Deoarece un SVG poate conține CSS, poți adapta pictograma la schema de culori a utilizatorului cu prefers-color-scheme:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

Reține că media query reflectă tema browserului sau a sistemului de operare, pe care o folosește bara de taburi. Nu urmează un comutator de temă de pe propriul tău site.

O particularitate cunoscută: când sunt listate și un ICO, și un SVG, Chrome poate alege ICO-ul. Dacă declari ICO-ul cu sizes="32x32" și listezi SVG-ul după, Chrome va prefera SVG-ul, așa cum se vede în codul de mai jos.

Apple touch icon: 180x180 și dimensiunile vechi

Când un utilizator adaugă site-ul tău pe ecranul de start iOS sau iPadOS, Safari folosește apple-touch-icon. Astăzi este suficient un singur PNG de 180x180 px: iOS îl redimensionează pentru dispozitive mai vechi și pentru iPad-uri. Denumește-l apple-touch-icon.png și pune-l în rădăcină; iOS caută implicit acest fișier chiar dacă nu există nicio etichetă link.

Reguli pentru pictograma Apple:

• Fără transparență. iOS umple pixelii transparenți cu negru, așa că un logo transparent ajunge adesea o pată neagră. Adaugă o culoare de fundal solidă.
• Fără colțuri rotunjite. iOS aplică propria mască rotunjită. Furnizează un pătrat complet.
• Ține conținutul important departe de margini, deoarece colțurile sunt tăiate.

Când ai nevoie de dimensiunile vechi (57, 72, 76, 114, 120, 144, 152, 167)? Doar dacă suporți iOS 6 sau mai vechi ori vrei control exact al pixelilor per dispozitiv pentru iPad Pro (167 px) și iPad (152 px). Pentru aproape orice site în 2026, fișierul de 180x180 este suficient. Configurația cu compatibilitate maximă de mai jos include câteva, pentru completitudine.

Pictograme Android și PWA: 192, 512 și maskable

Chrome pe Android și alte browsere compatibile PWA citesc pictogramele din manifestul aplicației web, nu din <link rel="icon">. Pentru a putea fi instalată, ai nevoie de cel puțin un PNG de 192x192 și unul de 512x512. Pictograma de 192 px este folosită pe ecranul de start și în lansatorul de aplicații; cea de 512 px apare pe ecranele de întâmpinare și în dialogurile de instalare.

Pictograme maskable și zona de siguranță

Pictogramele adaptive Android pot fi decupate în cerc, squircle sau altă formă, în funcție de dispozitiv. O pictogramă maskable este concepută să fie decupată în siguranță: conținutul important trebuie să se afle în zona de siguranță, un cerc centrat cu diametrul de 80% din imagine (raza egală cu 40% din latură). Pentru un fișier de 512x512, asta înseamnă să ții logoul într-un cerc cu diametrul de aproximativ 410 px și să extinzi culoarea de fundal pe toate cele patru margini, ca să nu apară goluri după mascare.

Declară pictograma maskable ca intrare separată, cu "purpose": "maskable". Evită "any maskable" pe un singur fișier: marginea necesară pentru mascare pare prea mică atunci când pictograma este afișată nemascată.

Exemplu de manifest.json

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Servește fișierul ca application/manifest+json (sau application/json) și leagă-l din fiecare pagină cu <link rel="manifest" href="/manifest.json">. Unele proiecte îl numesc site.webmanifest; numele nu contează, contează linkul.

Tile-uri Windows și browserconfig.xml

Windows 8.1 și 10 permit utilizatorilor să fixeze un site în meniul Start, iar IE11 și Edge vechi citesc imaginile pentru tile-uri din browserconfig.xml. Dimensiunile uzuale sunt 70x70 (mic), 150x150 (mediu), 310x150 (lat) și 310x310 (mare). Edge bazat pe Chromium folosește în schimb manifestul și faviconurile obișnuite, deci aceasta este o funcție veche. Include-o doar dacă audiența ta mai include configurații Windows vechi, de exemplu în medii corporative.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color: colorarea interfeței browserului

Eticheta meta theme-color spune browserelor mobile (și unora de desktop) ce culoare să folosească pentru bara de adrese sau bara de titlu. Nu este un favicon, dar face parte din același set de branding. Poți furniza valori separate pentru modul luminos și cel întunecat:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

Configurație modernă minimă vs. compatibilitate maximă

Configurație modernă minimă (recomandată pentru majoritatea site-urilor)

Cinci fișiere acoperă peste 99% din utilizarea reală: favicon.ico, favicon.svg, apple-touch-icon.png (180x180) și cele două pictograme din manifest (192 și 512). Adaugă PNG-ul de 96x96 dacă vizibilitatea în Google Search contează și o pictogramă maskable dacă livrezi un PWA.

<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="/manifest.json">

Configurație cu compatibilitate maximă

Alege-o atunci când te adresezi unei audiențe largi sau enterprise ori când vrei să acoperi toți clienții posibili. Adaugă dimensiuni PNG explicite, dimensiuni Apple vechi, tile-uri Windows și culori de temă.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

Observă căile relative la rădăcină, care încep cu /. Funcționează la orice adâncime a paginii, ceea ce ne aduce la cele mai frecvente greșeli.

Greșeli frecvente cu favicon-ul și cum le repari

1. Căi greșite

Un link precum href="favicon.ico" se rezolvă relativ la URL-ul curent, deci funcționează pe /, dar se strică pe /blog/post/. Folosește URL-uri relative la rădăcină (/favicon.ico) sau absolute. Verifică și dacă fișierele chiar există: deschide fiecare URL direct în browser și asigură-te că întoarce HTTP 200, nu o redirecționare către o pagină 404 sau un perete de autentificare.

2. Atribut sizes lipsă sau greșit

Fără sizes, browserele trebuie să descarce pictogramele ca să le inspecteze și pot alege una greșită. Declară mereu sizes pe linkurile PNG și asigură-te că se potrivește cu dimensiunile reale în pixeli. Un fișier etichetat 32x32 care de fapt are 64x64 produce rezultate inconsistente.

3. Cache agresiv

Browserele păstrează faviconurile în cache mult timp, adesea independent de cache-ul paginii. După un rebranding, vechea pictogramă poate persista zile întregi. Schimbă numele fișierului sau adaugă un query string de versiune (/favicon.ico?v=2) și actualizează etichetele link. Reîncărcările forțate de multe ori nu reîmprospătează pictograma din tab; deschiderea directă a URL-ului pictogramei și reîncărcarea ei de obicei o fac.

4. Imagini non-pătrate

Faviconurile trebuie să fie pătrate. Un logo dreptunghiular este întins, tăiat sau încadrat imprevizibil. Proiectează un simbol pătrat dedicat, cum ar fi o inițială sau un simbol, în loc să micșorezi un wordmark lat.

5. Pictograme Apple touch transparente care devin negre

iOS umple transparența cu negru. Dă pictogramei de 180x180 un fundal opac și nu-i rotunji colțurile în prealabil.

6. Pictograme maskable fără zonă de siguranță

Dacă logoul atinge marginile unei pictograme maskable, Android îl va tăia. Ține-l în cercul central de 80% și umple întreaga pânză cu culoarea de fundal.

7. Blocarea pictogramelor pentru crawleri

Dacă robots.txt interzice calea faviconului tău, Google nu îl poate prelua și va afișa o pictogramă generică de glob în rezultatele căutării. Amintește-ți și că Google are nevoie de favicon pe același host ca pagina și îl reîmprospătează doar ocazional, deci modificările pot dura zile sau săptămâni să apară.

8. Uitarea linkului către manifest sau a atributelor purpose

Un manifest care nu este legat sau care nu are pictograme de 192 și 512 px împiedică solicitarea de instalare din Chrome. Validează-l în instrumentele pentru dezvoltatori ale browserului, în fila Application.

Generează întregul set dintr-un singur clic

Crearea manuală a unei duzini de fișiere într-un editor de imagini, apoi conversia în ICO și scrierea manifestului, este obositoare și predispusă la erori. MakeFav generează toate fișierele de mai sus dintr-o singură imagine, text sau emoji: favicon.ico cu mai multe dimensiuni, PNG-uri, SVG, Apple touch icon, PNG-uri de 192/512, o pictogramă maskable, tile-uri Windows, manifest.json și browserconfig.xml, plus un fragment HTML gata de lipit, totul într-o singură arhivă ZIP. Poți ajusta fundalul, marginile și forma în editor, poți verifica un site existent cu verificatorul de favicon și poți automatiza generarea prin resursele pentru dezvoltatori.

Listă de verificare pentru publicare

1. Încarcă toate fișierele în rădăcina site-ului.
2. Lipește fragmentul HTML în <head> al fiecărei pagini (sau în layoutul comun).
3. Asigură-te căYcăile sunt relative la rădăcină și întorc HTTP 200.
4. Verifică modul luminos și cel întunecat, o instalare pe ecranul de start iOS și o instalare pe Android.
5. Rulează verificatorul pentru a depista dimensiunile lipsă sau nepotrivite.
6. Invalidează cache-urile cu un șir de versiune dacă ai înlocuit o pictogramă veche.

Întrebări frecvente

Mai am nevoie de favicon.ico în 2026?

Da. Deși browserele moderne acceptă PNG și SVG, mulți crawleri, cititoare de feeduri, clienți de e-mail și browsere mai vechi încă solicită direct /favicon.ico. Un ICO cu mai multe dimensiuni, cu imagini de 16, 32 și 48 px, este un fișier mic care previne pictogramele lipsă și erorile 404.

Ce dimensiune trebuie să aibă un favicon pentru Google Search?

Google cere un favicon pătrat a cărui dimensiune este multiplu de 48 px, cel puțin 48x48. Un PNG de 96x96 este o alegere sigură, iar SVG este de asemenea acceptat. Google are nevoie și ca fișierul să poată fi accesat de crawler, așa că nu-l bloca în robots.txt. Actualizările pot dura zile sau săptămâni să apară.

Este suficient 180x180 pentru Apple touch icon?

Pentru aproape toate site-urile, da. iOS și iPadOS redimensionează în jos un PNG de 180x180 pentru fiecare dispozitiv actual. Dimensiunile mai vechi (57 până la 152 px) contează doar pentru versiuni iOS foarte vechi. Nu uita să folosești un fundal opac, ca pictograma să nu devină neagră.

Ce este o pictogramă maskable și am nevoie de una?

O pictogramă maskable este un PNG de 512x512 conceput pentru formele adaptive de pictograme Android. Conținutul important se află într-un cerc cu diametrul de 80% din centru, iar fundalul umple tot pătratul. Ai nevoie de ea doar dacă oferi un PWA instalabil, dar face pictograma să arate nativă, în loc să stea într-un cerc alb.

De ce se afișează încă vechiul meu favicon după ce l-am schimbat?

Browserele păstrează faviconurile în cache separat și pentru mult timp. Redenumește fișierul sau adaugă un query string de versiune, cum ar fi ?v=2, actualizează etichetele link, apoi deschide direct URL-ul pictogramei și reîncarcă-l. Motoarele de căutare pot dura mai mult să-și reîmprospăteze propria copie.