Articol

Crearea unui favicon dintr-un PNG

Un favicon este un grafic mic pe care browserele îl afișează în file, marcaje și liste de istoric. Obținerea unui rezultat corect implică mai mult decât redimensionarea unui logo: formatul .ico împachetează mai multe rezoluții într-un singur fișier, browserele moderne preferă PNG, dispozitivele mobile au propriul apple-touch-icon, iar manifestele de aplicații web au nevoie de propriul set de pictograme. Acest articol acoperă fiecare componentă și explică cum să produceți întregul set dintr-un singur PNG sursă.

Scris de Bastien Sulyan · Publicat pe 29 iunie 2026

Ce este un favicon și unde îl folosesc browserele

Cuvântul favicon este o contracție a „favorite icon" (pictogramă favorită). Browserele l-au afișat prima dată în bara de adrese în Internet Explorer 5 (1999), apoi l-au adoptat pentru marcaje. Astăzi apare în filele browserului, bara de instrumente pentru marcaje, istoricul de navigare, pagina de filă nouă în unele browsere și barele de activități ale sistemului de operare când un site este fixat. Pe mobil, dacă un utilizator adaugă un site pe ecranul de pornire, dispozitivul folosește o imagine conexă dar distinctă numită apple-touch-icon în loc de favicon-ul standard. Motoarele de căutare afișează uneori favicon-uri lângă rezultate în interfața lor. Grafica este mică prin design, ceea ce o face eficientă pentru identificare vizuală rapidă, dar și dificil de produs bine: la 16x16 pixeli, un logo detaliat devine o pată confuză. Fișierul favicon a trecut prin mai multe formate de-a lungul deceniilor, cu .ico rămânând cel mai compatibil pe larg și PNG devenind implicit modern pentru majoritatea browserelor.

Containerul .ico: mai multe rezoluții într-un singur fișier

Formatul .ico este un container, nu o singură imagine. Un singur fișier .ico poate conține mai multe imagini bitmap la rezoluții diferite, fiecare stocată ca o intrare separată într-un index la începutul fișierului. Cele trei dimensiuni cele mai comune sunt 16x16, 32x32 și 48x48 pixeli. Când Windows afișează un favicon în Explorer sau pe bara de activități, selectează intrarea care se potrivește cel mai bine contextului de afișare. Versiunile mai vechi de Windows aveau nevoie de o intrare de 48x48 pentru sloturile de bară de activități de densitate înaltă. Browserele solicită favicon-ul la 16x16 pentru file, dar pot folosi o intrare mai mare dacă este detectat un afișaj de densitate mai mare. Împachetarea tuturor celor trei dimensiuni într-un singur fișier .ico înseamnă că o singură cerere HTTP acoperă toate cazurile de utilizare. Distribuirea lor ca PNG-uri separate este, de asemenea, validă, dar necesită tag-uri link suplimentare și adaugă cereri HTTP. Imaginile interne din interiorul unui fișier .ico sunt date BMP sau PNG standard, astfel că containerul adaugă doar un mic overhead de antet pentru fiecare intrare.

Proiectarea pentru dimensiuni mici: simplificați simbolul

La 16x16 pixeli aveți 256 de pixeli totali. Un logotip tipic cu un wordmark sau detalii fine devine ilizibil la acea dimensiune. Abordarea standard este de a crea un simbol simplificat: o singură literă, o formă abstractă sau o pictogramă care reprezintă brandul fără a se baza pe detalii. Câteva probleme specifice de anticipat: liniile subțiri dispar complet la dimensiuni mici, mai ales pe ecranele non-retina. Perechile de litere și detaliile de spațiu negativ se contopesc în zgomot gri. Gradientele devin abia vizibile. Contrastul ridicat între simbol și fundalul său este cel mai important factor în lizibilitate. O formă solidă pe un fundal simplu se citește aproape întotdeauna mai bine decât o ilustrație detaliată la 16x16. Dimensiunile 32x32 și 48x48 sunt mai iertătoare și pot suporta ceva mai mult detaliu, dar versiunea de 16x16 ar trebui tratată ca restricția de referință. Dacă simbolul tot nu se citește la 16x16, designul necesită simplificare suplimentară.

Setul modern: .ico, pictograme PNG, apple-touch-icon, manifest și tag-uri HTML link

O configurare completă de favicon pentru un site public necesită în prezent cinci lucruri. În primul rând, un favicon.ico la rădăcina site-ului (browserele solicită /favicon.ico direct fără un tag link ca alternativă). În al doilea rând, un PNG de 32x32 pentru browserele desktop moderne, declarat cu un tag link: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. În al treilea rând, un PNG de 16x16 pentru dimensiunea filei: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. În al patrulea rând, un apple-touch-icon de 180x180 pixeli pentru marcajele ecranului de pornire iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. În al cincilea rând, un manifest de aplicație web (site.webmanifest) cu un PNG de 192x192 și un PNG de 512x512 pentru Android și aplicații web progresive. Transparența este suportată în PNG și în intrările codificate PNG din interiorul .ico, deși apple-touch-icon ar trebui să aibă un fundal opac deoarece iOS ignoră canalul alfa și umple zonele transparente cu negru.

Realizarea locală: favicon-generator păstrează imaginea pe dispozitivul dvs.

Favicon-generator-ul de pe acest site ia un PNG și produce setul complet: un favicon.ico cu rezoluție multiplă împachetat cu intrări de 16x16, 32x32 și 48x48, dimensiunile individuale PNG pentru utilizare directă cu tag-uri link și apple-touch-icon-ul de 180x180. Toate acestea se întâmplă în browser folosind Canvas API și un encoder .ico JavaScript. Imaginea sursă nu este niciodată încărcată nicăieri; rămâne pe dispozitivul dvs. Aceasta contează când fișierul sursă este un logo de companie sau orice material care nu ar trebui să vă părăsească mașina înainte să controlați unde ajunge. Fiecare fișier generat este oferit ca descărcare separată, folosind numele de fișiere convenționale. Le copiați la rădăcina site-ului și adăugați tag-urile link corespunzătoare în antetul HTML. Dacă logo-ul sursă are detalii fine care nu supraviețuiesc redării la 16x16, îl puteți decupa sau simplifica înainte de a-l introduce în generator sau puteți furniza o imagine sursă diferită pregătită special pentru favicon.

Instrumente din acest articol

Întrebări frecvente

Mai am nevoie de un favicon.ico dacă declar tag-uri link PNG?

Da, din două motive. În primul rând, browserele care nu vă citesc HTML-ul (crawlere web, cititoare RSS, unele browsere mobile vechi) caută /favicon.ico direct la rădăcina domeniului. Dacă acel fișier lipsește, generează o cerere 404 la fiecare încărcare de pagină, ceea ce adaugă zgomot în jurnalele serverului și un mic drum dus-întors inutil. În al doilea rând, versiunile mai vechi de Internet Explorer recunosc doar formatul .ico și ignoră tag-urile link PNG. Furnizarea ambelor acoperă toate cazurile.

Pot folosi un SVG ca favicon?

Chrome și Firefox suportă favicon-uri SVG prin `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. Safari nu suportă favicon-uri SVG. Deoarece favicon-urile SVG sunt independente de rezoluție, arată clar pe orice densitate de afișaj, inclusiv ecranele retina, fără a necesita mai multe variante de dimensiune. Recomandarea practică este să declarați tag-ul link SVG pentru browserele care îl suportă și să includeți în continuare alternativa .ico pentru acoperire completă. Favicon-urile SVG pot include și o interogare media `prefers-color-scheme` pentru a comuta automat între o versiune deschisă și una închisă.

De la ce imagine ar trebui să pornesc pentru cel mai bun rezultat?

Un PNG pătrat de 512x512 sau mai mare cu fundal transparent oferă cea mai mare flexibilitate. Pornind de la dimensiuni mari și micșorând se păstrează mai mult detaliu decât pornind de la o imagine mică. Dacă logo-ul principal include un wordmark, luați în considerare pregătirea unei versiuni simplificate separate care arată doar pictograma sau simbolul, deoarece textul nu va fi lizibil la 16x16 indiferent de rezoluția sursă. Contrastul ridicat între simbol și fundal este cel mai fiabil predictor al cât de clar se vor citi dimensiunile mici.