Favicon je mala sličica (ili animacija) koja se pojavljuje pored vaše internet adrese i bookmarksa baš poput ove na slici:
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.
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:
Sad odaberete File > Save for web, a ako imate PS CS3 onda save for web and devices:
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.
Kad ste spremili favicon kao .gif, idete na Favicon from Pics, napravite upload svoje .gif slike na njihovu stranicu, ovako:
Na browse pronađete svoju sliku na svom kompjuteru, idete na generate favicon.ico i
nakon toga pritisnete download favicon i dobijete folder koji treba unzipovat. U tome folderu imate favicon.ico file
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” >