Cum se creează o favicon
Crearea unei favicon este o muncă de două minute cu instrumentul potrivit. Începeți de la o imagine sursă pătrată – de cel puțin 512×512 pixeli – rulați-o prin favicon generator și obțineți un pachet complet: .ico cu mai multe dimensiuni, SVG, apple-touch-icon și PNG manifest. Acest ghid parcurge fiecare pas de la pregătirea sursei până la verificarea browserului. Pentru o referință de adâncime, consultați și full tutorial.
O favicon este pictograma mică pe care o afișează un browser în bara de file, bara de adrese și lista de marcaje. Pe mobil, devine pictograma ecranului de pornire atunci când un utilizator vă salvează site-ul. Pe Windows, apare pe pinii barei de activități și comenzile rapide de pe desktop. Obținerea favicon-ului corect este un mic efort cu un impact mare asupra mărcii - fiecare vizualizare a paginii începe cu pictograma dvs. situată în fila utilizatorului.
Configurarea favicon-ului modern nu este un singur fișier - este un set coordonat. Un .ico cu mai multe dimensiuni se ocupă de soluția de rezervă universală a browserului. Un SVG oferă o redare clară, scalabilă, pe browserele moderne, inclusiv suport pentru modul întunecat. Un PNG de 180×180 (apple-touch-icon) este ceea ce iOS folosește pentru instalările pe ecranul de pornire. Un PNG de 192×192 și un 512×512 alimentează promptul de instalare Android PWA. O imagine sursă bine pregătită generează toate acestea simultan.
Pregătirea imaginii sursă este pasul cel mai trecut cu vederea. Sigla dvs. trebuie să fie pătrată - o decupare asimetrică produce întotdeauna un rezultat întins. Proiectați o versiune simplificată a mărcii dvs. care se citește clar la dimensiuni mici: reduceți liniile fine, eliminați textul mic și creșteți contrastul. Ceea ce pare elegant la 512×512 poate deveni un blob imposibil de citit la 16×16 dacă sări peste această trecere de simplificare.
SVG este formatul sursă ideal, deoarece este independent de rezoluție. O grafică vectorială rasterizează la orice densitate de pixeli fără pierderi de calitate. Dacă aveți doar un raster PNG sau JPG, asigurați-vă că este de cel puțin 512×512 înainte de a genera – reducerea la scară de la orice mai mic introduce neclaritate care se agravează la fiecare pas de redimensionare și are ca rezultat o pictogramă de filă neclară.
Formatul .ico este un container, nu o singură imagine. Deține mai multe cadre raster - de obicei 16×16, 32×32, 48×48 și 64×64 – într-un singur fișier. Browserul analizează directorul ICO și redă doar cadrul care se potrivește cel mai bine cu densitatea de afișare de care are nevoie. Această abordare cu un singur fișier înseamnă că nu aveți nevoie de etichete de link separate pentru fiecare rezoluție - o etichetă acoperă toate dimensiunile filelor.
Încărcați imaginea sursă în favicon generator. Instrumentul procesează totul local în browser - imaginea nu părăsește niciodată dispozitivul. În câteva secunde, produce un pachet de descărcare care conține favicon.ico, favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png și site.webmanifest, plus etichete de link HTML gata de lipire.
Plasarea fișierelor este simplă. Plasați toate fișierele generate în directorul rădăcină public al site-ului dvs. - același folder care servește index.html. Pentru proiectele Vite și Create React App, acesta este folderul /public. Pentru proiectele Next.js App Router, plasați favicon.ico în /app și fișierele PNG în /public. Pentru site-urile statice, plasați totul lângă fișierele dvs. HTML.
Etichetele de link HTML indică browserelor ce fișier să folosească pentru fiecare context. Minimul este o linie: `<link rel='icon' href='/favicon.ico'>`. Setul complet recomandat adaugă încă trei rânduri: una pentru varianta SVG, una pentru apple-touch-icon și una pentru manifestul web. Inserați fragmentul generat în elementul dvs. „<head>”. Ordinea etichetelor nu contează atâta timp cât acestea precedă „</head>”.
Memorarea în cache a browserului este principala cauză a confuziei atunci când un favicon nu pare să se actualizeze. Browserele memorează cache /favicon.ico pe origine și este posibil să nu respecte anteturile standard de control al memoriei cache așa cum o fac pentru alte active. Dacă vechea pictogramă persistă, deschideți o nouă fereastră incognito sau adăugați un șir de interogare cache-buster precum `?v=2` la href din eticheta de link pentru a forța browserele să preia fișierul actualizat.
Greșelile obișnuite includ încărcarea unei imagini nepătrate (produce pictograme întinse), utilizarea unei surse sub 256×256 pixeli (neclare la dimensiuni mai mari de afișare) și omiterea apple-touch-icon (instalările de pe ecranul de pornire iOS arată în schimb o captură de ecran a paginii). Toate trei sunt rezolvate pornind de la o sursă pătrată 512×512 PNG sau SVG și lăsând generatorul să se ocupe de fiecare dimensiune de ieșire.
Suportul în modul întunecat merită să fie integrat încă de la început. Multe browsere redă bara de file într-un crom închis când sistemul utilizatorului este în modul întunecat. Dacă pictograma dvs. este un semn întunecat pe un fundal transparent, aceasta poate dispărea într-o filă întunecată. Trimiteți o favicon SVG cu un bloc stil `@media (prefers-color-scheme: dark)` încorporat care schimbă culoarea de umplere — nu sunt necesare etichete HTML suplimentare, ci doar un fișier SVG actualizat.
Verificați-vă favicon-ul folosind live favicon tester după implementare. Testerul simulează fila browserului, marcajele și contextele de solicitare de instalare și arată cum se redă pictograma dvs. la 16, 32, 48, 128 și 512 pixeli unul lângă altul. De asemenea, verificați manual o filă fixată în Chrome și Safari și utilizați „Adăugați la ecranul de pornire” pe iOS pentru a confirma apple-touch-icon.
Pentru explicații specifice platformei, consultați favicon for WordPress, favicon for Shopify, favicon for React și favicon for Next.js. Setul de fișiere generat este identic pe toate platformele - ceea ce diferă este locul în care încărcați fișierele și modul în care platforma injectează sau suprascrie etichetele de link HTML.
Revizuiește-ți favicon-ul ori de câte ori rebrandezi. Favicon-urile memorate în cache persistă în marcaje și pe ecranele de pornire mobile mult timp după lansarea unei reproiectări a site-ului. Actualizarea șirului de versiune din eticheta de link href obligă browserele să preia noul fișier la următoarea vizită, înlocuind treptat pictograma veche în toate locațiile din cache. Consultați ghidul best favicon format pentru o defalcare format după format a dimensiunilor fișierului și a compromisurilor de compatibilitate.
Cum funcționează
- 1
Pregătiți o imagine sursă pătrată
Exportați sigla sau pictograma dvs. ca PNG de 512×512 cu fundal transparent sau ca SVG cu un pătrat viewBox (de exemplu, `viewBox='0 0 512 512'`). Simplificați detaliile fine care vor fi invizibile la 16×16.
- 2
Generați pachetul de favicon
Încărcați sursa în [favicon generator](tool:favicon-generator). Instrumentul produce favicon.ico (dimensiuni multiple 16/32/48/64), favicon.svg, apple-touch-icon.png (180×180), android-chrome-192x192.png, android-chrome-512x512.png și site.webmanifest — toate într-o singură trecere.
- 3
Copiați toate fișierele în rădăcina site-ului dvs
Plasați fiecare fișier din fișierul zip de descărcare în rădăcina publică a proiectului dvs. - directorul care servește index.html. Pentru Next.js App Router, favicon.ico merge în /app; PNG-urile merg în /public.
- 4
Inserați etichetele de link HTML în <head>
Copiați fragmentul HTML generat și adăugați-l în elementul dvs. „<head>”. Setul complet acoperă alternativa .ico, varianta SVG, apple-touch-icon și linkul manifest - șase linii în total.
- 5
Verificați pe browsere și dispozitive
Deschideți-vă site-ul în Chrome, Safari, Firefox și Edge. Inspectați fila, bara de marcaje și bara de adrese. Pe iOS, atingeți foaia Partajați și „Adăugați la ecranul de pornire” pentru a testa apple-touch-icon. Utilizați [favicon tester](utility:favicon-tester) pentru o simulare rapidă.
- 6
Cache-bust atunci când actualizați o favicon existentă
Dacă înlocuiți o favicon live, creșteți șirul versiunii din eticheta de link href (`?v=2`, `?v=3` etc.). Acest lucru forțează toate browserele să preia fișierul actualizat la încărcarea paginii următoare, în loc să difuzeze versiunea stocată în cache.
Încearcă acum
Creează-ți favicon acum
Generator de FaviconÎntrebări frecvente
Care este cel mai simplu mod de a crea un favicon?+
Încărcați un PNG sau SVG de 512×512 pătrați în generatorul FetchFavicon. Produce toate fișierele necesare — .ico, SVG, apple-touch-icon, manifest PNGs — plus HTML gata de lipire în mai puțin de o secundă, fără înregistrare și fără încărcare pe server.
Ce dimensiune ar trebui să aibă imaginea mea sursă?+
Cel puțin 512×512 pixeli, ideal ca un SVG. Micșorarea riscă neclaritatea vizibilă la dimensiunea de 256×256 utilizată de Windows și la dimensiunea de 512×512 necesară pentru solicitările de instalare PWA. Upscalingul unei imagini mici agravează pierderea calității la fiecare pas de redimensionare.
Am nevoie de un apple-touch-icon?+
Da, dacă vreun vizitator folosește un iPhone sau iPad. Fără aceasta, instalările iOS pe ecranul de pornire afișează o miniatură de captură de ecran de calitate scăzută a paginii dvs. în loc de marca dvs. de marcă. Un PNG de 180×180 conectat cu `<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>` este tot ce aveți nevoie.
De ce nu apare favicon-ul meu în fila browser?+
Cel mai adesea este o problemă de cache. Deschideți o fereastră privată/incognito și navigați la site-ul dvs. Dacă tot nu apare, verificați dacă favicon.ico este difuzat la rădăcina domeniului dvs. și că calea href etichetei de link se rezolvă corect - verificați dacă există greșeli de scriere și lipsă barele oblice.
Am nevoie de atât .ico, cât și SVG?+
Da, pentru acoperire completă. .ico gestionează browserele vechi, comenzile rapide Windows și instrumentele terță parte care preiau /favicon.ico direct. SVG gestionează randarea clară pe Chrome, Firefox, Edge și Safari 15+ și acceptă comutarea culorilor în modul întunecat. Dimensiunea combinată a fișierului este de obicei sub 30 KB.
Cât durează propagarea unei schimbări de favicon?+
Oriunde, de la secunde la câteva zile, în funcție de cât de agresiv browser-ul a stocat originalul în cache. Cea mai rapidă remediere este să adăugați un șir de interogare nou (`?v=2`) la favicon-ul href. Acest lucru face ca browserele să o trateze ca pe o nouă adresă URL și să preia imediat o copie nouă.
Pot folosi un JPEG ca sursă favicon?+
Puteți încărca un JPEG în generator, dar JPEG-urile nu acceptă transparența. Dacă pictograma dvs. are nevoie de un fundal transparent – care arată cel mai bine în filele browserului – începeți de la PNG-32 sau SVG. Generatorul se va converti corect în .ico și PNG.