În design web, după cum probabil știți, fiecare detaliu contează. O persoană care a trecut la resursa dvs. nu vede fiecare dintre elemente separat, ci percepe întreaga imagine ca un pachet format din alte mici detalii. Astfel, dacă îți scapă ceva în procesul de dezvoltare a resursei tale, acest detaliu poate strica mai târziu întregul complex, întreaga compoziție.
Un astfel de fleac poate fi, de exemplu, fundalul unui buton, un font ales incorect al unui element mic și chiar un favicon. Într-adevăr, vedeți singur - site-urile mari, binecunoscute, au o pictogramă individuală care o indică în secțiunea „Marcaje” a browserului utilizatorului. Fără el, dezvoltatorii resursei nu ar fi fost capabili să creeze compoziția pentru care s-au străduit inițial.
De aceea, atunci când creați un design pentru site-ul dvs., ar trebui să aveți grijă de un astfel de detaliu precum favicon-ul. În acest articol, vom vorbi despre cum să o potrivim cu stilul general al resursei, precum și despre ce dimensiuni ar trebui să aibă această imagine.
pictogramă site
În primul rând, să definim ce este acest element. În acest moment, aruncați o privire la titlul filei browserului dvs. După cum puteți vedea, există o imagine mică în stânga acesteia, care indică o versiune simplificată a siglei resursei. Aceeași imagine este și lângă numele site-ului afișat în rezultatele căutării. Acesta este ceea ce ghidează utilizatorul când vede titlul.
Mulți webmasteri înțeleg că este nevoie de o astfel de imagine - dar puțini oameni știu ce dimensiune a favicon-ului pentru site va fi cea mai potrivită. Prin urmare, în acest articol nu vom oferi doar informații despre cum să creați o astfel de pictogramă și despre cum o puteți instala pe resursa dvs., dar vom vorbi și despre dimensiunile imaginilor.
Scopul favicon-ului
Deci, imaginea de lângă antetul site-ului este folosită pentru identificare. Acesta este scopul său inițial: să exprime site-ul al cărui nume îl vedem și să-l scoată în evidență în ochii celorlalți. Acest lucru se face cât se poate de simplu prin utilizarea graficelor: percepem intuitiv informațiile din imagini mult mai rapid și mai ușor decât în format text. Favicon-urile ne ajută să facem exact asta. Dar nu uitați că dimensiunea favicon-ului este minimă în ochii utilizatorului. Acesta nu este o siglă din „antetul” site-ului, care poate conține informații suplimentare sub formă de inscripții, unele clarificări sau informații de contact. Tot ceea ce poate fi afișat în pictograma de lângă nume ar trebui să se potrivească cât mai mult cu dimensiunea favicon-ului. Și el, așa cum sa indicat deja, este pur și simplu în miniatură (doar 16 pe 16 pixeli).
Cum să alegifavicon?
Deci, cum poate un webmaster să creeze o pictogramă pentru site-ul său? Trebuie remarcat faptul că simpla comprimare a siglei site-ului, cel mai adesea, nu va funcționa. Pe emblemele care sunt puse sub forma unui logo al unei anumite resurse, sunt adesea vizibile diferite elemente, care nu vor fi întotdeauna afișate corect într-o formă miniatură. Este mai bine să abandonați imediat un astfel de angajament.
Desigur, dimensiunea favicon-ului nu permite să vorbim despre simpla inserare a unei inscripții acolo. Orice text va fi pur și simplu invizibil la această rezoluție. Trebuie să dezvoltăm o nouă pictogramă care să transmită stilul site-ului. Pentru a găsi soluții, din nou, să apelăm la cele mai mari site-uri.
Mulți oameni folosesc prima literă stilizată a numelui serviciului ca favicon. Acesta este modul, de exemplu, Bing, Yahoo, Yandex, Wikipedia, Google. Există o altă abordare - dacă aveți un nume scurt de site, îl puteți seta ca fundal al pictogramei dvs. Pentru ca dimensiunea favicon-ului (în pixeli ajunge, repet, 16 pe 16 pixeli) să afișeze corect această inscripție, nu trebuie să fie mai mare de 3 litere. Aceasta este ceea ce face, de exemplu, serviciul Aol.
Cum se creează o favicon?
Există mai multe moduri de a crea o pictogramă pentru numele site-ului. Desigur, cel mai ușor este să lucrezi cu diferite soluții gata făcute. Putem vorbi despre unele servicii sau programe care vă permit să faceți o pictogramă dintr-o imagine cu drepturi depline prin reducerea acesteia. Cu toate acestea, aș recomanda să dezvoltați un astfel de logo pe cont propriu. Acest lucru va da în primul rândposibilitatea de a învăța ceva; și în al doilea rând, va oferi mai multe instrumente. Tot ce trebuie să știți pentru aceasta este ce să desenați și, de asemenea, să știți ce dimensiune ar trebui să aibă favicon-ul în versiunea finală. Despre dimensiunea pictogramei pentru site vom vorbi puțin mai târziu, dar deocamdată vom observa câteva subtilități ale lucrului cu astfel de imagini. În special, fără a menționa dimensiunea favicon-ului pentru site, formatul unei astfel de imagini ar trebui clarificat. După cum notează designerii experimentați, imaginea trebuie salvată ca fișier-p.webp
Puteți salva fotografia, de exemplu, folosind Photoshop, unde va fi desenată emblema.
Dimensiuni Favicon
Deci, acum să vorbim despre cât de mare ar trebui să fie imaginea pe care o vedem lângă numele site-ului în rezultatele căutării. În mod implicit, așa cum am menționat deja, dimensiunea sa este de numai 16 pixeli (pe fiecare parte). Cu toate acestea, dacă încercați să editați această imagine în Photoshop, veți vedea singur cât de incomod este. Prin urmare, vă recomandăm să lucrați cu o imagine mărită, care în viitor poate fi pur și simplu comprimată de-a lungul marginilor și salvată în formatul necesar.
Multiplatform
Cu toate acestea, vorbind despre cât de mare ar trebui să fie favicon-ul pe site-ul dvs., mai este un lucru de reținut. Nu toate platformele afișează o imagine de resursă în același mod. De exemplu, dispozitivele cu afișaj Retina „văd” favicon-ul la 32 pe 32 de pixeli. Și în Safari și pe noua platformă Windows, și deloc, aceste pictograme ating o dimensiune de 64pixeli.
De aceea, vă recomandăm să salvați versiuni diferite ale pictogramei și să asigurați pur și simplu modificarea acesteia în funcție de platforma utilizatorului în viitor. Un alt punct interesant - puteți încerca să încărcați pictograma în cel mai mare format, bazând pe faptul că se va „strânge” în funcție de browser.
Editori din afara
Bineînțeles că este bine dacă ești bun cu Photoshop și știi ce dimensiune ar trebui să aibă favicon-ul și cum să-l obții în timp ce îți salvezi imaginea. Cu toate acestea, există o mulțime de începători care pur și simplu nu au întâlnit editorii grafici atât de aproape până acum, așa că nu pot desena atât de ușor imaginea dorită. Pentru a ajuta astfel de webmasteri, există diverse servicii care vă permit să creați automat pictograma care vă interesează. Multe dintre ele sunt chiar gratuite, ceea ce nu necesită nicio investiție din partea utilizatorului.
Uneori trebuie să vă înregistrați doar pentru a lucra, dar, după cum înțelegeți, acest lucru se face o dată - la urma urmei, companiile nu își schimbă favicon-ul atât de des. Aruncă o privire la Google, care schimbă sigla în fiecare zi, dar nu atinge pictograma.
Cum se instalează o favicon?
În general, configurarea site-ului dvs. în așa fel încât să afișeze corect imaginea de care aveți nevoie este foarte simplă. Este suficient să efectuați o serie de pași simpli care vor permite motoarelor de căutare, precum și browserelor simple, să citească informațiile.
Pentru a face acest lucru, imaginea rezultată trebuie salvată cunumit favicon.ico și plasat în rădăcina resursei dvs. Gata, acum imaginea ta va fi recunoscută automat, iar după ceva timp va fi conectată la site-ul tău.
Pe lângă această legare, puteți adăuga încă o linie care va „sugera” unde se află pictograma dvs. Arată așa:
Instalați codul în antetul site-ului.
Concluzii
Așadar, după ce ați citit articolul nostru, v-ați dat seama ce dimensiune ar trebui să aibă un favicon pentru un site și care este acesta. De asemenea, cred că ați înțeles că găsirea pictogramei potrivite pentru resursa dvs. este o necesitate, pentru că vă joacă în mâinile dvs. atât în ceea ce privește creșterea recunoașterii, cât și în ceea ce privește remarcarea suplimentară în rândul concurenților dvs. Cel puțin cele mai mari site-uri fac același lucru, ceea ce poate fi luat ca un prim exemplu. Și, în plus, nu provoacă mult efort - după ce ai creat o singură dată un favicon și l-ai instalat corect pe site-ul tău, poți uita de el în următoarele câteva luni.
De aceea, nu ezitați să experimentați, să veniți cu ceva nou, să încercați - și totul va funcționa!
