Ce este un Favicon – Cum să faci unul pentru brandingul site-ului

Cea mai mare greșeală pe care o poate face un site web este să nu aibă acel favicon.

Conținut grozav, design profesional, navigare lină, dar un site web fără favicon se simte atât de incomplet. Dacă nu doriți ca acest lucru să se întâmple site-ului dvs., creați acum o favicon.

În această postare, vă voi spune totul despre o favicon și cum puteți crea cu ușurință o favicon cu aspect profesional pentru site-ul dvs.

Ce este un Favicon?

Un favicon este o pictogramă de 16 x 16 pixeli care apare în partea de sus a unui browser web. Având o favicon pe site-ul dvs., vizitatorii pot găsi mai ușor pagina web atunci când sunt deschise mai multe file. De asemenea, este grozav să vă marcați site-ul.

Deoarece favicon-ul are o dimensiune mică, funcționează excelent ca imagini simple sau 1-3 caractere de text. O favicon este o componentă vitală a interfeței unui site web și joacă un rol crucial în toate tipurile de aplicații web.

Istoria Favicon-urilor:

Favicon-urile sunt pictograme de comenzi rapide care au apărut în Internet Explorer 5. Aici, includerea unei pictograme favicon .ico în rădăcina unui site ar avea ca rezultat o imagine pătrată de 16 pixeli care va fi afișată lângă adrese URL în bara de adrese, precum și lista de marcaje fără au nevoie de HTML.

La început, a servit avantajul de a măsura de câte ori site-ul dvs. este marcat. Acest lucru se poate face numărând cererea pentru favicon. Dar acum, nu este mai fiabil, deoarece browserele au început să accepte favicon și pentru alte funcționalități avansate.

Care este diferența dintre pictogramele aplicației și favicon-urile?

Unii oameni se confundă între favicon-urile și pictogramele aplicațiilor. Dar este o mare diferență între cele două!

Favicon-urile nu sunt menite să rezume nicio acțiune sau să combată barierele lingvistice. Mai degrabă, scopul lor este de a expune site-urile web ca indicatori și de a le îmbunătăți branding-ul pe browser. Din acest motiv, favicon-urile sunt întotdeauna versiuni mai mici ale siglei unui site web.

Lucrul bun este că este destul de ușor să creezi un favicon.

Dar înainte de a merge mai departe pentru a cunoaște pașii pentru a crea o favicon, mai întâi trebuie să ne concentrăm pe unele dintre aspectele importante legate de o favicon.

Să le verificăm mai jos.

Care este importanța unui Favicon?

Cel mai important lucru pe care trebuie să îl înțelegeți este că o favicon nu afectează funcționalitatea site-ului dvs. De fapt, oferă site-ului dvs. un aspect mai elegant și mai profesional.

Un site web fără favicon pare neprofesional. Și dacă utilizați o favicon ruptă, atunci site-ul dvs. ar părea rupt.

Mai mult, o favicon face mult mai ușor să marcați pagina de care au nevoie utilizatorii dvs. Acest lucru se datorează faptului că este mai ușor să cauți o favicon familiară, mai degrabă decât să o cauți pe toate din nou. Prin urmare, o favicon ajută la îmbunătățirea experienței utilizatorului. Din acest motiv, a devenit o componentă populară a tuturor tipurilor de browsere și site-uri web moderne în filele lor de navigare.

Companiile din întreaga lume au pictograme recunoscute care le ajută să iasă în evidență față de concurenții lor. Este un instrument extrem de util pentru site-urile web de toate tipurile și vă poate ajuta publicul țintă să vă găsească site-ul cu ușurință și mai rapid.

În plus, un favicon poate apărea în diferite tipuri de fundaluri. Prin urmare, poate fi afișat pe interfața de utilizare Mac OS X, Windows Aero Glass sau alte teme de browser.

Care sunt dimensiunile dorite pentru Favicon?

O favicon poate fi creată pentru diferite utilizări și, prin urmare, dimensiunile de creat ar depinde de funcționalitatea de servit.

16 pixeli:

Aceasta este dimensiunea standard pentru o favicon și ideală pentru utilizarea în browserele generale. O favicon de această dimensiune poate fi afișată cu ușurință în file, bara de adrese și vizualizări de marcaje.

24 pixeli:

Astfel de favicon-uri sunt ideale pentru fixarea site-ului web în Internet Explorer 9

32 pixeli:

Favicon de această dimensiune este ideal pentru pagina de filă nouă din Internet Explorer, bara laterală a Safari și butonul din bara de activități în Windows 7+

57 pixeli:

Această dimensiune este ideală pentru a crea favicon-uri pentru ecranul de pornire standard iOS, iPhone de prima generație la 3G și iPod Touch

72 pixeli:

Favicon-urile de această dimensiune sunt ideale pentru pictograma de pe ecranul de pornire al iPad-ului

96 pixeli:

Această dimensiune de favicon este utilizată de platforma Google TV

114 pixeli:

Are o dimensiune dublă față de afișajul retină și este folosit pentru ecranul de pornire al iPhone 4+

128 pixeli:

Este folosit pentru Magazinul web Chrome

195 pixeli:

Această dimensiune este ideală pentru Opera Speed ​​Dial

În funcție de context, puteți utiliza o anumită dimensiune pentru a crea o favicon. De exemplu, un site web pentru iOS și Mac Software Company va beneficia de numeroase pictograme specifice iPhone și iPad. Pe de altă parte, un site intranet afișat pe Internet Explorer va obține rezultate mai bune cu un format ICO cu mai multe rezoluții. O aplicație creată pentru web și concepută pentru a fi vizualizată pe desktop și pe mobil ar beneficia de petrecut timp pentru a crea favicon-uri de toate aceste dimensiuni.

Care sunt formatele dorite pentru Favicons?

La început, formatul Windows ICO era singurul tip de fișier acceptat. Și erau mici trucuri care economisesc timp, de care ne puteam baza. Mai devreme, a funcționat bine hack-ul de salvare a unui favicon ca GIF 16 x 16 și redenumire cu o extensie de fișier .ico.

Dar în prezent, acest truc nu funcționează bine și, prin urmare, această metodă nu trebuie utilizată pentru a crea un fișier ICO. Prin urmare, celelalte două formate suportate pentru utilizarea favicon sunt după cum urmează:

• Formatul de fișier ICO este încă cel mai larg acceptat. Acest format poate include rezoluții multiple și adâncimi de biți. Acest lucru îl face extrem de util pe Windows. Formatul și dimensiunea pentru favicon pot varia pentru Internet Explorer. Formatul ICO poate oferi această ușurință și este singurul format care este identificat fără a utiliza un element.
• Celălalt format convenabil este PNG. Se datorează faptului că nu are nevoie de instrumente speciale pentru a crea acest format. Acceptă transparența alfa și ne oferă cea mai mică dimensiune a fișierului. Limitarea acestui format este că nu acceptă Internet Explorer.
• Celălalt format este GIF și GIF animat. Singurul avantaj al acestui format este că acceptă browsere foarte vechi.
• Formatul JPG este cel mai bun chiar dacă imaginea este o fotografie. Nu are atât de claritatea oferită de formatul PNG, dar se îmbină bine la o dimensiune mică.
• Formatul SVG este o alegere excelentă dacă doriți să folosiți favicon-ul pe Opera.
• De asemenea, există format APNG sau PNG animat, care este acceptat de Opera și Firefox. Dar utilitatea sa este discutabilă.

Sfaturi de luat în considerare atunci când proiectați o favicon:

1. Creați o favicon după aspectul site-ului dvs.:

Designul dvs. de favicon trebuie să semene foarte mult cu aspectul site-ului. Designul trebuie să adere la imaginea de marcă a afacerii dvs. și trebuie să fie ușor de memorat și de recunoscut pentru mulțime. Acest lucru se datorează faptului că favicon-ul ar fi primul lucru pe care îl vor vedea oamenii atunci când văd prima dată file într-un browser.

2. Alegeți un fundal transparent:

Dacă nu puteți decide niciun fundal, umpleți-l în alb. Fundalul transparent ia culoarea browserului utilizatorului și arată mai profesionist. Alternativ, puteți alege un fundal colorat care face spațiu pentru grafice sau litere.

3. Favicon-ul tău trebuie să fie ușor de citit:

Întrucât o favicon are dimensiuni foarte mici, este esențial să vă puteți evidenția marca cu ea fără a duce la nicio confuzie. În acest scop, favicon-ul tău trebuie să fie ușor de citit. Nu trebuie să creeze îngrijorări în mintea vizitatorului cu privire la calitatea muncii pe care o oferiți. Faviconurile complexe sau care se suprapun nu arată bine.

4. Proiectați o structură plăcută din punct de vedere estetic:

Structura ta favicon este cunoscută sub denumirea de formular. Favicon poate fi de diferite forme, cum ar fi un pătrat sau un cerc. Asigurați-vă că designul dvs. de favicon se potrivește bine într-una dintre aceste forme. În plus, trebuie să aibă un design bine echilibrat, care să atragă atenția, ușor de citit și plăcut din punct de vedere estetic.

5. Utilizați culori asociate mărcii:

Favicon-ul dvs. trebuie să aibă o dimensiune care este acceptată de majoritatea browserelor moderne. În plus, trebuie să aibă o culoare care să fie coerente cu site-ul sau marca dvs. Dacă culorile favicon-ului dvs. nu se sincronizează bine cu culorile site-ului, aplicațiilor sau logo-ului dvs., atunci oamenilor le va fi dificil să se relaționeze cu marca dvs. și să-și amintească.

Pași pentru a crea o favicon:

Iată pașii simpli pentru a crea un favicon:

1. Creați o favicon utilizând un software de editare foto:

Cel mai bine este să utilizați un software de editare foto precum Illustrator sau Adobe Photoshop pentru a crea imaginea favicon-ului dvs. Utilizarea unor astfel de aplicații software oferă opțiuni de redimensionare și de export a oricărei imagini într-un format corect.

Există unele software disponibile, care vă permit să creați favicon cu mâinile. Puteți chiar să verificați dacă există programe speciale de editare disponibile pentru a edita designul faviconului. Asigurați-vă că vă proiectați favicon-ul într-o dimensiune care este acceptată de majoritatea browserelor.

2. Redimensionați-vă Favicon:

Dimensiunea 16 x 16 este dimensiunea ideală pentru favicon pentru majoritatea browserelor. Odată ce creați propria favicon într-o dimensiune mai mare, următorii pași sunt să o reduceți la o dimensiune adecvată, care este dimensiunea pe care o vor vedea oamenii în browserele lor. Dacă designul este lizibil și plăcut, atunci este bine să pleci, în caz contrar, trebuie să repeți pasul 1.

Luați în considerare toate platformele și browserele pe care site-ul dvs. web le va folosi probabil și creați favicon pentru a acoperi bazele.

3. Convertiți extensia de fișier în fișier .ico:

Acum utilizați un convertor .ico și schimbați formatul faviconului OWA (Outlook Web App) în formatul dorit. Odată ce formatul este schimbat, salvați-l. Acest lucru vă va asigura că favicon-ul dvs. va apărea bine pe diferite platforme. Puteți utiliza convertizoare gratuite disponibile online în acest scop.

Implementarea/Exportarea Favicon-ului:

După ce ați creat favicon-ul, ultimul pas este să îl exportați în browserul dorit.

1. Încărcați Favicon-ul dacă ați folosit un editor de site-uri web:

Majoritatea editorilor de site-uri web au un formular încorporat. Acest lucru permite utilizatorilor să încarce automat favicon-ul pe site-ul lor web. Aici, trebuie să căutați alternative precum „adăugați favicon” sau „încărcați favicon” în meniul de setări al site-ului dvs.

2. Încărcați fișierul în directorul rădăcină al site-ului dvs.:

Acest lucru este util pentru site-urile web care acceptă FTP sau File Transfer Protocol. Acesta poate fi folosit pentru a încărca un nou fișier favicon în indexul sau directorul rădăcină. Dacă această opțiune nu este disponibilă, atunci trebuie să verificați încărcarea manuală a imaginii pe pagina gazdelor web.

3. Adăugați fișier la antet:

Găsiți un loc potrivit unde este posibil să accesați fișierele CSS și PHP pentru site-ul dvs. Vizitați fișierul header.php al site-ului, editați la fel. În tipul de etichetă,
/favicon.ico/>.

Acesta trebuie să conecteze site-ul dvs. la favicon. Deoarece utilizați PHP, înseamnă că orice site web care utilizează fișierul antet are acum o favicon similară.

4. Reîmprospătați browserul:

Odată ce ați încărcat favicon-ul, este timpul să reîmprospătați browserul pentru a vedea noua imagine de lângă bara de adrese. Pentru a vizita o imagine de acest tip și favicon actualizat. „http://www.yourdomain.com/favicon.ico”. Dacă favicon-ul nu apare, trebuie să resetați memoria cache a browserului. Pentru a șterge memoria cache, verificați setările browserului, ștergeți fișierele temporare de internet, istoricul și cookie-urile.

Concluzie:

Favicon-ul este o componentă importantă a unui site web și a afacerii dvs. online. Prin urmare, trebuie să fie creat într-un stil similar cu cel al unui site web. Cu cât favicon-ul și site-ul dvs. au mai multe în comun, cu atât este mai bine. Nu uitați, favicon-ul dvs. trebuie să fie asociat cu site-ul web, astfel încât utilizatorii să o poată înțelege și să o asocieze cu site-ul dvs.

Dacă doriți cu adevărat să creați un brand personal, atunci luați în serios abordarea de a crea un favicon!