Cum de a crea un favicon pentru un site

Favicon este o pictogramă preferată sau, în limba engleză, o pictogramă pentru un favorit. Dar aceasta este o veche decodare, în prezent favicon este, de asemenea, o pictogramă a site-ului în sine, afișat în tab-ul browserului înainte de titlu. De asemenea, în multe motoare de căutare, lângă site, este afișat favicon. Și uneori, faviconul dvs. poate fi găsit în multe evaluări ale site-urilor și blogurilor. Cele mai rare cazuri în care puteți găsi pictograma site-ului, este în bara de marcaje a Windows sau pe desktop, pentru că astăzi este relevantă, există oameni care fac marcajele necesare pe desktop.

Astfel, până în prezent, faviconul poate fi găsit în multe locuri, și nu doar în preferatele. Și dacă este așa, atunci poate fi folosit pentru binele dvs., deoarece un bun favicon ajută la creșterea răspunsului de la oameni, făcând legătura către site-ul dvs. mai atractivă. Cine va renunța la câteva procente suplimentare de trafic? Nimeni nu mi se pare, toată lumea va fi doar fericită! Prin urmare, toată lumea ar trebui să aibă un favicon atractiv. Permiteți-mi să vă spun despre principalele avantaje ale unui bun Favicon de pe site-ul dvs.

De ce Favicon

După cum sa menționat deja mai sus, Favicon este pictograma site-ului dvs., iar destinația cea mai trivială este afișată în fila browser. Dar are încă multe destinații. Permiteți-mi să vă spun despre toate, astfel încât să fiți conștienți de importanța faviconului pe site.

Pentru ce este Favicon?

Pictograma din fila browser. Așa sa întâmplat că, cu mult timp în urmă, pictograma a început să fie folosită de creatorii de browsere și plasată înaintea titlului Titile în fila browser-ului, așa că sa stabilit acolo. Până în prezent, acesta este deja un standard.

Icon în favorite. Preferate, sunt aceleași semne de carte, acesta este locul în care puteți salva linkul către site cu orice etichetă, astfel încât să nu-l pierdeți. De fapt, un lucru foarte util, pentru cei care sunt activi pe Internet, pentru că uneori nu doriți să vă pierdeți site-urile preferate sau utile. Mai jos puteți vedea un exemplu din lista mea de marcaje.

O pictogramă în SERP. Motoarele de căutare o afișează în partea stângă a link-ului către site-ul însuși. Un factor foarte important este faptul că pe site-urile care au un favicon clic mai des decât pe site-urile care nu le au. Prin urmare, se recomandă instalarea acestuia. La niveluri scăzute de trafic nu veți observa acest lucru, iar atunci când aveți un trafic de 1000 sau mai multe, veți începe să simțiți impactul pictogramei pe site-ul dvs. Pentru a mări CTR (clicurile) în problemă, merită să ne gândim la instalarea sa. Un exemplu puteți vedea mai jos.

O pictogramă de pe desktopul computerului, dacă aveți un link către site-ul de acolo. Acest fenomen poate fi întâlnit mai rar, dar se întâmplă totuși. Există utilizatori care preferă să salveze site-urile lor preferate pe desktop sau în bara de instrumente Windows Quick Access. Și aici pot apărea probleme dacă Favicon nu se face corect. Faptul este că dimensiunea lui Favicon nu este de 16 × 16. Mai exact, 16 × 16 este una dintre dimensiunile icoanelor de pe site și ar trebui să existe cel puțin 3 dintre acestea în diferite rezoluții. Dar căutarea informațiilor în rețea, puțini oameni știu despre asta. Iar acum vă voi arăta principalele diferențe atunci când aveți o pictogramă și câteva în diferite rezoluții.

În general, după cum vedeți prezența Favicon pe site este un avantaj bun în ceea ce privește faptul că site-ul dvs. primește vizitatori suplimentari, atrăgând atenția în emiterea și diverse ratinguri. În plus, site-ul dvs. este amintit în ochii utilizatorului, având o pictogramă în bara de marcaje, pe prima pagină sau pe desktop. Din aceste motive, merită să faceți Favicon în mod corect, astfel încât să fie afișat corect în toate planșele. După ce am văzut toate plusurile din icoana de pe site, acum vom continua direct la crearea sa.

Cum să atragă Favicon

Pentru a începe, deschideți Photoshop și începeți să creați fișierul document - creați sau puteți face o combinație scurtă de taste CTRL + N.

În fereastra deschisă, trebuie să specificați dimensiunile imaginii create - 48 x 38 px. De asemenea, trebuie să specificați o rezoluție, specificați-o la 300 de pixeli pe inch. Acest lucru este necesar pentru a obține cea mai frumoasă imagine.

Apoi, faceți clic pe butonul OK și veți vedea cum veți avea o zonă de lucru care va fi de 48 x 48 și va fi foarte mică. Trebuie să faceți totul pe ecran, pentru a desena ușor. Puteți glisa cursorul de zoom sau pur și simplu apăsați CTRL și "+".

Apoi am ales unealta „oval“, a desenat un cerc cu ea, pentru că vreau să am favicon a mea a fost rotund, și a ales culoarea este roșu închis, deoarece este culorile principale ale blog-ul meu. Rezultatul este un cerc ca acesta. Desenul dvs. poate fi diferit. În cerc am scris litera "S". La aplicarea etichetei, ar trebui să alegeți „ascuțit“, scris, deoarece la această rezoluție, orice netezire strica litere, deoarece cu o scădere la dimensiunea de 16 × 16, scrisoarea va fuziona cu ea însăși. Dar cu scrierea "ascuțită", totul va fi bine.

Am primit o pictogramă de 48 × 48 și trebuie să o salvăm. Pentru aceasta, selectați "fișier" - "salvați ca". Dar există oa doua opțiune, dacă sunteți un fan furios de economisire a spațiului sau viteza de descărcare a site-ului este importantă pentru dvs., apoi mergeți la fila de mai jos "salvați pentru web". Personal, o țin simplu.

Faceți clic pe "salvați" și obțineți o fereastră în care trebuie să alegeți un loc pentru salvarea faviconului. În ceea ce privește formatul, alegeți oricare. Deși foarte des puteți găsi informații despre formatul ico, este o informație depășită, trebuie salvată în format PNG și nu va fi o greșeală.

Apoi, trebuie să creați mai multe copii ale pictogramei, deci trebuie să le reduceți la două dimensiuni, până la 32 × 32 și 16 × 16. Să facem prima o copie de 32 × 32, vom merge fără probleme pentru a reduce. Pentru a face acest lucru, trebuie să mergeți la secțiunea "imagine" - "dimensiunea imaginii".

După ce faceți clic pe "dimensiunea imaginii", veți deschide o filă în care va trebui să ajustați opțiunile de reducere a faviconului. În cazul nostru, ar trebui să fie redusă la o dimensiune de 32 × 32 față de dimensiunea 48 × 48.

Apoi, trebuie să repetați procedura salva icoane web, dar pentru a da un alt nume, de exemplu, favicon32, dar pentru cei mai favicon48, personal, le-am numit așa, de dragul de simplitate.

Acum rămâne să faceți ultima copie a imaginii, aceasta este cea care va fi afișată pe filele browser-ului, adică fobicon 16 × 16. Pentru a face acest lucru, reveniți la secțiunea "dimensiunea imaginii" și reduceți-l la 16 × 16.

Din nou, salvați pictograma rezultată sub un nume diferit, acest lucru poate fi numit favicon16 și nu uitați să selectați formatul pentru salvarea PNG.

Cum de a schimba faviconul

Dar puteți să-l descărcați și prin panoul de administrare, dacă o astfel de caracteristică este prezentă în CMS. După toate manipulările efectuate, trebuie să înregistrați pictograma chiar pe site. Pentru a face acest lucru, trebuie să deschideți partea de sus a codului pentru șablonul dvs. În mod tipic, partea de sus se numește antet. În această parte a codului, trebuie să găsiți următorul conținut.

Dar nu faptul că codul va primi icoana site-ului, poate că nu este. Dar trebuie să-l setați între cele două capuri. Dar notați că înregistrarea standard nu ne convine, nu este o soluție depășită. Trebuie să ștergem această linie.

După aceasta, în locul acestei etichete, trebuie să înregistrăm 3 dintre icoanele noastre imediat. Faptul este că, odată cu introducerea HTML5, nu este necesar ca formatul să fie ico. Acum puteți utiliza png. Și o vom adăuga în acest format. În locul codului vechi, introduceți noul cod favicon corect.

Arătând acest site pictogramă, în trei formate, vom face clar că avem de diferite dimensiuni și ar trebui să ia cel pe care îl doriți, dacă este nevoie de mai mult, va dura 48 × 48. La fel cu cealaltă, browser-ul tab-ul va avea 16 × 16 și așa mai departe. Dar linia de jos este faptul că pictograma este acum o mare, dacă este necesar, se va arata frumos și netezite, care este un plus frumos.

Distribuiți acest link:

Buna ziua Ivan, multumesc pentru instructiunile tale, ma ajutat foarte mult. La început am luat-o, a atras un favicon în Photoshop, și apoi nu a putut da seama cum să-l pună pe site-ul, peste tot scrie, că trebuie să fie strict ICO și sunteți aruncat de pe un cod minunat care permite să se încarce orice format, acum nu trebuie să sufere pe programul de căutare face ico . Multumesc din nou, mi-a schimbat faviconul si acum nu ma pot obtine suficient.

Am un phavicon instalat împreună cu pluginul. Va fi necesar să faceți așa cum ați descris și să eliminați pluginul suplimentar.

Articole similare

Pagina anterioară