Näin tehdään Favicon

Favicon on neliön muotoinen kuvake/ikoni, joka näkyy selaimesi välilehdellä nettisivun nimen vieressä. Tiedoston nimi ja tiedostomuoto on favicon.ico (ei tavallinen jpg, png tai gif). Faviconeita käytetään usein myös png tai gif muodossa, mutta kaikki IE selaimet eivät tue näitä muotoja ja siksi niitä ei kannata käyttää.

Faviconin tekemiseen on kaksi erilaista vaihtoehtoa, joko ilmainen favicon editori tai kuvankäsittelyohjelma, kuten Photoshop+ilmainen plugin. Valmiista logosta on helpointa tehdä favicon jollain kuvankäsittelyohjelmalla ja tässä ohjeet sen käyttöön:

Aloita Photoshopilla

Faviconin tekeminen aloitetaan luomalla kuvankäsittelyohjelmalla oikean kokoinen pohja. Faviconin koko on yleensä 16×16, 32×32 tai 64×64, eli 16 jaollinen luku. Tarkista tämä koko käyttämäsi sisällönhallintaohjelman ohjeista. Esim. Drupalissa faviconin kooksi neuvotaan 64 x 64 tai 128 x 128. Muutoinkin kannattaa käyttää isompaa aluetta suunnittelulle, kuin 16x16 - saa nimittäin olla aika ässä, jos meinaa suunnitella niin pienelle alueelle. Pohja voi olla läpinäkyvä, sillä .ico-muoto tukee läpinäkyvää taustaa. Tee faviconista selkeä ja käytä hyvin toisistaan erottuvia värejä. Pitkästä logosta kannattaa valita esim. vain etukirjain tai pelkkä tunnusosa. Testaa suunnitelmaasi välillä muuttamalla se oikeaan kokoon 16x16, sillä sen kokoisena kuvake näkyy todellisuudessa. Tallenna isompi alkuperäinen suunnitelmasi vaikka psd:nä.

Lataa plugin Photoshopille

Tarvitset pluginin tehdäksesi kuvakkeesta .ico-muotoisen, sillä Photoshopissa ei ole oletuksena .ico -tiedostomuotoa. Lataa "ICO (Windows Icon) Format" plugin Telegraphics -sivustolta. Laita plugin tiedosto Photoshopin Plug-ins/File formats kansioon. Tämän jälkeen pystyt tallentamaan .ico -muotoon. Tee kuvakkeesta oikean kokoinen 16x16 ja tallenna se .ico tiedostoksi.

favicon plugin

Lisää favicon sivuillesi

Lisää sivuston html:än head -osioon:

<link rel="shortcut icon" href="http://sivusto.com/favicon.ico">

Huomaa, että esim. Drupalissa tämän saa lisättyä hallinnan kautta ilman koodiin sekaantumista, joten kannattaa tarkistaa sisällönhallintaohjelman ohjeet.

Katri Kiero

Kirjoittaja on mainostoimistoyrittäjä, graafinen suunnittelija ja intohimoinen valokuvaaja.

Kaikki kirjoitukset:
Viivakoodin tekeminen 8.08.13
Miten estää Drupalin roskaposti 28.06.13
Näin tehdään Favicon 2.06.13
The Pile of Rock Tour - konsertin markkinointi 3.04.13
Onnistunut tapahtumamarkkinointi vaatii hyvää suunnittelua 2.04.13
Ilmainen pullovektori 4.01.13
Turvallinen WordPress sivusto 11.12.12
Mustikkamaan kalenteri 2013 6.11.12
Yhdistyksen graafiset materiaalit 27.03.12
Yritysilmeen vaikutus toimintaan 27.03.12