CodeKitHubCe este acest instrument?
Un favicon.ico nu este doar o imagine mică — este un format container care poate păstra mai multe dimensiuni ale aceleiași pictograme într-un singur fișier, astfel încât browserul, bara de sarcini sau bara de marcaje să poată alege rezoluția care arată cel mai clar în locul unde o afișează. Redenumirea unui PNG în favicon.ico nu produce acest lucru: este o singură imagine care poartă extensia greșită, iar deși unele browsere o tolerează, multe instrumente, crawlere și browsere mai vechi care citesc octeții bruți așteaptă structura reală de container ICO și vor eșua sau vor reveni la o pictogramă goală.
Acest instrument construiește un container ICO real: îți randează SVG-ul la 16×16, 32×32 și 48×48, codifică fiecare ca PNG intern și le împachetează pe toate trei într-un favicon.ico valid, folosind același format PNG-în-ICO pe care fiecare browser și sistem de operare l-a suportat încă din Windows Vista. Pe lângă acesta, primești fișiere PNG separate la 180×180 (dimensiunea pe care iOS o folosește pentru pictogramă atunci când cineva adaugă site-ul tău pe ecranul principal) și 192×192 / 512×512 (dimensiunile pe care solicitările de instalare Android și PWA le preiau din manifestul aplicației tale web).
De ce să-l folosești?
- Produce un favicon.ico cu adevărat valid, multi-rezoluție, nu un PNG redenumit.
- Acoperă dintr-o singură trecere fiecare dimensiune de pictogramă necesară unei implementări reale: 16, 32, 180, 192, 512px.
- HTML gata de lipit în <head> — fără a ghici atributele rel/sizes/type.
- SVG-urile non-pătrate sunt centrate pe un pătrat transparent, în loc să fie întinse.
- Totul se randează local, în browserul tău; SVG-ul nu este niciodată încărcat pe server.
Cum se folosește
- Apasă pe casetă sau trage fișierul tău de logo SVG peste ea.
- Instrumentul îl randează automat la fiecare dimensiune de favicon — nu există setări de configurat.
- Descarcă favicon.ico pentru rădăcina site-ului tău, plus pictogramele PNG individuale.
- Copiază fragmentul HTML și lipește-l în <head>-ul paginii tale.
Exemplu
Intrare
logo.svg — un logo de companie, vector de 3 KBRezultat
favicon.ico (16/32/48px combinate), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngUn singur SVG intră, fiecare fișier de pictogramă necesar unei implementări reale iese.
Ce dimensiune de pictogramă este folosită unde
| Fișier | Dimensiune | Folosit pentru |
|---|---|---|
| favicon.ico | 16/32/48px (combinate) | Tab de browser, bară de marcaje, bară de sarcini |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Alternativă pentru browserele care preferă favicoane PNG |
| apple-touch-icon.png | 180×180 | Pictograma de pe ecranul principal iOS când site-ul este adăugat pe ecranul principal |
| icon-192.png | 192×192 | Pictograma de pe ecranul principal Android, manifest de aplicație web |
| icon-512.png | 512×512 | Solicitare de instalare PWA, pictograma ecranului de pornire Android |
De ce contează sursa SVG
Deoarece SVG stochează formele ca matematică, nu ca pixeli, randarea sa de la zero la 16px și la 512px pornesc ambele de la exact aceleași date de traseu — nu există artefacte de mărire la capătul mare și nici compromisuri forțate de aliniere la pixeli la capătul mic. Dacă ai doar un logo PNG, acest instrument nu te poate ajuta; convertește sau recreează mai întâi logo-ul ca SVG, deoarece mărirea unui PNG mic la 512px ar produce doar un rezultat neclar.
Întrebări frecvente
De ce să nu redenumesc pur și simplu un PNG în favicon.ico?
Un fișier .ico are propriul format container binar (un antet ICONDIR care descrie câte imagini conține, urmat de o intrare de director pentru fiecare imagine) — un fișier PNG redenumit în .ico rămâne doar un PNG cu extensia greșită. Majoritatea browserelor moderne sunt tolerante și îl vor reda oricum, dar acest instrument construiește un container ICO real, care conține trei rezoluții propriu-zise, exact ceea ce a fost proiectat formatul să facă și ceea ce așteaptă cititoarele mai stricte.
De ce am nevoie de pictograme PNG dacă am deja favicon.ico?
favicon.ico acoperă doar cazul clasic de tab de browser/marcaj. PNG-ul de 180×180 este cel pe care iOS îl folosește când un utilizator adaugă site-ul tău pe ecranul principal (apple-touch-icon), iar PNG-urile de 192×192 / 512×512 sunt cele pe care solicitările de instalare Android și PWA le preiau din manifestul aplicației tale web. Fără ele, pictograma ta de pe ecranul principal al unui telefon revine la o captură de ecran generică sau la un pătrat gol.
Logo-ul meu nu este pătrat — ce se întâmplă cu el?
Este centrat pe un pătrat transparent la fiecare dimensiune țintă, în loc să fie întins, astfel încât un logo lat sau înalt își păstrează proporțiile corecte, în loc să fie turtit într-un pătrat.
Unde pun fișierele descărcate?
Plasează favicon.ico, apple-touch-icon.png, icon-192.png și icon-512.png în folderul rădăcină al site-ului tău (lângă index.html), apoi lipește etichetele <link> generate în <head>-ul paginii tale.
Este SVG-ul meu încărcat undeva?
Nu. SVG-ul este randat pe elemente <canvas> locale, iar fișierele ICO/PNG sunt asamblate în browserul tău. Nimic nu este trimis către un server.