Generator Favicon: Cum să creezi un Favicon dintr-un PNG

Fiecare site web are nevoie de un favicon. Este iconița pătrată mică care apare în taburile browserului, în bara de marcaje, în istoricul browserului și pe ecranul de pornire iOS sau Android atunci când un vizitator salvează o scurtătură către site-ul dvs. De asemenea, apare în rezultatele căutării Google lângă numele site-ului dvs. – un detaliu care afectează modul în care arată brandul dvs. oricui vă găsește prin căutare organică. Fără un favicon, browserele revin la o pictogramă generică de pagină goală, care face ca chiar și un site lustruit să pară nefinalizat. Dacă aveți deja un logo ca PNG, un generator de favicon îl transformă într-un favicon.ico funcțional în mai puțin de un minut, fără instalare și fără cont necesar.

Ce dimensiuni de favicon aveți nevoie de fapt?

Nu există o singură dimensiune universală de favicon deoarece diferite contexte extrag rezoluții diferite din același set de fișiere. Setul practic acoperă șase dimensiuni:

Dimensiune	Format	Caz de utilizare
16×16	ICO / PNG	Bara de taburi a browserului, bara de adrese
32×32	ICO / PNG	Scurtătură în bara de activități, tab pe ecrane de înaltă rezoluție
48×48	ICO	Scurtătură desktop Windows
180×180	PNG	Iconiță Apple touch — ecran de pornire iOS
192×192	PNG	Scurtătură ecran de pornire Android prin manifest web
512×512	PNG	Ecran de splash Android prin manifest web

Dimensiunea faviconului de la care porniți contează. Lucrați întotdeauna dintr-o sursă pătrată mare — 512×512 sau mai mare — astfel încât fiecare dimensiune mai mică să se scaleze curat. Mărirea de la o mini-imagine de 16×16 creează un aspect estompat pe care nicio cantitate de accentuare nu o rezolvă.

Pentru majoritatea site-urilor, fișierul ICO gestionează straturile de 16×16, 32×32 și 48×48 într-un singur container. Dimensiunile de 180×180, 192×192 și 512×512 sunt PNG-uri separate referențiate în HTML sau într-un manifest web.

ICO vs PNG vs SVG

Toate cele trei formate funcționează ca faviconuri pentru un site web. Răspunsul corect este să folosiți mai multe.

ICO este un format container Microsoft care împachetează mai multe dimensiuni într-un singur fișier. Plasați favicon.ico în rădăcina domeniului dvs. și fiecare browser — inclusiv cele mai vechi — îl găsește automat fără niciun marcaj HTML. Un fișier, zero configurare.

PNG este acceptat de toate browserele moderne atunci când este declarat cu un tag <link>. Este singurul format care funcționează pentru iconițe Apple touch și iconițe de manifest Android. PNG păstrează, de asemenea, transparența completă a canalului alfa, astfel încât pictograma dvs. arată curat pe orice culoare de fundal a tabului.

SVG este un format vectorial acceptat de Chrome, Firefox și Edge. Deoarece se scalează la orice rezoluție fără pixelare, un singur fișier SVG acoperă fiecare densitate de afișare. SVG acceptă, de asemenea, interogări media prefers-color-scheme încorporate, ceea ce permite faviconului să comute automat între o versiune întunecată și una deschisă. Safari încă nu acceptă faviconuri SVG, deci SVG nu poate înlocui ICO — dar este un complement puternic.

Recomandare practică: expediați favicon.ico (care conține 16×16, 32×32, 48×48) ca rezervă, adăugați un SVG pentru browserele moderne și modul întunecat și includeți un PNG de 180×180 pentru iconița Apple touch. Această combinație acoperă fiecare browser și dispozitiv major.

Cum să creați un favicon dintr-un PNG

Următorii pași detaliază crearea unui favicon pentru un site web folosind convertorul PNG în ICO de la privateconvert.org. Instrumentul rulează în întregime în browserul dvs. — fișierul nu părăsește niciodată dispozitivul dvs., nu este necesar să creați un cont și nu se adaugă niciun filigran la ieșire.

1. Pregătiți-vă PNG-ul sursă. Folosiți o imagine pătrată de 512×512 pixeli sau mai mare. Dacă logo-ul dvs. este un text orizontal, decupați doar simbolul sau inițiala — textele devin ilizibile la 16 pixeli lățime. Asigurați-vă că PNG-ul are un fundal transparent dacă doriți ca pictograma să arate curat pe orice culoare de tab.

2. Deschideți convertorul. Accesați privateconvert.org/tools/png-to-ico.

3. Trageți PNG-ul pe pagină. Nu mai căutați un buton de încărcare — trageți fișierul direct pe zona de încărcare.

4. Descărcați fișierul ICO. Convertorul generează un favicon.ico care conține straturile standard de 16×16, 32×32 și 48×48. Faceți clic pe descărcare. Fișierul este gata de implementare.

5. Creați dimensiunile PNG suplimentare, dacă este necesar. Pentru iconița Apple touch, redimensionați PNG-ul sursă la 180×180. Pentru iconițele de manifest Android, produceți una de 192×192 și una de 512×512. Orice editor de imagini sau instrument de redimensionare online funcționează; convertorul ICO de la privateconvert.org gestionează partea ICO.

Câteva sfaturi înainte de conversie:

• Porniți de la versiunea cu cea mai mare rezoluție a logo-ului dvs., nu de la o miniatură comprimată.
• Convertorul păstrează transparența canalului alfa, astfel încât un PNG cu o margine conturată sau transparentă rămâne clar în rezultatul ICO.
• Dacă rulați un mediu de testare alături de producție, utilizați o culoare de fundal diferită pentru faviconul de testare. Diferența vizuală instantanee din tab vă spune dintr-o privire în ce mediu vă aflați.

Cum să adăugați un favicon pe site-ul dvs. (HTML)

Plasați favicon.ico în directorul rădăcină al domeniului dvs. Majoritatea browserelor verifică automat siteul_dvs.com/favicon.ico — nu este necesar niciun marcaj. Pentru un control explicit asupra fiecărui format și dimensiune, adăugați următoarele taguri în <body>:

<!-- ICO fallback — funcționează în toate browserele fără marcaje suplimentare -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- Dimensiuni PNG pentru browserele moderne -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- SVG pentru browserele moderne + comutare mod întunecat -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">

<!-- Iconița Apple touch pentru ecranul de pornire iOS -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Dacă aveți doar un singur fișier și doriți cea mai simplă configurare posibilă, tagul ICO unic este minimul viabil ca fallback:

<link rel="icon" href="/favicon.ico">

Pentru ecranul de pornire Android și suportul aplicațiilor web progresive, adăugați un manifest web care face referire la PNG-urile dvs. de 192×192 și 512×512:

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

Salvați manifestul ca manifest.webmanifest și referiți-l în <head>:

<link rel="manifest" href="/manifest.webmanifest">

Valoarea "purpose": "any maskable" din intrarea de 512×512 îi spune Androidului să utilizeze o pictogramă de lansare adaptivă care se potrivește în grila sa de pictograme conturate fără a fi tăiată.

Cum să adăugați un favicon în WordPress, Shopify și Squarespace

Fiecare platformă oferă un câmp de interfață de utilizator dedicat, astfel încât nu este nevoie să editați HTML sau să încărcați fișiere prin FTP.

WordPress: Accesați Aspect > Personalizare > Identitatea site-ului. Căutați câmpul „Pictograma site-ului” aproape de jos. Faceți clic pe „Selectați pictograma site-ului”, încărcați PNG-ul, apoi decupați dacă vi se solicită. WordPress acceptă orice imagine pătrată și se ocupă de redimensionare. Utilizați cel puțin 512×512 pentru sursă. Faceți clic pe „Publică” pentru a salva.

Shopify: Accesați Magazin online > Teme, faceți clic pe „Personalizare” pentru tema activă, apoi deschideți „Setările temei” (sau secțiunea antetului, în funcție de temă). Găsiți câmpul „Favicon”, faceți clic pe „Selectează imaginea” și încărcați un PNG sau ICO pătrat. Salvați și publicați tema. Pictograma apare în câteva minute.

Squarespace: Accesați Site web > Pagini, apoi faceți clic pe „Instrumente site web” în partea de jos a barei laterale din stânga. Selectați „Favicon”. Încărcați un PNG pătrat — Squarespace îl redimensionează automat. Salvați pagina.

În toate cele trei cazuri, fluxul de lucru este același: creați un PNG pătrat curat de 512×512 sau mai mare folosind un generator de faviconuri, apoi lăsați platforma să se ocupe de dimensionarea afișajului.

De ce nu apare faviconul dvs.

Un favicon care funcționează în dezvoltare, dar refuză să apară în producție — sau dispare după o actualizare — se datorează, de obicei, uneia dintre cele cinci cauze.

Cache-ul browserului. Faviconurile sunt stocate agresiv în cache. Reîmprospătați cu Ctrl+Shift+R (Windows/Linux) sau Cmd+Shift+R (Mac). Dacă pictograma încă nu apare, ștergeți complet cache-ul browserului sau testați într-o fereastră privată/incognito. Unele browsere necesită închiderea și redeschiderea tabului înainte ca cache-ul să se ștergă pentru faviconuri.

Calea de fișier greșită. favicon.ico trebuie să stea exact în rădăcina domeniului dvs. — site-ul_dvs.com/favicon.ico, nu site-ul_dvs.com/assets/favicon.ico. Dacă utilizați un tag <link> cu o cale relativă, verificați dacă calea se rezolvă corect din pagina pe care o testați, nu doar din pagina principală.

PNG redenumit care se preface că este ICO. Schimbarea extensiei unui fișier din .png în .ico nu îl convertește. Formatul ICO este un container binar; un PNG redenumit este încă un PNG și browserele care inspectează antetul fișierului îl vor ignora. Rulați fișierul printr-un generator real de faviconuri pentru a produce un ICO real.

Inconcordanță HTTPS vs HTTP. Browserele blochează cererile de conținut mixt. Dacă site-ul dvs. servește prin HTTPS, dar tagul <link> al faviconului indică către http://, cererea este blocată silențios. Verificați dacă URL-ul faviconului utilizează https://.

Cache CDN. Dacă site-ul dvs. se află în spatele unui CDN (Cloudflare, Fastly etc.), nodurile de la marginea rețelei ar putea servi o versiune veche a favicon.ico, chiar și după ce l-ați înlocuit pe origine. Goliți cache-ul CDN special pentru URL-ul faviconului sau adăugați un șir de interogare pentru anularea cache-ului: href="/favicon.ico?v=2".

Întrebări frecvente

Care este dimensiunea minimă a faviconului? 16×16 pixeli este cea mai mică dimensiune afișată de browsere în taburi. Cu toate acestea, ar trebui să includeți întotdeauna și 32×32 — ecranele cu DPI ridicat și scurtăturile din bara de activități au nevoie de versiunea mai mare pentru a rămâne clare. Dacă utilizați privateconvert.org/tools/png-to-ico, ICO-ul generat include automat ambele dimensiuni.

Ar trebui să folosesc PNG sau ICO pentru faviconul meu? Folosește ambele. ICO funcționează ca o rezervă universală pe care browserele o găsesc automat fără niciun marcaj HTML — este ceea ce caută browserele atunci când nu este prezent niciun tag <link>. PNG funcționează pentru browserele moderne atunci când este declarat explicit și este necesar pentru iconițele Apple touch și iconițele de manifest Android. Cele două formate servesc scopuri diferite și nu sunt interschimbabile.

Afectează un favicon SEO-ul? Nu direct — Google nu folosește faviconul ca semnal de clasificare. Totuși, acesta apare în rezultatele căutării Google lângă numele site-ului dvs. în SERP. Un favicon curat și ușor de recunoscut întărește recunoașterea mărcii și poate contribui la rata de clic. Un favicon lipsă sau defect arată o pictogramă generică de glob în rezultatele căutării.

Cum creez un favicon care se schimbă pentru modul întunecat? Utilizați un favicon SVG cu o cerere media prefers-color-scheme încorporată:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .icon { fill: #000000; }
    @media (prefers-color-scheme: dark) {
      .icon { fill: #ffffff; }
    }
  </style>
  <circle class="icon" cx="50" cy="50" r="40"/>
</svg>

Referențiați SVG-ul alături de fallback-ul ICO:

<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="48x48">

Browserele care acceptă faviconuri SVG utilizează versiunea scalabilă, cu comutare de culoare. Safari și browserele mai vechi revin la ICO.

Ce este o pictogramă Apple touch și am nevoie de una? Pictograma Apple touch este imaginea pe care iOS o folosește atunci când un vizitator salvează site-ul dvs. pe ecranul de pornire. Fără una, iOS fie face o captură de ecran a paginii dvs., fie folosește faviconul dvs. obișnuit, ambele arătând slab la dimensiunea de afișare de 180×180. Creați un PNG de 180×180 cu un fundal solid (iOS umple transparența cu alb și decupează colțurile), adăugați 20 de pixeli de umplutură, astfel încât opera de artă să treacă de masca cu colțuri rotunjite și referențiați-o:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Ce este o pictogramă mascăbilă? Lansatorul adaptiv al Android decupează pictogramele într-un cerc, lacrimă sau squircle, în funcție de dispozitiv. O pictogramă mascăbilă include o spațiere suplimentară în jurul ilustrației — numită „zonă sigură” — astfel încât pictograma să arate intenționat după decupare, mai degrabă decât tăiată accidental. Adăugați "purpose": "any maskable" la intrarea dvs. de 512×512 din manifestul web pentru a-i spune Androidului că poate aplica masca adaptivă.

Ce imagine funcționează cel mai bine ca favicon? Forme simple, cu contrast ridicat. O singură literă, un simbol geometric sau un simbol de logo îndrăzneț rămâne lizibil la 16 pixeli. Ilustrațiile detaliate, liniile subțiri și textele complete se transformă în zgomot la dimensiuni mici. Dacă logo-ul dvs. funcționează doar ca o blocare orizontală, utilizați faviconul ca o șansă de a crea o pictogramă de aplicație dedicată — doar simbolul, fără text. Puteți crea favicon din png în câteva secunde la privateconvert.org/tools/png-to-ico pentru a testa cum arată opera dvs. de artă la dimensiuni mici înainte de a o finaliza.

---

Sunteți gata să vă creați faviconul? Deschideți convertorul PNG în ICO la privateconvert.org — trageți PNG-ul, descărcați ICO-ul și faviconul dvs. este gata. Fără cont, fără filigran, fără încărcare de fișiere.