U web dizajnu, kao što vjerojatno znate, svaki je detalj bitan. Osoba koja je prešla na vaš resurs ne vidi svaki od elemenata zasebno, već cijelu sliku percipira 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 gumba, pogrešno odabran font nekog malog elementa, pa čak i favicon. Doista, uvjerite se sami - velike, dobro poznate stranice imaju pojedinačnu ikonu koja to označava u odjeljku "Oznake" korisničkog preglednika. Bez toga, programeri resursa ne bi mogli stvoriti kompoziciju kojoj su prvobitno težili.
Stoga, prilikom izrade dizajna za svoju stranicu, trebate voditi računa o takvom detalju kao što je favicon. U ovom ćemo članku govoriti o tome kako ga uskladiti s općim stilom resursa, kao io tome koje veličine ova slika treba imati.
ikona web-mjesta
Prvo, definirajmo što je ovaj element. Upravo sada pogledajte naslov kartice vašeg preglednika. Kao što možete vidjeti, s lijeve strane nalazi se mala slika koja označava pojednostavljenu verziju logotipa resursa. Ista slika je također blizu naziva stranice prikazane u rezultatima pretraživanja. 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 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 favicon
Dakle, slika u blizini zaglavlja stranice se koristi za identifikaciju. To je njegova izvorna svrha: izraziti mjesto čije ime vidimo i istaknuti ga 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 nemojte zaboraviti da je veličina favicona minimalna u očima korisnika. Ovo nije logotip u “zaglavlju” stranice, koji može sadržavati dodatne informacije u obliku natpisa, nekih pojašnjenja ili podataka za kontakt. Sve što se može prikazati u ikoni pored imena treba što više odgovarati veličini favikona. A on je, kao što je već navedeno, 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 pothvata.
Naravno, veličina favikona ne dopušta govoriti o jednostavnom umetanju natpisa tamo. Svaki će tekst jednostavno biti nevidljiv u ovoj rezoluciji. Moramo razviti novu ikonu koja bi prenijela stil stranice. Da bismo pronašli rješenja, opet se okrenimo najvećim stranicama.
Mnogi ljudi koriste stilizirano prvo slovo naziva usluge kao favicon. To je način, na primjer, Bing, Yahoo, Yandex, Wikipedia, Google. Postoji još jedan pristup - ako imate kratak naziv stranice, možete ga postaviti kao pozadinu svoje ikone. Da bi veličina ikona (u pikselima dostiže, ponavljam, 16 x 16 piksela) ispravno prikazala ovaj natpis, ne bi trebao biti duži od 3 slova. To radi, na primjer, usluga Aol.
Kako stvoriti 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ćuju da napravite ikonu od punopravne slike tako da je smanjite. Međutim, preporučio bih da sami izradite takav logotip. Ovo će prvo datimogućnost da se nešto nauči; i drugo, pružit će više alata. Sve što trebate znati za ovo je što nacrtati, a također i znati koje veličine bi favicon trebao biti u konačnoj verziji. O veličini ikona za web mjesto ćemo govoriti malo kasnije, ali za sada ćemo primijetiti neke suptilnosti rada s takvim slikama. Konkretno, bez spominjanja veličine ikona za stranicu, treba pojasniti format takve slike. Kao što iskusni dizajneri primjećuju, slika mora biti spremljena kao-p.webp
Sliku možete spremiti, na primjer, koristeći Photoshop, gdje će biti nacrtan amblem.
Favicon dimenzije
Dakle, razgovarajmo o tome kolika bi trebala biti slika koju vidimo pored naziva stranice u rezultatima pretraživanja. Prema zadanim postavkama, kao što je već spomenuto, njegova veličina je samo 16 piksela (sa svake strane). Međutim, pokušate li urediti ovu sliku u Photoshopu, uvjerit ćete se koliko je to nezgodno. Stoga preporučamo rad s uvećanom slikom, koja se u budućnosti može jednostavno komprimirati uz rubove i spremiti u traženi format.
Multiplatforma
Međutim, kada govorimo o tome koliko bi favicon trebao biti na vašoj web-lokaciji, treba imati na umu još jednu stvar. Ne prikazuju sve platforme sliku resursa na isti način. Na primjer, uređaji s Retina zaslonom "vide" vašu 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čamo da spremite različite verzije ikone i jednostavno omogućite njezinu promjenu ovisno o platformi korisnika u budućnosti. Još jedna zanimljiva točka - možete pokušati učitati ikonu u najvećem formatu, računajući na činjenicu da će se "smanjiti" ovisno o pregledniku.
Vanjski urednici
Naravno da je dobro ako ste dobri s Photoshopom i znate koja bi veličina ikona trebala biti i kako to postići dok spremate svoju sliku. No, puno je početnika koji jednostavno do sada nisu tako izbliza naišli na grafičke editore pa ne mogu tako lako nacrtati željenu sliku. Za pomoć takvim webmasterima postoje razne usluge koje vam omogućuju da automatski kreirate ikonu koja vas zanima. Mnogi od njih su čak i besplatni, što ne zahtijeva nikakvo ulaganje od korisnika.
Ponekad se trebate samo registrirati da biste radili, ali, kao što razumijete, to se radi jednom - uostalom, tvrtke ne mijenjaju svoje ikone tako često. Pogledajte Google, koji svaki dan mijenja logo, ali ne dodiruje ikonu.
Kako instalirati favicon?
Općenito, postavljanje vaše stranice na način da ispravno prikazuje sliku koja vam je potrebna vrlo je jednostavno. Dovoljno je izvršiti niz jednostavnih koraka koji će omogućiti tražilicama, kao i jednostavnim preglednicima, da pročitaju informacije.
Da biste to učinili, rezultirajuća slika mora biti spremljenapod nazivom favicon.ico i smješten u korijenu vašeg resursa. To je to, sada će vaša slika biti automatski prepoznata i nakon nekog vremena bit će povezana s vašom web lokacijom.
Pored ovog povezivanja, možete dodati još jedan redak koji ć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 favicona treba biti za stranicu i što je to. Također, mislim da ste shvatili da je pronalaženje prave ikone za vaš resurs nužnost, jer vam to igra na ruku i u smislu povećanja prepoznatljivosti 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 uzrokuje mnogo truda - nakon što ste jednom napravili favicon i ispravno ga instalirali na svoju stranicu, možete ga zaboraviti sljedećih nekoliko mjeseci.
Stoga, slobodno eksperimentirajte, smislite nešto novo, pokušajte - i sve će uspjeti!
