Ce este un Favicon
Favicon-ul este iconita mica cu personalitate care apare langa adresa de internet la multe site-uri si mai ales blog-uri. Versiunile noi si contemporane de browsere, arata iconita in tab-ul site-ului langa titlul site-ului si nu langa adresa sa. Aceasta mica iconita, de obicei este un fisier .icon si se numeste Favicon. Numele sau este versiunea prescurtata de la „Favorite icon”, adica iconita favorita. Aceasta iconita apare si cand salvezi link-ul ca si scurtatura pe calculatorul tau. Acea scurtatura va avea ca si imagine favicon-ul site-ului.
Unele browsere ca si Google Chrome si Mozilla Firefox suporta favicon-uri cu format JPG, GIF sau PNG. Internet Explorer suporta doar formatul .ico, cele mentionate anterior nefiind afisate.
Favicon-ul apare si in lista de favorite ale site-urilor tale din bowser. In zilele noastre, iconita este folosita in toate sistemele de operare inclusiv iOS, Android, Linux, Windows sau Mac OS X.
Cum sa creezi un Favicon
Ca si orice alta imagine, iconita poate fi creata intr-un editor de imagine instalat pe calculator cum ar fi Adobe Photoshop, Gimp sau cele de baza inclusiv Paint, Paint.net. De asemenea, poate fi creata sau mai bine zis convertita online avand la baza o imagine de tip JPG, GIF sau PNG. Unul dintre cele mai populare generatoare/convertoare de acest tip este https://www.favicon-generator.org/. Acesta te lasa sa cauti printre iconitele deja incarcate pe site sau sa transformi tu unul. Aditional, mai sunt cateva setari disponibile pentru finete.
Poti folosi si un editor de imagini online cum ar fi LunaPic disponibil la https://www132.lunapic.com/editor/.
Cel mai mult conteaza sa faci o iconita clara si sugestiva. Recomandam ca dimensiunea ei sa fie de 32 pixeli pe 32 pixeli minim, desi 256 pixeli pe 256 pixeli este mult mai ok. Daca vrei un favicon transparent atunci trebuie sa fie de tip PNG.
Cum sa generezi o iconita
O alta metoda pentru a crea o asemenea iconita fie pentru site-ul sau programul tau este sa folosesti Prodraw. Aici, ai mai multe operatiuni de editare disponibile. De la incarcarea si convertirea unui fisier, pana la alegerea dimensiunii si nu numai. In cazul programelor pentru Windows 7 sau mai nou, dimensiunea trebuie sa fie de 48 pixeli pe 48 pixeli. Aceasta iconita ar putea fi folosita pentru un generator de screensaver. Pentru site-uri alege macar 128 pixeli pe 128 pixeli. Nu uita ca, indiferent de dimensiune, favicon-ul trebuie mereu sa fie patrat. Si cu cat este patratul mai mare, cu atat este mai clara iconita.
Cum sa setezi iconita pe site
Incarca iconita pe care vrei sa o folosesti pe site, fie printr-un client FTP, fie direct prin sistemul de management al continutului tau (WordPress). Daca site-ul este creat in WordPress, cu siguranta ai din tema optiunea sa setezi favicon-ul si sa si il incarci. Daca tema nu are aceasta optiune, atunci alege unul dintre plugin-urile care iti ofera acest control.
Daca site-ul nu este facut intr-un sistem de management al continutului in care foarte usor setezi favicon-ul, trebuie sa folosesti un cod HTML. Codul HTML trebuie adaugat in zona dinaintea etichetei <head>. Acest cod este :
<link rel=”shortcut icon” href=”/Favicon.ico” />
Asigura-te ca in locul „/Favicon.ico” pui exact locatia favicon-ului tau, impreuna cu numele sau corect si directoarele in care se afla, dar si cu adresa site-ului tau.
De ce iconita mea nu apare pe site?
Trebuie sa te asiguri ca aceasta are marimea si format-ul potrivit. Internet Explorer este mult mai pretentios decat celelalte browsere. In cazul sau, iconita trebuie sa fie patrata si in format .ico
Poate site-ul meu sa aibe mai multe favicon-uri pentru fiecare pagina? Si cum fac asta?
Pentru a avea mai multe iconite, cate una pentru fiecare pagina web, ar trebui sa introduci codul HTML de mai sus pe fiecare pagina. Problema poate aparea daca paginile sunt construite dinamic, de exemplu in PHP sau ASP. Paginile web WordPress sunt construite dinamic si impart toate aceeasi zona de antet unde se presupune ca ar trebui sa introduci codul HTML. In acest caz nu poti sa faci modificarea dorita.
Cum sa copiezi un Favicon
Cea mai usoara metoda este sa te folosesti de Google. Trebuie sa introduci in browser-ul tau adresa http://www.google.com/s2/favicons?domain=www.website.com unde www.website.com este adresa site-ului a carui Favicon vrei sa il copiezi. Mai departe editeaza-l cum doresti, incarca-l pe site si foloseste-l dupa cum crezi.
De ce am nevoie de un Favicon la site-ul meu?
Internet Explorer folosea aceasta iconita doar pentru lista de favorite (bookmarks), la inceput. Versiunile 6.0 si mai vechi nu stiau sa foloseasca altfel aceasta functie. De la versiunea 7.0 si impreuna cu celelalte browsere: Mozilla Firefox, Opera, Safari si Google Chrome iconita este afisata si in bara langa adresa. Versiunile si mai noi, afiseaza iconita in tab-ul site-ului langa titlul site-ului si nu langa adresa sa.
Aceasta functie devine super importanta mai ales daca ai o iconita bine facuta. Aceasta este un mic logo reprezentativ al brand-ului si site-ului tau. Un Favicon animat cu format GIF poate fi mai amuzant si sa atraga vizitatorii site-ului mai usor.
Ar trebui sa folosesti o iconita pentru a personaliza site-ul, pentru a crea un brand nou, pentru a atrage lumea pe site, pentru a completa site-ul, ca si o semnatura sau doar pentru amuzament.
Personalizarea unui Favicon
Pentru dispozitivele cu sisteme de operare iOS poti folosi diferite coduri HTML cum ar fi:
- pentru colturi rotunjite: <link rel=”apple-touch-icon” href=”iconita.png” />
- fara reflexie:<link rel=”apple-touch-icon-precomposed” href=”iconita” />
Alte imagini importante pe care site-ul tau ar trebui sa le aiba
- Avatarele arata ca site-ul tau este prietenos si ca este o comunitate. Acestea reprezinta fiecare vizitator si comentator. Poti sa iti faci propriul avatar pentru tine si afacerea ta.
- Logo-ul este unul dintre cele mai reprezentative imagini de care ai nevoie. Mai ales ca este si printre cele mai mari imagini de pe site-ul tau. Poate include si cuvinte, nu doar imagini.
- Banner-ul in antet poate fi, uneori, o idee buna. Daca esti animat este si mai bine. Daca este un slide, ai ajuns la un nivel superior. Poate include continut, text, imagini, butoane, clip-uri video si nu numai.
- Imaginile reprezentative la articole ar trebui sa fie obligatorii.
- Iconitele pentru canalele sociale ajuta evidentierea acestora.