U web dizajnu, kao što vjerojatno znate, svaki detalj je bitan. Osoba koja je prešla na vaš resurs ne vidi svaki od elemenata zasebno, već cijelu sliku doživljava kao paket koji se sastoji od drugih sitnih detalja. Dakle, ako nešto propustite u procesu razvoja vašeg resursa, ovaj detalj može kasnije pokvariti cijeli kompleks, cijelu kompoziciju.
Takva sitnica može biti, na primjer, pozadina dugmeta, pogrešno odabran font nekog malog elementa, pa čak i favicon. Zaista, uvjerite se sami - velike, dobro poznate stranice imaju pojedinačnu ikonu koja je označava u odjeljku "Oznake" korisničkog pretraživača. Bez toga, programeri resursa ne bi mogli stvoriti kompoziciju kojoj su prvobitno težili.
Stoga, prilikom kreiranja dizajna za vaš sajt, treba da vodite računa o takvom detalju kao što je favicon. U ovom članku ćemo govoriti o tome kako ga uskladiti s općim stilom izvora, kao io tome koje veličine bi ova slika trebala imati.
ikona sajta
Prvo, hajde da definišemo šta je ovaj element. Upravo sada, pogledajte naslov kartice vašeg pretraživača. Kao što možete vidjeti, s lijeve strane nalazi se mala slika koja ukazuje na pojednostavljenu verziju logotipa resursa. Ista slika je i pored naziva stranice prikazanog u rezultatima pretrage. Ovo je ono čime se korisnik vodi kada vidi naslov.
Mnogi webmasteri razumiju da je takva slika potrebna - ali malo ljudi zna koja će veličina ikona za web stranicu biti najprikladnija. Stoga, u ovom članku nećemo samo dati informacije o tome kako napraviti takvu ikonu i kako je možete instalirati na svoj resurs, već ćemo govoriti i o veličinama slika.
Svrha favikona
Dakle, slika u blizini zaglavlja stranice se koristi za identifikaciju. Ovo je njegova prvobitna svrha: da izrazi stranicu čije ime vidimo i da se istakne u očima ostalih. To se postiže što jednostavnije korištenjem grafike: intuitivno percipiramo informacije na slikama mnogo brže i lakše nego u tekstualnom formatu. Favikoni nam pomažu u tome. Ali ne zaboravite da je veličina favikona minimalna u očima korisnika. Ovo nije logotip u “headeru” stranice, koji može sadržavati dodatne informacije u obliku natpisa, nekih pojašnjenja ili kontakt informacija. Sve što se može prikazati u ikoni pored imena treba da odgovara veličini favikona što je više moguće. A on je, kao što je već naznačeno, jednostavno minijaturan (samo 16 x 16 piksela).
Kako odabratifavicon?
Pa kako webmaster može dizajnirati ikonu za svoju web stranicu? Treba napomenuti da jednostavno komprimiranje logotipa stranice najčešće neće raditi. Na amblemima koji se stavljaju u obliku logotipa određenog resursa često su vidljivi različiti elementi, koji neće uvijek biti ispravno prikazani u minijaturnom obliku. Bolje je odmah odustati od takvog poduhvata.
Naravno, veličina favikona ne dozvoljava da se govori o jednostavnom ubacivanju natpisa tamo. Svaki tekst će jednostavno biti nevidljiv u ovoj rezoluciji. Moramo razviti novu ikonu koja bi prenijela stil stranice. Da pronađemo rješenja, opet, okrenimo se najvećim stranicama.
Mnogi ljudi koriste stilizovano prvo slovo naziva usluge kao favicon. Ovo je način, na primjer, Bing, Yahoo, Yandex, Wikipedia, Google. Postoji još jedan pristup - ako imate kratko ime stranice, možete ga postaviti kao pozadinu svoje ikone. Da bi veličina favikona (u pikselima dostiže, ponavljam, 16 x 16 piksela) ispravno prikazala ovaj natpis, ne bi trebalo da bude duži od 3 slova. To, na primjer, radi servis Aol.
Kako kreirati favicon?
Postoji nekoliko načina da napravite ikonu za naziv stranice. Naravno, najlakše je raditi s različitim gotovim rješenjima. Možemo razgovarati o nekim uslugama ili programima koji vam omogućavaju da napravite ikonu od punopravne slike tako što ćete je smanjiti. Međutim, preporučio bih da sami izradite takav logo. Ovo će prvo datimogućnost da se nešto nauči; i drugo, obezbediće više alata. Sve što treba da znate za ovo je šta da nacrtate, kao i da znate koja veličina favikona treba da bude u konačnoj verziji. O veličini ikona za web lokaciju ćemo govoriti malo kasnije, ali za sada ćemo primijetiti neke suptilnosti rada s takvim slikama. Konkretno, bez pominjanja veličine ikona za stranicu, format takve slike treba pojasniti. Kao što iskusni dizajneri napominju, slika mora biti sačuvana kao-p.webp
Sliku možete sačuvati, na primjer, koristeći Photoshop, gdje će biti nacrtan amblem.
Favicon dimenzije
Dakle, hajde da razgovaramo o tome kolika bi trebala biti slika koju vidimo pored naziva sajta u rezultatima pretrage. Po defaultu, kao što je već spomenuto, njegova veličina je samo 16 piksela (sa svake strane). Međutim, ako pokušate urediti ovu sliku u Photoshopu, uvjerit ćete se koliko je to nezgodno. Stoga preporučujemo rad sa uvećanom slikom, koja se u budućnosti može jednostavno komprimirati po rubovima i sačuvati u traženom formatu.
Multiplatforma
Međutim, kada govorimo o tome koliko bi favicon trebao biti na vašoj web lokaciji, postoji još jedna stvar koju treba imati na umu. Ne prikazuju sve platforme sliku resursa na isti način. Na primjer, uređaji sa Retina ekranom "vide" vaš favicon u 32 x 32 piksela. I u Safariju i na novoj Windows platformi, i uopće, ove ikone dosežu veličinu od 64piksela.
Stoga, preporučujemo da sačuvate različite verzije ikone i jednostavno omogućite njenu izmjenu u zavisnosti od platforme korisnika u budućnosti. Još jedna zanimljiva stvar - možete pokušati učitati ikonu u najvećem formatu, računajući na činjenicu da će se "smanjiti" u zavisnosti od pretraživača.
Spoljni urednici
Naravno da je dobro ako ste dobri sa Photoshopom i znate koja veličina favikona treba da bude i kako to postići dok čuvate svoju sliku. Međutim, ima puno početnika koji jednostavno ranije nisu tako izbliza naišli na grafičke editore, pa ne mogu tako lako nacrtati željenu sliku. Da biste pomogli takvim webmasterima, postoje razne usluge koje vam omogućavaju da automatski kreirate ikonu koja vas zanima. Mnogi od njih su čak i besplatni, što ne zahtijeva nikakvo ulaganje od korisnika.
Ponekad je potrebno samo da se registrujete da biste radili, ali, kao što razumete, to se radi jednom - uostalom, kompanije ne menjaju tako često svoje ikone. Pogledajte Google, koji svaki dan mijenja logo, ali ne dodiruje ikonu.
Kako instalirati favicon?
Uopšteno govoreći, postavljanje vaše stranice na način da pravilno prikazuje sliku koja vam je potrebna je vrlo jednostavno. Dovoljno je izvršiti niz jednostavnih koraka koji će omogućiti pretraživačima, kao i jednostavnim pretraživačima, da pročitaju informacije.
Da biste to učinili, rezultujuća slika mora biti sačuvana sapod nazivom favicon.ico i postavljen u korijenu vašeg resursa. To je to, sada će vaša slika biti automatski prepoznata, a nakon nekog vremena će biti povezana sa vašom web lokacijom.
Pored ovog povezivanja, možete dodati još jednu liniju koja će “sugerirati” gdje se nalazi vaša ikona. To izgleda ovako:
Instalirajte kod u zaglavlje stranice.
Zaključci
Dakle, nakon što ste pročitali naš članak, shvatili ste koja veličina favikona treba da bude za sajt i šta je to. Takođe, mislim da ste shvatili da je pronalaženje prave ikone za vaš resurs neophodno, jer vam to igra na ruku kako u smislu povećanja prepoznatljivosti, tako i u smislu dodatnog izdvajanja među vašim konkurentima. Barem najveće stranice rade isto, što se može uzeti kao najbolji primjer. Osim toga, ne izaziva mnogo truda - nakon što ste jednom napravili favicon i ispravno ga instalirali na svoju stranicu, možete ga zaboraviti narednih nekoliko mjeseci.
Zato, slobodno eksperimentirajte, smislite nešto novo, pokušajte - i sve će uspjeti!
