Favicon kuvake yksilöi sivustosi kävijälle

Ai mikä favicon? Se on se pieni kuvake selainlehden reunassa, jossa usein komeilee kyseisen kotisivun logo. Mikäli kyseistä kuvaketta ei näy, tarkoittaa, ettei faviconia ole otettu huomioon nettisivujen teko vaiheessa. Onneksi sen voi kuitenkin helposti lisätä myös jälkikäteen.

Tässä kirjoituksessa käymme läpi, kuinka ja miksi Favicon kuvake kannattaa määrittää sivustolle.

Mikä oikein on Favicon kuvake?

Termi tulee sanoista favorites icon, eli kyseessä on alun perin kirjanmerkkeihin, lempisivustoja visualisoimaan, tarkoitettu kuvake. Tähän tarkoitukseen faviconia käytetään toki edelleen, mutta sen vakiintuneempi paikka on enemmänkin selainten välilehdillä.

Favicon kuvake on tiedostomuodoltaan 16×16 pikselin kokoinen .ico tiedosto, joskin useimmat selaimet osaavat jo lukea myös .png ja .jpg muotoisia kuvakkeita faviconiksi.

Mitä hyötyä faviconista on?

Favicon siis yksilöi sivustosi vierailijoiden selaimilla sekä kirjanmerkeissä, että sivustosi erottuu helpommin kymmenistä aukiolevista selainlehdistä.

Faviconin käytöstä on hyötyä myös hakukonenäkyvyyden kannalta, sillä sen, ja muiden sivustoa yksilöivien, kuvakkeiden käyttö katsotaan positiivisena asiana Googlen silmissä.

Kuinka favicon kuvakkeen voi tehdä?

Mikäli omasta kuvankäsittelyohjelmasta ei valmiiksi .ico tiedostoa saa tehtyä, on netti täynnä valmiita sivustoja, joilta saa oman faviconin tehtyä, joko pikselikohtaisella piirtoeditorilla tai lataamalla muun kuvatiedoston.

Yksi tämänkaltainen sivusto löytyy täältä:
https://www.favicon-generator.org/

Vinkki: Käytä lähteenä läpinäkyvää, eli taustatonta, .png kuvaa, jolloin läpinäkyvyys säilyy myös itse .ico kuvakkeessa.

Favicon kuvakkeen asennus

Kun sinulla on valmiiksi tehty 16×16 pikselin favicon.ico niminen tiedosto, tarvitsee sinun vielä viedä se kotisivujesi palvelimelle ja määrittää sen sivuston koodiin. Helpoin tapa on viedä tiedosto suoraan haluamasi sivuston osoitteen juureen, joka meidän webhotelleissamme on public_html kansio.

Tämän jälkeen määritä sivustosi koodintagien väliin seuraava pätkä:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

Favicon ja julkaisujärjestelmät

Monissa avoimen lähdekoodin ohjelmistoissa, on kuitenkin jo sisäänrakennettuna paikka faviconin määrittämiseksi, jolloin koodia ei itse tarvitse käydä muokkaamassa. Usein tällöin kohta kuvakkeen lisäämiseksi löytyy samasta osiosta, jossa määritettäisiin logo sivustolle.

WordPress-julkaisujärjestelmässä, valmiin toiminnon löytyminen on kiinni sivustolla käytetystä ulkoasuteemasta. Useimmissa kaupallisissa teemoissa sekä logon, että faviconin asettaminen tapahtuu teeman omista asetuksista.