Un favicon este acea mică imagine minunată de lângă bara de adrese din browser. Este ceea ce diferențiază site-ul dvs. în fila Marcaje și poate fi utilizat pentru a crește gradul de cunoaștere a mărcii. Dacă aveți un site, dar nu v-ați gândit niciodată să creați un favicon, ar trebui să vă regândiți decizia. Din ce în ce mai mult, dezvoltatorii de software utilizează favicoane pentru diferite aspecte ale aplicațiilor lor, cum ar fi pictogramele ecranului de start de pe tablete. Din fericire, proiectarea, crearea și implementarea unui favicon este ceva ce poate face aproape oricine dacă urmează pașii corecți.
Pași
Metoda 1 din 3: Proiectarea Faviconului
Pasul 1. Creați un favicon care să reprezinte site-ul dvs. web
Tipul de site web pe care îl aveți ar trebui să determine aspectul favicon-ului dvs. Încercați să proiectați ceva care să adere la imaginea dvs. de marcă și care să fie recunoscut și memorabil pentru oameni. Ficonul dvs. va fi primul lucru pe care îl văd oamenii când privesc filele din browserul lor și vor apărea și în marcajele oamenilor.
- De exemplu, dacă aveți un site web pentru alimente, alegerea unui favicon care are un fruct sau o legumă, deoarece designul, îl poate face mai memorabil.
- Dacă site-ul dvs. web este pentru o firmă de avocatură sau o companie de investiții, este preferabil un favicon tradițional și elegant.
- Dacă site-ul dvs. web este destinat persoanelor mai tinere, încercați să creați un favicon jucăuș și colorat.
Pasul 2. Decideți dacă doriți un fundal transparent
Dacă nu desemnați un fundal, atunci acesta se va umple în alb, care poate să nu adere la marca dvs. Un fundal transparent va căpăta culoarea browserului persoanei și va arăta mai rațional în unele cazuri. În alte cazuri, având o culoare pentru fundal va face ca literele sau graficele din prim plan să apară. Decideți ce ar fi cel mai bun pentru designul dvs. și păstrați-l în minte pe măsură ce îl realizați.
Cel mai de bază favicon este un pătrat de 16x16 și are o culoare de fundal
Pasul 3. Creați un favicon ușor de citit
Deoarece imaginea favicon pe care o veți folosi este mică, este important să vă puteți transmite marca fără a vă deruta vizitatorii. Un favicon greu de citit lasă o impresie negativă și poate crea întrebări în mintea vizitatorului cu privire la calitatea muncii pe care o puteți oferi. Imaginile și logo-urile prea complexe nu arată bine atunci când sunt reduse la 16x16 sau 32x32 pixeli.
- Dacă sigla dvs. existentă este prea complicată, atunci puteți utiliza tactici pentru a o simplifica, astfel încât să poată fi recunoscută la dimensiunea faviconului. Utilizați inițiale în loc să afișați întregul nume al companiei sau proiectați o pictogramă simplă, mai degrabă decât să utilizați o imagine.
- Dacă aveți deja un logo simplu, puteți micșora imaginea și o puteți seta ca favicon. Este posibil să fie necesar să îl modificați înainte de al converti într-un fișier pictogramă.
- De asemenea, puteți utiliza o imagine a unui obiect care descrie tema generală a site-ului dvs.
Pasul 4. Creați un favicon estetic
Structura faviconului dvs. se numește forma sa. Faviconii iau de obicei forme, cum ar fi un cerc sau un pătrat. Când vă proiectați faviconul, este în general mai bine dacă este capabil să se încadreze într-una dintre aceste forme de bază, deoarece formele libere se pot confunda sau confunda la 16x16 pixeli. Un alt aspect important al designului dvs. se numește unitate estetică. Unitatea estetică include detaliile și dimensiunile diferitelor componente din favicon și modul în care este echilibrat faviconul. Cu cât sunt mai uniforme detaliile, cu atât va fi mai coeziv faviconul tău. De exemplu, utilizarea diferitelor tipuri de fonturi sau dimensiuni în favicon nu este plăcută pentru ochi și poate face ca acesta să arate confuz sau dezordonat.
- Un alt exemplu de unitate estetică este menținerea colțurilor rotunjite de-a lungul formelor din faviconul dvs.
- Un exemplu bun de pictogramă care și-a schimbat forma este faviconul Google. S-a schimbat de la un pătrat la un cerc.
Pasul 5. Folosiți culori care sunt coerente cu marca dvs
Când creați faviconul, ar trebui să îl creați în adâncimea culorii de 8 biți (256 culori) sau 24 biți (16,7 milioane de culori), deoarece acest lucru va funcționa pe browserele moderne. Asigurați-vă că culorile pe care le alegeți pot fi găsite în altă parte pe site-ul dvs. web sau sunt asociate într-un fel cu marca dvs. Un favicon cu culori care nu sunt pe site-ul dvs., sigla sau aplicațiile dvs. nu va fi memorabil, iar oamenii nu vor putea asocia pictograma cu marca dvs.
- Unele utilizări creative ale culorii favicon includ GitHub, care schimbă culorile în funcție de starea sistemului dvs. și Trello, care se schimbă în funcție de culoarea de fundal.
- Cele mai frecvente culori utilizate în favicoane sunt roșu și albastru.
Pasul 6. Luați în considerare publicul dvs. atunci când proiectați un favicon
În afară de identificarea mărcii dvs., faviconul dvs. trebuie să pară atrăgător pentru vizitatorii dvs. Oamenii cu gusturi, interese și norme sociale diferite vor privi diferite iconologii din perspective diferite. Diferențele culturale există în societatea noastră și ar putea confunda sau respinge publicul pe care încercați să îl atrageți.
De exemplu, Mac Os X folosește o ștampilă care este un simbol universal pentru poștă. Utilizarea unei căsuțe poștale nu ar fi la fel de eficientă, deoarece cutiile poștale variază în diferite părți ale lumii
Pasul 7. Obțineți părerea prietenilor și colegilor
Deși nu este extrem de intens din punct de vedere grafic, un favicon este o parte importantă a mărcii dvs. De exemplu, gândiți-vă la site-urile web preferate precum Twitter, Gmail, Facebook sau wikiHow și la cât de mult asociați faviconul cu marca. Dacă nu aveți un ochi bun pentru design sau sunteți înțeles de ce tip de design ar trebui să aveți pentru site-ul dvs., consultați prietenii care au un ochi pentru design sau care lucrează în design grafic.
- Întrebați în rețeaua dvs. de prieteni pentru a vedea dacă cineva poate oferi gratuit sfaturi de proiectare.
- Companiile mai mari au designeri grafici interni care pot crea imaginea favicon.
Metoda 2 din 3: Crearea Faviconului
Pasul 1. Utilizați software-ul de editare a fotografiilor pentru a crea faviconul
Puteți utiliza software-ul de editare a fotografiilor, cum ar fi Adobe Photoshop sau Illustrator, pentru a crea imaginea pentru faviconul dvs. Aceste aplicații software vă permit, de asemenea, să redimensionați și să exportați imaginea în formatul potrivit. Unele programe software vă permit să creați faviconul dvs. manual.
- Există, de asemenea, programe de editare specifice favicon, pe care le puteți găsi online.
- Utilizați un motor de căutare și introduceți „editori favicon”.
- Faceți dimensiunea pânzei 512x512 pixeli, deoarece acest număr se descompune la cele mai aplicabile dimensiuni favicon și este încă suficient de mare pentru a putea edita eficient.
- Un alt software popular de editare a fotografiilor include GIMP, PhotoScape și Paint. NET.
- Când utilizați acest software, nu veți putea edita direct fișierele.ico, dar puteți utiliza fișiere.png,-j.webp" />
Pasul 2. Redimensionați și salvați faviconul
32x32 px este dimensiunea articolelor desktop Windows, în timp ce 16x16 px este dimensiunea favicoanelor din fila browserului dvs. După ce creați faviconul într-un format mai mare, este important să reduceți dimensiunea acestuia, astfel încât să puteți vedea cum va arăta în browserele oamenilor. Dacă este ilizibil sau nu este plăcut din punct de vedere estetic, începeți din nou cu designul original. Gândiți-vă la platformele pe care site-ul sau aplicația dvs. va fi utilizat cel mai probabil și apoi creați un favicon pentru a acoperi toate bazele dvs.
- Este important să rețineți că hardware-ul și software-ul diferit utilizează diferite dimensiuni favicon.
- Unele alte dimensiuni favicon includ 57x57px pentru ecranul de pornire standard iOS, 72x72px pentru iPad, 96x96px pentru Google TV, 128x128px pentru Chrome Web Store și 195x195px pentru Opera Speed Dial.
- Dacă doriți să vă acoperiți toate bazele, puteți crea versiuni ale favicon-ului dvs. în fiecare dintre aceste dimensiuni.
- Salvați versiuni separate ale favicon-ului dvs., pentru a nu pierde munca pe care ați făcut-o.
Pasul 3. Combinați fișierele folosind un convertor
Lucrul grozav despre fișierele.ico este că puteți combina mai multe fișiere pentru a-l crea. Acest lucru este util, deoarece diferite browsere și software vor dori un favicon de dimensiuni diferite. Pentru a vă asigura că faviconul dvs. arată bine pe toate platformele diferite, convertiți fișierele utilizând un convertor online. Tastați „convertor de pictograme” în motorul dvs. de căutare preferat pentru a găsi aplicații online gratuite pentru a face acest lucru. Salvați fișierul îmbinat ca „favicon.ico”.
- De asemenea, puteți utiliza un program precum GIMP care are o funcție încorporată sau puteți descărca un plugin numit ICO FORMAT pe Adobe Photoshop.
- Creați un folder nou, astfel încât să puteți stoca noi pictograme sau lucrări în curs.
- Tastați „.ico converter” sau „favicon generator” într-un motor de căutare pentru a găsi diferite instrumente pe care le puteți utiliza.
Metoda 3 din 3: Implementarea Favicon
Pasul 1. Încărcați faviconul dacă utilizați un editor de site-uri web
Mulți editori de site-uri web vin cu un formular încorporat care vă permite să încărcați faviconul dvs. pe site-ul dvs. automat. Dacă utilizați un editor de site-uri web care are acesta încorporat, căutați opțiuni care spun „Încărcați Favicon” sau „Adăugați Favicon” în meniul de setări al site-ului web. Selectați fișierul favicon.ico și încărcați-l pe site-ul dvs.
Dacă nu găsiți un loc unde să încărcați faviconul pe editorul site-ului dvs. web, va trebui să îl faceți manual
Pasul 2. Încărcați fișierul în directorul rădăcină al site-ului dvs
Dacă site-ul dvs. web acceptă Protocolul de transfer de fișiere sau FTP, atunci vă puteți folosi clientul FTP pentru a încărca noul fișier favicon.icon în directorul rădăcină (index). Dacă nu, atunci va trebui să accesați pagina gazdelor dvs. web și să încărcați manual imaginea. Nu uitați să înlocuiți fișierul favicon.ico existent cu noul fișier.
Pasul 3. Adăugați fișierul în antetul dvs
Găsiți locul unde puteți accesa fișierele PHP și CSS pentru site-ul dvs. Accesați fișierul header.php al site-ului dvs. și editați-l. Sub tipul etichetei, „
-
. Aceasta ar trebui să conecteze site-ul dvs. la faviconul dvs.
Deoarece utilizați PHP, înseamnă că orice site-uri care utilizează fișierul dvs. antet vor avea acum același favicon
Creați-vă propria pictogramă Favicon Pasul 14 Pasul 4. Reîmprospătează browserul
După ce ați terminat încărcarea faviconului, vă puteți reîmprospăta browserul pentru a vedea noua dvs. imagine lângă bara de adrese. Pentru a accesa direct o imagine a faviconului dvs. actualizat, tastați „https://www.yourdomain.com/favicon.ico”.
- Dacă faviconul dvs. nu apare inițial, poate fi necesar să resetați memoria cache a browserului.
- Pentru a vă goli memoria cache, accesați setările browserului și ștergeți fișierele temporare de internet, cookie-urile și istoricul.
