Ce este un favicon, și ceea ce este pentru

Planificați pentru crearea și dezvoltarea unui site, în calitate de informare și comerciale, trebuie să includă măsuri pentru a crea propria resursă unică a imaginii. Este important să se dezvolte elemente care fac site-ul dvs. de recunoscut. Unul dintre acești factori este o imagine mică - un favicon.

1. În cazul în care sunt favicons

Favicon Termenul - o abreviere a englezilor fav pictograma ourite. însemnând „pentru pictograma selectată.“ Această imagine-icon - icon site-ul (sau pagina).

Favicons poate fi văzut în următoarele locații.

1. După cum spune numele, termenul în sine, favicons pictograma este afișată în marcajele browser-ului de lângă site-ul.

Un exemplu de bara de marcaje în Mozilla Firefox

Dacă marcajele utilizatorului bara de instrumente număr mare de link-uri, apoi naviga între cele două cea mai simplă de icoane lor, în loc de text pentru aceste link-uri: imagine creierul nostru citește mai repede decât textul. Prin urmare, aceste site-uri care nu au un favicon, în acest sens, pierd: ele sunt mai greu de găsit în lista între aceleași site-uri fără chip.

2. favicons afișate pe o filă de browser deschis pe stânga titlului paginii. Utilizarea favicons în acest loc este greu de estimat, în cazul în care browser-ul este deschis o mulțime de file, titlurile lor nu sunt vizibile, și cel mai rapid la pagina de tab dorită este în cazul în care acesta își are „față“, care este un favicon. Dar chiar dacă o parte din antetul este vizibil, noi încă preferă grafica informații text, peste care nu trebuie să vă faceți griji.

Bara de file în Google Chrome

3. motor de căutare Yandex afișează favicon în rezultatele de căutare, care îl diferențiază de alte motoare de căutare, care nu au astfel de practici. Este ușor de utilizat și benefic pentru site-urile care apar în rezultatele căutării: În primul rând, informațiile cu imaginea atrage mai mult decât fără ea, și în al doilea rând, după prima cunoștință cu site-ul într-un motor de căutare vizitatorul este impresionat „portretul“ lui - favicon.

Favikonok pentru indexarea site-urilor de la Yandex au chiar și un robot special:

Acum, că ați sperăm că ați dat seama de importanța acestui element mic în designul site-ului, trece la partea tehnică: cum să facă un favicon.

2. Selectarea de imagini-icoane pentru favicons

În primul rând, aveți nevoie pentru a determina ordinea, care va scoate în imagine în browserele vizitatorilor ca pictograma site-ului. Acesta este un punct foarte important. Abordarea pe care o face neglijent și în grabă favicon, în conformitate cu principiul „dacă numai că a fost“ absolut inacceptabil! Pe de o parte, favicons trebuie să arate în mod clar și fără echivoc esența site-ului. Pe de altă parte, ar trebui să fie concis. Site-urile de companii cu un brand recunoscut în stilul minimalist pur și simplu utilizat ca favicon logo-ul:

Dar, pe de altă parte, în cazul în care, să zicem, favicons site-ul dedicat Platypus, este o fiară, dar încă nici un semn de stilizare, dar încă cu fundal, puțini oameni fac ceea ce este. dimensiunea favikonok - doar 16x16 pixeli. iar cele 256 de puncte trebuie să se potrivească cât mai multe informații, dar ar trebui să arate elegant și frumos. Despre lipsa capacității artistice este mai bine de a încredința sarcina specialiștilor - artiști, designeri.

3. Formatul favicons

browsere moderne au „învățat“ să recunoască nu numai favicon în format ICO, dar, de asemenea, jpg, gif (static sau animat), png. Numai Internet Explorer este încă în mod fundamental nu vrea să sprijine jpg, precum și animat SIFCO. Dar, pe de altă parte, în versiunile recente ale browser-ului Mozilla Firefox inclusiv animat favikonok un gif.

Rețineți că formatul jpg nu acceptă transparența. Deci, dacă, de exemplu, au nevoie de o imagine fără fundal, este mai bine să nu utilizeze ca favicon jpg.

Nu uitați că propriul browser-ul nu va găsi favicons format diferit decât ICO, acestea vor trebui să indice locația un special favicons.

4. Plasarea favicons on-line

Crearea favicon, încărcați-l în directorul rădăcină al site-ului. Dacă ai făcut totul ca standard, sunt necesare măsuri suplimentare. Dar, dacă aveți nevoie pentru a pune un favicon nu este rădăcina, ci într-un alt director sau favicons dvs. de format diferit de ICO, va trebui să-i spuneți browser locația sa. Iată cum. În titlul paginii trebuie să adăugați meta următoarele etichete:

A doua linie este necesară pentru browser-ul Internet Explorer Majestății Sale, dar alte browsere vor înțelege prima linie. Apropo, rezultă din această concluzie că puteți face o pictogramă în format ICO pentru Internet Explorer, precum și pentru alte browsere - în oricare dintre celelalte formate acceptate și în prima linie pentru a indica-le că aveți un site web și acest lucru este:

Dacă utilizați o cale personalizat sau format de imagine, va trebui să facă modificări corespunzătoare codului acestor linii.

Dacă doriți să utilizați pentru anumite pagini de alte favicon, este de asemenea posibil să se facă. Creați imaginea dorită, completați-le pe site-ul, iar eticheta de la paginile selectate lista calea către favicon dorită.

Câteva cuvinte despre pictogramele mobile

Dispozitivele mobile sunt, de asemenea, utilizate site-uri de pictograme. Din aceleași motive, care au fost anunțate mai sus, aceste icoane, de asemenea, trage mai bine, în caz contrar, în loc de un site anumită persoană în iPhone sau iPad-uri va scoate în evidență o captură de ecran a site-ului, ceea ce nu este foarte frumos. Un alt minus lipsa unei pictograme pentru dispozitive mobile - se umple eroarea jurnal site-ul care arată astfel:

Fișierul nu există. /www/apple-touch-icon-precomposed.png
Fișierul nu există. /www/apple-touch-icon.png

Acest lucru se datorează faptului că dispozitivele mobile cu sistem de operare iOS, atunci când se apropie de site-ul primul lucru în căutarea pentru astfel de pictograme. Și fiecare vizitator așa că avem o nouă linie cu jurnalele cu o eroare pe o imagine inexistentă. Sarcina suplimentară pe server, chiar dacă un lucru mic, nu este util, de aceea este cel mai bine pentru a scăpa de ea.

După cum se poate vedea în exemplul, există două fișiere: Apple-touch-icon.png și Apple-touch-icon-precomposed.png. Primul presupune că imaginea va fi aplicată la efectele de pictograme standard la Apple - colțuri de rotunjire, umbre și scoate în evidență. Dacă nu doriți ca imaginea să se aplice astfel de efecte, de a crea o imagine numit mar-touch-icon-precomposed.png.

Icon apple-touch-icon ar trebui să fie în png, dar dimensiunea este mai complicată decât cu favicons. Faptul că produsele „Apple“ cu rezoluție diferite utilizează pictogramele de diferite dimensiuni:

• iPhone: 60 x 60 px;
• iPad: 76 x 76 px;
• IPhone Retina: 120 x 120 px;
• iPad Retina: 152 x 152 px.

Cel mai bine este de a face icoane pentru toate dimensiunile posibile. Adăugați la ei o altă dimensiune 196h196 - pentru dispozitivele cu sistem de operare Android.

Pentru a crea un set de pictograme „în vrac“, ușor de utilizat serviciile online pe care le va genera pictogramele dimensiunii necesare pe care le doriți.

Încărcați pictogramele care rezultă în directorul rădăcină al site-ului și modurile în lista