Cum folosești generatorul de favicon
- Scrie textul: una sau două litere sau un emoji.
- Alege culoarea fundalului, culoarea textului, forma (pătrat, rotunjit, cerc) și grosimea fontului.
- Verifică previzualizările la 16, 32, 180 și 512 pixeli; la 16px o literă simplă se citește mult mai bine decât două.
- Descarcă
favicon.svgși PNG-urile de 32×32, 180×180 (apple-touch-icon), 192×192 și 512×512, apoi copiază etichetele. Imaginile se desenează în browser; nu se trimite nimic către server.
Ce mărimi îți trebuie
Nu mai e nevoie de zeci de fișiere. Un set suficient arată așa: un SVG pentru browserele moderne, un PNG de 32×32 (sau un favicon.ico) ca rezervă, o imagine de 180×180 pentru iPhone și iPad și două imagini de 192 și 512 pixeli în manifest, pentru Android și pentru instalarea site-ului ca aplicație.
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">{
"name": "Site-ul meu",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}Unde pui fișierele și de ce nu se schimbă
Pune fișierele în rădăcina site-ului și etichetele în <head>. Browserele păstrează favicon-ul mult timp în cache; dacă nu vezi noul icon, schimbă numele fișierului sau adaugă un parametru, de exemplu /favicon.svg?v=2.
Pe WordPress nu e nevoie de cod: mergi la Aspect, Personalizează, Identitatea site-ului, și încarcă imaginea de 512×512 la Iconiță site. WordPress creează singur mărimile mici.
Întrebări frecvente
Mai am nevoie de favicon.ico?
Nu e obligatoriu, dar unele unelte cer automat /favicon.ico. PNG-ul de 32×32 acoperă browserele care nu folosesc SVG.
Arată emoji-ul la fel peste tot?
Nu. În PNG emoji-ul este desenat cu fontul sistemului tău, iar în SVG cu fontul celui care deschide site-ul. Pentru un aspect identic folosește PNG-urile sau o literă.