Cum se creează o favicon
Un favicon modern este mai mult decât o imagine de 16×16. Acest ghid prezintă pregătirea sursei, generarea cu mai multe dimensiuni, configurarea HTML, exemple din lumea reală și remedieri pentru problemele care declanșează majoritatea echipelor.
Ce este un favicon?
A favicon este pictograma mică afișată de browsere în file, bare de marcaje, liste de istoric și bare de adrese. Pe telefoane, devine pictograma ecranului de pornire atunci când cineva vă salvează site-ul. Pe Windows, apare pe pinii barei de activități și comenzile rapide de pe desktop.
Cuvântul provine de la pictograma favorite, dar munca a crescut cu mult dincolo de un singur GIF de 16×16. favicon de astăzi este o familie mică de active: un favicon.ico la nivel rădăcină, variante opționale SVG și PNG, o pictogramă Apple-touch pentru iOS și pictograme manifest pentru PWA instalabile.
Utilizatorii rareori comentează un favicon bun, dar observă instantaneu unul lipsă sau neclar. O pictogramă clară semnalează lustruirea și face fila identificabilă printre cele douăzeci de pagini deschise.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
Pregătiți-vă imaginea sursă
Începeți de la o imagine pătrată de cel puțin 512×512 pixeli. SVG cu un pătrat viewBox este ideal, deoarece se scalează clar la fiecare dimensiune raster pe care o veți exporta.
Evitați liniile subțiri, tipografia fine și degradeurile complicate. La 16×16, detaliile liniei părului se îmbină în ciupercă gri. Simplificați marcajul: mai puține forme, contrast mai mare, mai multă umplutură în jurul glifului.
Dacă logo-ul dvs. este orizontal, creați o decupare pătrată care centrează simbolul fără semnul de cuvânt. Formele de litere sub înălțimea de 8 px supraviețuiesc rareori reducerii.
Exportați PNG-32 cu transparență atunci când rasterul este singura dvs. opțiune. Un fundal alb copt va arăta greșit în browserul Chrome închis și pe lansatoarele mobile colorate.
Generați un .ico cu mai multe dimensiuni
Pachet de cadre de 16, 32, 48, 64, 128 și 256 de pixeli într-un fișier favicon.ico. Browserele și Windows citesc antetul directorului și decodifică doar dimensiunea de care au nevoie.
Plasați favicon.ico la rădăcina site-ului dvs. (/favicon.ico). Chiar dacă declarați etichete <link> moderne, crawlerele și clienții mai vechi încă cercetează această cale prin convenție.
Generatorul nostru favicon rasterizează fiecare dimensiune din partea clientului în mai puțin de o secundă. Imaginea dvs. sursă nu părăsește browserul, ceea ce contează atunci când marca este o siglă de produs nelansată.
Adăugați etichetele HTML
Aruncă aceste etichete în <head> pentru o configurare completă pentru 2026:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Linia SVG oferă file clare pentru Chromium și Firefox. Linia .ico acoperă variantele Safari, comenzile rapide Windows și cititoarele RSS care ignoră SVG.
Exemple din lumea reală
Site de marketing static: încărcați un PNG de 512×512 din logomark, generați favicon.ico plus o pictogramă apple-touch de 180×180, adăugați patru linii <link>, implementați în /public sau în rădăcina web. Timp total: sub cinci minute.
Aplicația React / Vite: plasați pictograme în /public, trimiteți-le cu căi legate de rădăcină în index.html. Vite copii/public neschimbat la momentul construirii, astfel încât /favicon.ico se rezolvă corect în producție.
WordPress: treceți peste manualul HTML — utilizați Aspect → Personalizare → Identitate site → Site Icon. Încărcați o sursă de 512×512; WordPress emite automat etichetele potrivite. Consultați tutorialul nostru WordPress pentru sfaturi de eliminare a memoriei cache.
Marca în mod întunecat: exportați un SVG a cărui umplere se schimbă în @media (prefers-color-scheme: întunecat). Asociați-l cu o rezervă neutră .ico pentru clienții care nu încarcă niciodată SVG.
Verificați în fiecare browser
Actualizează complet (Ctrl+Shift+R sau Cmd+Shift+R) în Chrome, Safari, Firefox și Edge. Reîncărcările normale păstrează adesea un favicon în cache timp de zile.
Verificați patru suprafețe: fila browser, bara de marcaje, Adăugați la ecranul de pornire pe iOS și o pictogramă fixată în bara de activități Windows. Fiecare suprafață poate solicita o rezoluție diferită de la pachetul dvs.
Deschideți DevTools → Rețea, filtrați după ico sau png, reîncărcați și confirmați 200 de răspunsuri pentru fiecare pictogramă URL pe care ați declarat-o. Un singur 404 pe apple-touch-icon.png este o greșeală obișnuită.
Întrebări frecvente
Mai am nevoie de favicon.ico dacă am SVG? Da. Păstrați .ico ca alternativă universală. SVG este o îmbunătățire, nu un înlocuitor.
Care este favicon minim viabil? Un favicon.ico cu mai multe dimensiuni la /favicon.ico. Orice altceva îmbunătățește claritatea pe ecranele cu DPI ridicat și pe ecranele mobile de acasă.
Pot folosi un JPG? Poți, dar pierzi transparența. PNG sau SVG este aproape întotdeauna mai bun pentru pictogramele de interfață.
Cât de des ar trebui să actualizez favicon? Ori de câte ori marca dvs. de marcă se schimbă. Creșteți o interogare ?v=2 pe etichetele <link> o dată pentru a învinge memoria cache agresivă a browserului.
Depanare
Pictograma nu se actualizează după implementare: browserele memorează în cache favicon-uri independent de HTML. Actualizați complet, ștergeți datele site-ului sau adăugați temporar ?v=2 la adresele URL pentru pictograme.
Pictograma filă neclară: sursa dvs. era prea mică sau nepătrată. Regenerați de la 512×512 sau SVG; verificați că .ico conține de fapt un cadru de 32×32.
Cutie albă în jurul siglei: sursa avea un fundal opac. Reexportați cu transparență și regenerați .ico cu intrări comprimate cu PNG.
Funcționează local, dar nu și în producție: fișierele de confirmare se află în rădăcina web publică, nu numai în src/. Verificați cache-urile CDN și căile sensibile la majuscule pe serverele Linux.
Lista de verificare pas cu pas
Exportați sau găsiți un master pătrat la 512×512 sau mai mare. Confirmați transparența, profilul de culoare sRGB și niciun strat de fundal ascuns în fișierul dvs. de design.
Rulați masterul printr-un generator favicon de partea clientului. Descărcați favicon.ico, favicon.svg, dacă este cazul, apple-touch-icon.png și manifestați PNG într-o singură trecere.
Încărcați toate fișierele în rădăcina dvs. web publică. Pe gazdele statice înseamnă același folder ca index.html; pe cadre, utilizați directorul /public sau /static care se mapează la /.
Lipiți blocul <link> recomandat în <head> înainte de orice script de blocare a randării. Plasarea timpurie ajută browserele să descopere pictograme pe prima vopsea.
Validați cu reîmprospătare tare în Chrome, Safari și Firefox. Fixați o filă, marcați pagina și testați Adăugați la ecranul de pornire pe un iPhone real dacă traficul iOS contează pentru dvs.
Documentați setul de pictograme în README sau în sistemul dvs. de proiectare, astfel încât următorul rebrand să nu înceapă de la o singură persoană de 32×32 PNG găsită în e-mail.
Greșeli frecvente de evitat
Folosind un logo orizontal complet scalat într-un slot de 16×16 — textul devine zgomot de necitit. Decupați la simbol.
Expediați doar un PNG de 16×16 redenumit în .ico fără un director adecvat cu mai multe dimensiuni — Windows și filele Retina upgrade și estompează.
Uitând pictograma apple-touch în timp ce sunt obsedați de filele de pe desktop - utilizatorii iOS reprezintă o mare parte din traficul web mobil.
Indicarea <link href> către o cale CDN care diferă între punere în scenă și producție fără versiuni care țin cont de mediu.
Presupunând că WordPress, Shopify sau Webflow vor remedia în mod magic o încărcare sursă cu rezoluție scăzută. Gunoi intră, gunoi ieșiți de orice dimensiune.