Ai acordat vreodată atenție acelor pictograme mici din partea de sus a filelor de browser? Dar atunci când salvați o scurtătură către un site sau o pagină online? Acele imagini minuscule, sau favicons, sunt concepute special pentru acest scop.

Există o diferență destul de clară între ceea ce reprezintă o pictogramă minusculă bună sau proastă. Ai fi iertat dacă ai crede că deciziile de design la scară mică contează mai puțin. Dar un favicon prost proiectat se poate reflecta negativ asupra brandului dumneavoastră.

Astăzi ne uităm la ce sunt aceste pictograme, la tehnicile de design de bază pentru ele și la specificațiile pe care va trebui să le urmați.

Ce este un Favicon?

Simplu, un favicon este o pictogramă mică, transparentă, folosită pentru a reprezenta un site web, o marcă sau o afacere. Favicons ajută la îmbunătățirea experienței utilizatorilor prin furnizarea unui marker consistent care le spune vizitatorilor site-ului web că se află pe același site în timp ce navighează datorită unui vizual consistent.

Termenul favicon vine de la „favorite icon”. Această terminologie datează de pe vremea Internet Explorer, când paginile marcate ca favorite erau numite „Favorite”. Faviconul a fost adoptat pentru prima dată de World Wide Web Consortium (W3C) pentru HTML 4.0, în jurul anului 2000, și a început să apară mai consistent în ferestrele browserului în anul următor.

Utilizați faviconi pentru a trece rapid între filele browserului, pentru a identifica un marcaj sau pentru a găsi o aplicație salvată sau o comandă rapidă pe telefon. Identificatorul vizual este ceea ce majoritatea oamenilor folosesc pentru a asocia aceste linkuri și pagini cu butonul potrivit pentru a le accesa.

În mod tradițional, favicons foloseau un format de fișier .ico, dar acest lucru este mai puțin problematic acum. Orice tip de fișier transparent va funcționa în majoritatea cazurilor; .png este adesea formatul ales.

Considerații tehnice

La un moment dat, toate favicons erau pătrate super mici de 16 pixeli. Acesta nu mai este cazul acum, cu mai multe ecrane retina de înaltă definiție și pictograme de scurtătură de luat în considerare.

HTML 5 include standarde pentru favicons cu dimensiuni multiple pentru tot felul de utilizări, de la pictograme mici de browser la pictograme de stație de andocare a computerului și pictograme de ecran de pornire. Nici măcar nu mai aveți cu adevărat nevoie de acel pătrat de 16 pixeli.

Dimensiunile și utilizarea faviconurilor moderne:

• 32×32: Standard pentru majoritatea browserelor desktop (înlocuiește 16×16)
• 128×128: Magazinul Chrome și pictograma mică a ecranului stelar din Windows 8
• 152×152: Pictogramă iPad touch
• 167×167: Pictogramă iPad Retina touch
• 180×180: Pictogramă iPhone Retina
• 192×192: Recomandare aplicație web Google Developer
• 196×196: Pictograma ecranului de pornire Android

Bune practici

Deși pare că o pictogramă care este așa ar putea fi nesemnificativă în ceea ce privește designul general, acest lucru este departe de a fi adevărat.

Un favicon spune multe despre brandul și site-ul dumneavoastră. Utilizatorii au ajuns să se aștepte la ele, dacă nu le pot identifica după nume. Aceste elemente mici contribuie la experiența generală a utilizatorului și la brand.

Atunci cum puteți profita la maximum de un favicon?

Țineți cont de aceste bune practici:

• Un favicon ar trebui să se conecteze la identitatea brandului dumneavoastră, dar este adesea prea mic pentru a include un întreg logo. Folosiți un element identificabil, cum ar fi prima literă a numelui mărcii dvs. sau o marcă mică pe care o folosiți în legătură cu marca.
• Gândiți-vă la formă. Spațiul pentru un favicon, în mod implicit, este pătrat. Dacă doriți altceva, este necesar un fundal transparent. Unele sisteme pot, de asemenea, să rotunjească marginile, ceea ce face ca acesta să fie un alt aspect de care trebuie să țineți cont.
• Asigurați-vă că fișierul este mic, dar nu prea mic. Încărcați o dimensiune a faviconului care să fie redată corect pe majoritatea dispozitivelor, dar care să nu îngreuneze întregul site web.
• Evitați cuvintele sau elementele complexe în designul faviconului.
• Atenție la o paletă de culori simplă și raționalizată pentru favicon. Este prea mic pentru a o lua razna cu culorile. De aceea, majoritatea acestor pictograme mici folosesc puțin mai mult decât o culoare de fundal și una de prim-plan, cu mult contrast între cele două.

Tehnici de proiectare

Din moment ce un favicon este mic, ați putea fi înclinat să îl proiectați după bunul plac în Photoshop. Aceasta nu este calea recomandată pentru longevitate.

Construiți faviconul dvs. într-un instrument vectorial, cum ar fi Illustrator sau Sketch, apoi exportați designul la dimensiunile necesare. Acest lucru vă va asigura că, pe măsură ce rezoluțiile ecranului se schimbă, veți avea un favicon care va rezista testului timpului. (Tot ce va trebui să faceți este să reexportați la o nouă dimensiune.)

Regula principală de design vizual pentru faviconi este să păstrați designul simplu. Nu exagerați cu culori, text sau elemente de marcă. Dacă vă uitați la exemplele din această postare, veți vedea că aproape toate aceste elemente minuscule sunt lizibile la 16 pe 16 pixeli.

Evitați trucuri precum animația; acestea nu fac decât să vă încurce aici.

Considerați-o o provocare de design. Poate fi destul de greu să creezi ceva atât de mic încât să fie ușor de citit.

Salvați fișierul ca un png transparent. Este un obicei bun care vă asigură că nu vă veți trezi cu margini sau borduri ciudate pe favicon. (Nimic nu arată mai rău decât o margine albă zimțată care înconjoară pictograma.)

Utilizați principiile unui design bun. Nu se știe niciodată când faviconul ar putea fi folosit pentru ceva la o dimensiune mai mare, mai vizibilă. Salvarea unui marcaj pe un site web, de exemplu, poate folosi o versiune mare a unui favicon. Același lucru este valabil pentru andocare și chiar și în previzualizările rezultatelor motoarelor de căutare.

Chiar dacă este mică, această pictogramă reprezintă marca dumneavoastră. Proiectați-o bine.

După ce aveți fișierul gata, îl puteți adăuga la site-ul dvs. web cu doar câteva linii de cod. (Multe teme WordPress și creatoare de site-uri web au deja inclus un element favicon, astfel încât nici măcar nu trebuie să vă gândiți la acest pas.)

După ce încărcați fișierul imagine, inserați următorul cod în antetul site-ului dvs. web, observând că „iconpath” și „iconname” se referă la elementul specific al fișierului dvs.:

Exemple

Exemplele de mai jos includ câteva elemente de marcă cu faviconi asociate. (Asigurați-vă că faceți clic și arătați-le designerilor puțină dragoste pe paginile lor Dribbble.)

Prodigi.team Responsive Logotype

Butterscotch Proposed Logo System

Logo Favicon Display

Logo Favicon Display

.

Favicon Template

TEC Logo Option 2

Concluzie

Ce le lipsește faviconurilor în ceea ce privește dimensiunea, ele compensează în ceea ce privește experiența utilizatorului. Aceste pictograme servesc ca instrumente de navigare pentru vizitatorii de pe site-ul dvs. și pentru cei care au tendința de a lăsa prea multe file de browser deschise.

De regulă, un favicon este un identificator vizual rapid care leagă utilizatorul de prezența dvs. digitală. Aveți grijă cu el pentru a vă asigura că este cea mai bună și mai precisă reprezentare a brandului dvs.

.