Convertește PNG în ICO pentru un favicon clar
Un favicon este imaginea minusculă care dă unui site semnătura sa vizuală. O vezi în fila browserului, lângă titlul paginii, în lista ta de marcaje, în meniul derulant al adresei din istoricul de navigare și uneori alături de rezultatele căutării. Este mic, dar face multă treabă: un favicon ușor de recunoscut ajută utilizatorii să-ți găsească fila printre alte zeci și semnalează că un site este finalizat și îngrijit. Formatul clasic pentru acea iconiță mică este ICO, iar cel mai simplu mod de a face una este să pornești de la un PNG pătrat curat și să-l convertești.
Acest instrument ia o imagine PNG și o transformă într-un favicon ICO chiar în browserul tău. Conversia rulează local, folosind propriul dispozitiv, deci imaginea pe care o alegi nu este niciodată încărcată pe un server. Asta contează când iconița ta este un logo sau un asset de brand pe care preferi să nu-l predai unei terțe părți. Când fișierul este gata, pur și simplu îl descarci.
Ce este formatul ICO și de ce conține mai multe dimensiuni
ICO este un format container de iconițe originar din Microsoft Windows, unde stochează iconițele folosite pentru programe, scurtături și foldere. Trăsătura sa definitorie, și motivul pentru care a devenit standardul pentru favicoanele web, este că un singur fișier ICO poate conține aceeași imagine la mai multe rezoluții deodată. În loc de un singur bitmap fix, fișierul împachetează un mic set de imagini pătrate și lasă browserul sau sistemul de operare să aleagă dimensiunea potrivită pentru locul unde trebuie desenată iconița.
Asta este cu adevărat util. O filă de browser are nevoie de o iconiță minusculă, o bară de marcaje ar putea folosi una puțin mai mare, iar o scurtătură fixată pe desktop poate cere ceva și mai mare. Cu un ICO cu mai multe dimensiuni, fiecare context ia versiunea care i se potrivește, deci iconița ta rămâne clară în loc să fie mărită dintr-un singur bitmap mic și să devină neclară. ICO păstrează și transparența, ceea ce menține colțurile unui logo rotund sau neregulat curate pe orice culoare de filă.
Dimensiuni recomandate pentru favicon
Pentru un favicon de site web, cele trei dimensiuni care merită incluse sunt 16x16, 32x32 și 48x48 pixeli. Versiunea de 16 pixeli este cea pe care majoritatea browserelor o afișează în filă și în bara de adresă. Versiunea de 32 de pixeli este folosită pe afișaje de rezoluție mai mare și în unele vizualizări de marcaje și istoric, deci menține lucrurile clare pe ecranele moderne. Versiunea de 48 de pixeli acoperă contexte mai mari, cum ar fi scurtăturile de site Windows. Pentru că toate trăiesc într-un singur fișier ICO, livrezi un singur asset și lași fiecare suprafață să aleagă ce are nevoie.
Pornește de la un PNG pătrat, astfel încât nimic să nu se întindă. Dacă imaginea ta sursă este dreptunghiulară sau supradimensionată, decupeaz-o sau scalează-o mai întâi la un pătrat curat cu redimensionatorul nostru de imagini, apoi rulează conversia. Un design simplu, cu contrast ridicat, se citește mult mai bine la 16 pixeli decât o ilustrație detaliată, deci preferă forme îndrăznețe în locul textului fin.
Cum adaugi favicon-ul pe site-ul tău
Odată ce ai fișierul ICO, încarcă-l pe site-ul tău, în mod tradițional în rădăcina site-ului, ca favicon.ico. Multe browsere îl vor găsi automat acolo, dar cea mai bună practică este să-l declari explicit în head-ul HTML-ului tău, ca să nu existe ghiceli. Adaugă un tag link ca acesta:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Plasează acea linie în interiorul secțiunii <head> a paginilor tale. Atributul rel="icon" spune browserului că această resursă este iconița paginii, iar href indică unde ai stocat fișierul. Dacă folosești o cale relativă la rădăcină ca cea de mai sus, aceeași declarație funcționează pe fiecare pagină a site-ului tău. După publicare, s-ar putea să ai nevoie de o reîncărcare forțată sau să golești cache-ul înainte ca noua iconiță să apară, deoarece browserele păstrează favicoanele cu insistență.
Conversie privată în browserul tău
Totul se întâmplă pe dispozitivul tău. PNG-ul pe care îl alegi este citit, decodat și recodificat ca ICO local, iar nimic nu părăsește mașina ta în timpul procesului. Nu există cont, coadă sau stocare pe server, ceea ce face acest lucru convenabil chiar și pentru logouri nelansate sau lucru pentru clienți sub un acord de confidențialitate. Pentru mai multe modalități de a pregăti și ordona grafica, explorează întregul nostru set de instrumente pentru imagini.
Întrebări frecvente
Imaginea mea este încărcată undeva?
Nu. PNG-ul este convertit în ICO în întregime în browserul tău, pe propriul dispozitiv. Nimic nu este trimis către un server și nimic nu este stocat, deci imaginea ta rămâne privată.
Ce dimensiuni ar trebui să includă favicon-ul meu?
Cele mai utile dimensiuni sunt 16x16, 32x32 și 48x48 pixeli. Imaginea de 16 pixeli este afișată în filele browserului, în timp ce cele mai mari mențin iconița clară pe afișaje de înaltă rezoluție și scurtături de desktop.
De ce să folosesc ICO în loc de doar un PNG?
ICO este formatul de favicon consacrat de mult timp și poate stoca mai multe dimensiuni într-un singur fișier. Browserele și sistemul de operare aleg rezoluția potrivită pentru fiecare context, deci iconița rămâne clară în loc să fie scalată dintr-un singur bitmap.
ICO păstrează transparența din PNG-ul meu?
Da. Formatul ICO suportă transparența, deci zonele transparente ale PNG-ului tău sunt păstrate, iar iconița se îmbină curat cu orice culoare de filă sau fundal.
Cum adaug favicon-ul pe site-ul meu?
Încarcă fișierul ICO pe site-ul tău, de obicei ca favicon.ico în rădăcină, și adaugă un tag link în head-ul HTML-ului tău, precum link rel icon type image x-icon href slash favicon.ico. Apoi golește cache-ul browserului pentru a-l vedea.
Imaginea mea sursă nu este pătrată. Ce ar trebui să fac?
Decupeaz-o sau scaleaz-o mai întâi la un pătrat, ca să nu fie întinsă. Poți folosi redimensionatorul nostru de imagini pentru a face un pătrat curat, apoi convertește-l în ICO pentru cel mai bun favicon posibil.