Cum să creezi un favicon.

Deschide Generatorul de Favicon / ICO și alege Imagine. Încarcă un PNG, JPG, JPEG, WebP sau GIF, sau selectează Încearcă un eșantion. Exemplul utilizat folosește favicon-orbit.png, un semn violet de orbită de 512 × 512 pixeli cu colțuri transparente. Intrarea este de 202,491 octeți.

Pentru un brand fără un logo finalizat, selectează Text pe pagina instrumentului. Introdu una sau două litere și alege Continuă. Editorul oferă fonturi Modern sans, Classic serif și Monospace, plus culori separate pentru text și fundal. Sunt acceptate până la trei caractere, dar caracterele suplimentare pot deveni greu de recunoscut la dimensiuni mici.

Păstrează lucrarea originală. Generatorul creează fișiere noi de pictograme și nu suprascrie sursa. Intrarea GIF devine o pictogramă statică, nu un favicon animat.

Pentru o monogramă, meniul Font începe cu trei stiluri incluse. Selectează „Folosește fonturile sistemului” pe un browser desktop compatibil și permite accesul pentru a adăuga fonturile instalate pe dispozitivul tău. Folosește săgețile înainte și înapoi pentru a compara fonturile adiacente sau alege o familie și inspectează previzualizarea live, în special la 16 pixeli. Fonturile rămân pe dispozitivul tău; stilurile incluse funcționează fără permisiune.

Editorul afișează file de browser deschise și închise la culoare, plus previzualizări la dimensiuni comune de pictograme. Verifică mai întâi exemplul de 16 pixeli; este cel mai strict test pentru a vedea dacă semnul rămâne recognoscibil. Previzualizarea Apple Touch reprezintă un export de 180 pixeli și este afișată mai mic în spațiul de lucru.

Pe un telefon, deschide Setări. Lasă „Creează din” setat pe „Imagine încărcată” și „Încadrare imagine” pe „Afișează întreaga imagine”. Pentru acest eșantion, setează „Spațiu în jurul conținutului” la 0 și activează „Fundal transparent”. Sursa conține deja propria formă violet rotunjită și margini clare, deci nu are nevoie de un fundal colorat suplimentar.

Cu o sursă diferită, „Afișează întreaga imagine” păstrează marginile, în timp ce „Umple pictograma” le poate decupa. „Pătrat rotunjit”, „Pătrat” și „Cerc” definesc forma exterioară. „Fundal transparent” păstrează zonele clare, dar nu poate elimina un fundal opac deja desenat într-o fotografie. Verifică cea mai mică previzualizare după fiecare modificare a încadrării.

Sub Download, alegeți Pachet pictogramă site (ZIP) pentru acest exemplu. Lăsați Nume site la My website pentru mostră sau înlocuiți-l cu numele real al brandului pentru propriul proiect. Acest nume este utilizat în site.webmanifest; nu este adăugat ca text peste imagine.

Selectați Start. Browserul generează un favicon.ico cu șapte cadre cu imagini pătrate la 16, 24, 32, 48, 64, 128 și 256 pixeli. De asemenea, creează pictograme PNG la 16, 32, 48, 180, 192 și 512 pixeli, un manifest și instrucțiuni de instalare. Rezultatul este un singur fișier ZIP în loc de un buton de descărcare separat pentru fiecare pictogramă.

Dacă aveți nevoie doar de un favicon.ico clasic, alegeți Multi-size ICO în schimb. Acest lucru este util atunci când o platformă web acceptă o încărcare ICO și nu necesită un pachet separat.

Descărcarea salvează website-icons.zip. Exemplul practic actual conține nouă fișiere și are 304,351 octeți. Comparația de mai sus arată sursa de 512 pixeli lângă cadrul autentic de 256 pixeli extras din ICO exportat, în loc de o captură de ecran simulată a browserului.

Extrageți ZIP-ul, încărcați fișierele pictogramă în rădăcina site-ului dvs. și citiți INSTALL.txt. Acesta include etichete de link HTML pentru ICO, pictograma PNG, pictograma Apple Touch și manifestul web. Dacă plasați fișierele într-un subfolder, actualizați atât căile HTML, cât și căile pictogramelor din interiorul site.webmanifest.

Verificați site-ul într-o filă nouă de browser și pe dispozitivele care vă interesează. Browserele pot stoca în cache pictogramele, deci o pictogramă veche nu dovedește imediat că instalarea a eșuat. Păstrați imaginea sursă și pachetul descărcat înainte de a reîmprospăta editorul, deoarece o reîmprospătare revine la pagina principală a instrumentului.