Dimensiunile Favicon explicate

Favicon-ul de 16×16 pixeli este standardul web original. Este folosit în filele browserului de pe ecrane standard (96 dpi), în bara de instrumente de marcaje din toate browserele desktop și în unele liste de istoric de browser. Deoarece 16×16 este o pânză extrem de strânsă, designul dvs. favicon trebuie să fie dezbrăcat la cea mai simplă formă: o singură formă, literă sau semn abstract. Orice lucru mai complex va fi ilizibil.

Dimensiunea de 32 × 32 pixeli dublează cele de 16 × 16 și servește file de browser retina/HiDPI la o densitate de 2x, pictograme de marcaj la DPI ridicat și pictograme de sugestie din bara de adrese în Chrome. Browserele moderne solicită 32×32 mult mai des decât 16×16, deoarece ecranele de înaltă densitate au devenit majoritatea dispozitivelor. Dacă ați putea livra o singură dimensiune, 32×32 ar fi cea mai de impact.

Dimensiunea de 48×48 pixeli este dimensiunea vizualizării „pictograme medii” Windows Explorer și este minimul cerut de Căutarea Google pentru eligibilitatea favicon-urilor în fragmentele de rezultate ale căutării. Site-urile a căror favicon nu îndeplinește minimul de 48×48 apar cu o pictogramă glob generică lângă adresa URL în rezultatele Google în loc de marca lor. Includeți întotdeauna 48×48 în pachetul dvs. .ico.

Dimensiunea de 64×64 pixeli este utilizată în vizualizarea pictogramelor mari Windows Explorer și în unele medii desktop Linux. Includerea acestuia în fișierul dvs. .ico de dimensiuni multiple adaugă o suprasarcină neglijabilă, dar asigură o randare curată în managerii de fișiere și mediile shell. Multe instrumente generatoare de favicon includ implicit 64 ca parte a pachetului standard .ico.

Dimensiunea de 128 × 128 pixeli servește dale aplicației Windows Store și miniaturi de înaltă densitate din bara de activități. Este mai rar necesar pentru favicon-urile web pur, dar este important dacă site-ul dvs. este ambalat ca PWA sau dacă utilizatorii îl fixează ca aplicație Windows. Îmbinarea acestuia în .ico cu compresie PNG menține dimensiunea rezonabilă a fișierului.

Dimensiunea de 256×256 pixeli este cel mai mare cadru standard .ico. Este folosit pentru comenzile rapide de pe desktop Windows, rezultatele căutării în meniul Start Windows și unele contexte instalate de aplicații. La această rezoluție, trebuie să utilizați compresia PNG în interiorul containerului .ico, mai degrabă decât BMP - o imagine BMP 256×256 necomprimată adaugă 256 KB fișierului .ico în mod inutil.

Dimensiunea de 180×180 pixeli este exclusiv pentru iOS apple-touch-icon. Când un utilizator de iPhone sau iPad atinge „Adaugă la ecranul de pornire”, Safari preia imaginea declarată în „<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>'. Această dimensiune acoperă toate modelele actuale de iPhone (iPhone 6 Plus și mai târziu utilizează 180×180 la densitate de 3x; modelele mai vechi folosesc 120×120 și 152×152 – un singur fișier 180 le acoperă pe toate cu grație).

Dimensiunea de 192×192 pixeli este pictograma minimă necesară într-un manifest al aplicației web (site.webmanifest) pentru solicitarea de instalare PWA a Android Chrome. Când utilizatorii adaugă un PWA pe ecranul lor de pornire Android, Chrome redă pictograma 192×192 în lansatorul și pictograma aplicației în comutatorul de aplicații recent. Fără această dimensiune în manifest, promptul de instalare PWA fie arată o pictogramă generică, fie nu se declanșează deloc.

Dimensiunea de 512×512 pixeli este a doua pictogramă manifest necesară. Chrome îl folosește pentru ecranul de introducere PWA care se afișează în timp ce aplicația se încarcă după o lansare pe ecranul de pornire și pentru previzualizarea dialogului de instalare pe desktop Chrome OS. Este, de asemenea, dimensiunea ideală a sursei pentru generarea tuturor variantelor mai mici - începând de la 512×512 asigură că fiecare ieșire subeșantionată păstrează margini ascuțite și culori precise.

Dimensiunile cuprinse între 512×512 și 1024×1024 foarte mari sunt utilizate în principal pentru pictogramele aplicațiilor native de pe macOS și iOS App Store, nu pentru favicon-urile web. Cu toate acestea, dacă intenționați să vă convertiți prezența web într-o aplicație nativă folosind un wrapper (Electron, Capacitor, Tauri), veți avea nevoie de 1024×1024 pentru procesul de revizuire a App Store. Stocați acest fișier principal alături de pachetul dvs. de favicon.

Favicon-urile SVG sunt independente de rezoluție și acoperă fiecare densitate cu un singur fișier. Un browser care acceptă SVG favicons (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) va prefera SVG peste orice dimensiune raster, deoarece redă perfect la 1x, 2x, 3x sau orice DPI personalizat. Compensația este că nu toate contextele acceptă SVG — comenzile rapide Windows, cititoarele RSS și instrumentele mai vechi au nevoie în continuare de alternativa .ico.

Relația dintre dimensiuni și containerul .ico este important de înțeles. Un fișier .ico nu este o singură imagine - este o arhivă cu mai multe imagini. Fiecare cadru din interiorul său este o imagine raster separată la o dimensiune diferită. Browserul citește directorul ICO, identifică care cadru se potrivește cel mai bine cu dimensiunea de care are nevoie și decodifică numai acel cadru. Acesta este motivul pentru care un fișier .ico poate servi la fel de bine file de 16, 32, 48 și 64 px.

Setul minim recomandat pentru un site web de producție în 2026 este: favicon.ico care grupează cadre de 16, 32, 48 și 64 px; apple-touch-icon.png la 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg pentru browsere moderne; și un site.webmanifest care face referire la PNG-urile 192 și 512. favicon generator produce acest set complet dintr-o singură sursă de încărcare cu un singur clic.

Verificarea dacă toate dimensiunile de favicon sunt difuzate corect este simplă cu favicon tester. Introduceți adresa URL a site-ului dvs., iar testerul încearcă să preia favicon.ico, verifică etichetele de link în capul HTML și afișează o previzualizare a fiecărei dimensiuni. Dimensiunile lipsă sunt semnalate cu recomandări posibile.