Generator de favicon
Adaugă logoul în generatorul de favicon și primești toate fișierele, de la pictograma de filă de 16 pixeli la cea de aplicație de 512 pixeli, plus HTML-ul de inserat. Totul are loc în browser, fără încărcarea imaginii pe server.
Qwyzzle
Summit Roasters
Fox EsportsTrage logoul aici
PNG, JPG, WebP sau SVG. Ideal: pătrat, de cel puțin 512 px.
Creat în browser. Imaginea nu este încărcată pe server.
Ce este un favicon și unde apare
Un favicon este pictograma pătrată care reprezintă site-ul. Numele prescurtează expresia engleză „favorite icon”, adică pictograma favoritelor: primul browser care o afișa o punea lângă semnele de carte, numite Favorite.
Îl vezi lângă titlul paginii în filele browserului, la 16 pixeli sau 32 pe un ecran mai clar. Identifică site-ul și în semnele de carte și istoric. Când cineva salvează site-ul pe ecranul principal al telefonului, devine pictogramă de aplicație. Google îl afișează lângă numele site-ului în rezultate.
Rolul este mereu același: să fie recunoscut dintr-o privire printre alte pictograme.
De ce un favicon devine un set de fișiere
Aceste utilizări au apărut în momente diferite și cer fișiere proprii. Generatorul de mai sus le creează pe toate dintr-o imagine.
Filele, semnele de carte și istoricul folosesc favicon.ico, un singur fișier cu variante de 16, 32 și 48 de pixeli. Este formatul cel mai vechi; dacă pagina nu indică o pictogramă, browserele încă îl caută în dosarul rădăcină.
Dacă pornești de la SVG, primești și favicon.svg, folosit de browserele care acceptă pictograme SVG. Fiind creat din forme, nu pixeli, rămâne clar pe orice ecran.
iPhone și iPad folosesc apple-touch-icon.png, pătrat de 180 de pixeli, când site-ul este adăugat pe ecranul principal. iPhone umple zonele transparente cu negru, așa că pictograma primește mereu fundal uniform: culoarea aleasă sau alb dacă ai ales transparent.
Telefoanele Android și site-urile instalate ca aplicații folosesc icon-192.png și icon-512.png. Le găsesc prin site.webmanifest, un mic fișier text care indică numele site-ului, dacă l-ai introdus, și locația pictogramelor mari.
PNG-urile separate de 16–48 de pixeli sunt rezerve pentru servicii care cer PNG. Pentru rezultate, Google citește legăturile către pictograme din HTML-ul paginii principale.
Cum adaugi fișierele favicon pe site
Dacă tu sau dezvoltatorul editați fișierele site-ului, sunt doi pași.
Mai întâi dezarhivează descărcarea și pune fișierele în dosarul rădăcină, cel de sus, unde se află pagina principală. Verifică adăugând /favicon.ico la adresa site-ului: pictograma ar trebui să se deschidă.
Apoi inserează liniile HTML din README (afișate și în instrument) în secțiunea head a paginilor, care conține titlul. Există câte o linie pentru ICO, pictograma Apple pentru ecranul principal și manifest, plus SVG dacă ai unul.
De obicei toate paginile au același șablon, deci inserezi o singură dată. Șterge întâi liniile vechi, altfel browserul poate alege în continuare pictograma veche.
Într-un constructor de site-uri poți sări acești pași: încarcă icon-512.png în setarea pentru pictograma site-ului, iar platforma adaugă HTML-ul.
Cum faci un logo lizibil la 16 pixeli
La 16 × 16, întreaga pictogramă are 256 de pătrățele colorate. Majoritatea logourilor nu au fost desenate pentru asta.
Începe cu simbolul, nu cu numele: un nume de opt litere în 16 pixeli lasă două pentru fiecare literă. Nu ai simbol? Folosește prima literă, mare și groasă. Literele groase rezistă micșorării mai bine decât cele fine.
Apoi elimină detaliile. Liniile foarte fine și spațiile mici se confundă cu împrejurimile, iar sloganul devine o pată.
Contează contrastul dintre deschis și închis, nu doar culorile. Filele sunt deschise sau închise după temă; o pictogramă bleumarin dispare pe o bară închisă. Dacă simbolul este închis, alege un fundal deschis în instrument, sau invers.
Spațiul interior, dintre logo și marginea pătratului, cere echilibru. Prea mult micșorează logoul în filă. Prea puțin permite iPhone-ului, care rotunjește pictogramele, să taie colțurile logoului.
La final privește previzualizările filelor deschise și închise la dimensiunea reală, fără mărire. Instrumentul nostru gratuit de verificare logo merge mai departe: micșorează logoul la 32 de pixeli și măsoară detaliile păstrate.
Când redesenezi simbolul în loc să îl micșorezi
Uneori nicio ajustare nu ajută. Într-o ilustrație detaliată sau un aspect 3D bazat pe umbre, detaliul este chiar designul, iar la 16 pixeli dispare. Instrumentul poate redimensiona logoul, dar nu îl redesenează.
Asta nu înseamnă un logo slab, ci unul făcut pentru spații mai mari. Creează intenționat o versiune mică: un simbol simplificat sau inițiala în fontul mărcii. Păstrează culorile și ceva din formă, iar oamenii vor face legătura. Preferăm oricând o inițială clară unei miniaturi neclare.
Ai nevoie de un simbol nou? Generatorul de logo cu AI pornește de la numele mărcii și, dacă dorești, o scurtă descriere. Logourile din șabloanele noastre includ simbolul separat atunci când îl au, iar fiecare logo cumpărat include fișierele favicon.
Întrebări despre favicon
Este gratuit, fără înregistrare și fără filigran. Imaginea rămâne la tine. Instrumentul funcționează integral în browser, creează toate dimensiunile și arhiva pe dispozitiv, fără să trimită imaginea pe serverele noastre. Îl poți folosi și pentru un logo pe care nu l-ai arătat încă nimănui.
Pătrată, cu fiecare latură de cel puțin 512 pixeli. Cea mai mare pictogramă din set are 512 pixeli; un PNG, JPG sau WebP mai mic trebuie întins și devine neclar. Instrumentul te avertizează. SVG-ul nu are această limită: conține forme, nu pixeli, și rămâne clar la orice dimensiune. Un logo lat umple doar o fâșie din pătrat, deci pornește de la simbol sau inițială.
Ai nevoie de toate, deoarece browserele și telefoanele cer fișiere diferite; HTML-ul oferit indică fiecăruia ce să folosească. ICO este înțeles de orice browser. PNG-urile sunt pentru telefoane și aplicații instalate, cu rezerve la dimensiuni mici. SVG-ul, primit dacă pornești de la SVG, rămâne clar pe orice ecran în browserele compatibile.
Cel mai probabil browserul afișează o copie salvată. Păstrează faviconurile mai mult decât restul paginii, deci pictograma veche poate rămâne după publicarea fișierelor noi. Încearcă reîncărcarea fără cache: Ctrl+Shift+R pe Windows, Cmd+Shift+R pe Mac (Option+Cmd+R în Safari). Dacă nu ajută, deschide adresa cu /favicon.ico la final și reîncarc-o ori verifică într-o fereastră privată. Browserele celorlalți se vor actualiza în timp.
În setările platformei, nu într-un dosar. Majoritatea constructorilor și magazinelor online au o setare pentru pictograma site-ului sau favicon, unde încarci un PNG pătrat. Alege icon-512.png, cel mai mare din arhivă, ca platforma să aibă suficientă rezoluție pentru variantele mici. Dacă cere o dimensiune anume, folosește fișierul corespunzător. Platformele adaugă HTML-ul, deci poți sări instrucțiunile README.
Google preia faviconul nou când programul său care citește paginile vizitează din nou pagina principală. Nu există un program fix. Cere o imagine pătrată și legătura către pictogramă în HTML-ul paginii principale; verifică ambele. După aceea, Google decide ce afișează și când, așa că acordă-i timp.
Nu ai încă un logo? Creează unul.
Creează-l cu generatorul de logo cu AI sau cu un șablon din creatorul de logo. Fiecare logo descărcat din DepthLogo include deja fișierele favicon.