Web hosting by Totohost

Napraviti i postaviti favicon

Favicon je mala sličica (ili animacija) koja se pojavljuje pored vaše internet adrese i bookmarksa baš poput ove na slici:

favicon

Većina web stranica ih ima tako da sad već favicon predstavlja i nekakav zaštitni znak weba, nešto poput loga. Evo kratki tutorijal kako napraviti favicon i postaviti ga na web stranicu:

U Photoshopu otvorite New File 16 x 16px.

dizajn-favicon

Dizajnirajte svoj favicon, no obratite pažnju da imate tek malenu površinu za rad, dakle napišite neko slovo, zaštitni znak, logo, sličicu ili što god već, što će predstavljati vašu stranicu:

favicon-save

Sad odaberete File > Save for web, a ako imate PS CS3 onda save for web and devices:

save-for-web

Iako su faviconi .ico file, u photoshopu ih ne možete tako spremiti, zato ih spremamo kao .gif i koristimo neki drugi software da ih konvertiramo u .ico file.

save-as-gif

Kad ste spremili favicon kao .gif, idete na Favicon from Pics, napravite upload svoje .gif slike na njihovu stranicu, ovako:

favicon-from-pics

Na browse pronađete svoju sliku na svom kompjuteru, idete na generate favicon.ico i

unzip-file

nakon toga pritisnete download favicon i dobijete folder koji treba unzipovat. U tome folderu imate favicon.ico file

ico-file-unzip

koji treba postaviti između HEAD tagova na svaku stranicu na kojoj želite da vam se favicon pojavljuje. Što bi izgledalo ovako:

<link rel=”Shortcut Icon” href=”/favicon.ico”/>

Ako vam se favicon ne pojavljuje, vjerojatno će te trebati postaviti cijeli link do slike, npr. ovako:

<link rel=”shortcut icon” href=”https://www.ri-web.org/images/favicon/favicon.ico” / >

Želite li imati animirani favicon, napravite animaciju i samo još uz ovaj link dodajte i link s animacijom, to bi izgledalo ovako:

<link rel=”shortcut icon” href=”images/favicon/favicon.ico” >
<link rel=”icon” href=”images/favicon/animated_favicon1.gif” type=”image/gif” >