Veteranii online-ului stiu deja probabil ca sunt micile detalii care fac diferenta intre un website sau magazin online placut de navigat, memorabil si care prinde la pubic si un site parasit. Indiferent de nivelul tau in ceea ce priveste administrarea/designul/uitatul pe un site, sunt mici detalii la care trebuie sa fii atent, pentru a fi sigur ca site-ul sau magazinul tau online este usor de utilizat.
Dupa cum v-ati prins din titlu, astazi discutam despre Favicon. Termenul este un fel de abreviere de la ‘favorites icon’, adica icoana pentru favorite. Original icoanele acestea erau folosite pentru a distinge site-urile, in lista de site-uri favorite – acum cunoscute de mai toti ca si Bookmarks. De-a lungul timpului, faviconul a prins si noi puteri.
De exemplu, uite in 2016, cateva locatii in care te poti intalni cu un favicon:
- in fereastra de favorite/bookmarks;
- in bara de bookmarks;
- in tab-ul unui browser;
- in partea din stanga a address bar-ului de pe pagina pe care te afli;
- in lista dropdown de prezicere a URL-urilor daca browserul tau foloseste un astfel de serviciu.
(diverse favicoane in Google Chrome)
Un favicon ne face viata mai usoara
Da. Atat noua cat si vizitatorilor nostri.
Oamenii care navigheaza pe net in mod constant sunt obisnuiti deja sa vada un favicon in bara de bookmarks sau in tabul deschis. Desi poate multi nu stiu exact cum apar si care este ideea lor, majoritatea utilizatorilor apreciaza prezenta lor si in mod sigur observa absenta lor.
Creierul nostru poate procesa mult mai rapid si mai usor imagini, decat poate procesa cuvinte. Astfel, e mult mai usor sa recunosti un site direct dupa iconita afisata.
Favicon – credibilitate si branding
Un favicon denota credibilitate prin simplul fapt ca arata vizitatorilor site-ului tau ca le prezinti informatii/produse de pe un site finisat, gandit, cu atentie la detalii. Un favicon le spune vizitatorilor ca esti dispus sa mergi cat de departe se poate, pentru a le indeplini cerintele. O astfel de atitudine construieste incredere. Cred ca deja am explicat mai sus impactul pozitiv pe care il poate avea un favicon cand discutam despre experienta utilizatorului.
Branding? Unde ar fi Twitter, Facebook, Google, Coca Cola si multi altii fara simbolurile lor deja bine intiparite in mintea consumatorilor? Fie ca e derivat din logo-ul companiei tale sau reprezinta ceva unic, un favicon ajuta utilizatorul sa tina minte brandul. Functioneaza ca un logo in miniatura.
Cum faci rost de un Favicon?
In primul rand, trebuie sa stii cateva date tehnice despre acesta:
- este recomandata o rezolutie de 32px x 32px, sau 16px x 16px – dar nu obligatorie;
- Cele mai populare formate sunt .ico si .png, dar un favicon poate fi si .gif sau .jpg;
- foloseste logo-ul tau daca e ceva simplu si usor de distins si la o rezolutie atat de mica, sau un simbol unic.
Ca sa iti setezi favicon-ul tau, in functie de site-ul sau magazinul tau s-ar putea sa fie mai lejer sau nu – desi nu e greu in nici un caz. Daca folosesti un CMS sau o platforma anume (Wordpress, Magento, Prestashop, Drupal etc.), s-ar putea sa iti poti seta favicon-ul direct din panoul de setari.
Daca ai un website pur HTML, fara panou de administrare sau alte lucruri, va trebuie in fiecare pagina, in sectiunea HEAD sa introduci o referinta care trimite la favicon-ul tau.
Exemple:
<link rel="icon" href="calea/catre/favicon.png"> - metoda standard.
Dar, intampinam o problema. Internet Explorer 9 si versiunile mai vechi nu suporta favicoane de tip .png. Asa ca, introducem si codul urmator inaintea liniei de cod de mai sus:
<!--[if IE]><link rel="shortcut icon" href="calea/catre/favicon.ico"><![endif]-->
Bun am rezolvat cu favicon-ul pentru browserele moderne si pentru versiunile mai vechi. Dar ce facem cu icoanele touch, ce pot aparea pe telefoanele mobile?
Simplu! Folosim un favicon .png la marimea de 180px x 180px, si prin urmatorul cod ne asiguram de faptul ca icoanele vor fi afisate frumos si cand sunt puse la bookmarks pe iOS:<link rel="apple-touch-icon-precomposed" href="calea/catre/apple-touch-icon-precomposed.png">
Concluzii
Deci, cu putina atentie la detalii le putem demostra vizitatorilor si clientilor nostri ca ne pasa de modul in care brand-ul nostru este reprezentat in online. Acestia vor aprecia constient sau nu acest lucru si vor recunoaste usor site-ul sau magazinul lor preferat dintr-o multime de bookmark-uri sau tab-uri deschise.
Noi mereu setam un favicon potrivit pentru orice proiect, fie el un blog, un magazin online, un site sau chiar si un simplu portofoliu. Daca nu te descurci sau ai nevoie de ajutor cu designul sau dezvoltarea magazinului tau online sau a unui site, ne poti contacta ca sa stabilim exact cum te putem ajuta.
Daca articolul te-a ajutat, da-i un share si un like pe reteaua ta preferata de socializare!
[social_buttons facebook=”true” twitter=”true” pinterest=”true” google_plus=”true” linkedin=”true”]