Favicon (lyhenne sanoista “favorites icon”) on pieni, neliönmuotoinen kuvake, joka liitetään verkkosivustoon. Se näkyy esimerkiksi selaimen välilehdillä, osoiterivillä, kirjanmerkeissä ja jopa hakutuloksissa. Vaikka favicon on kooltaan usein vain 16×16 tai 32×32 pikseliä, se voi merkittävästi vahvistaa sivustosi brändiä ja parantaa käyttökokemusta.

Miksi favicon on tärkeä?

  • Brändäys: Favicon auttaa erottamaan sivustosi muiden joukosta. Kun käyttäjä selaa useita välilehtiä, selkeä ja tunnistettava favicon tekee sivustosi muistettavammaksi.

  • Ammattimaisuus: Huolella suunniteltu favicon viestii huolellisesta suunnittelusta ja antaa sivustollesi lisäarvoa.

  • Käyttäjäkokemus: Favicon parantaa navigointia; se auttaa käyttäjää tunnistamaan ja palaamaan sivustollesi helposti kirjanmerkeissä ja selaimen historiassa.

Näin luot oman faviconin

Voit tehdä faviconin joko itse tai käyttää ilmaisia verkkogeneraattoreita. Seuraavassa ohjeet oman faviconin luomiseen:

  1. Suunnittele kuvake:

    • Valitse yksinkertainen ja tunnistettava kuva tai käytä yrityksesi logon osaa.

    • Muista, että pienessä koossa liiallinen yksityiskohtaisuus voi hämärtää kuvaa.

  2. Määritä oikea koko:

    • Perinteiset favicon-koot ovat 16×16 ja 32×32 pikseliä. Monissa palveluissa suositellaan myös suurempia versioita (esim. 48×48 tai jopa 512×512) käytettäväksi eri laitteissa.

  3. Valitse tiedostomuoto:

    • Suosituimmat muodot ovat ICO, PNG ja GIF. ICO-muotoa käytetään yleisesti, mutta monet nykyaikaiset selaimet tukevat myös PNG:tä, joka tarjoaa terävän kuvan ja läpinäkyvyyden.

  4. Käytä favicon-generaattoria (tarvittaessa):

    • Jos et halua muokata kuvaa itse, voit käyttää ilmaisia työkaluja kuten Favicon.io tai RealFaviconGenerator.net. Näillä työkaluilla voit ladata logosi ja generoida automaattisesti oikeankokoiset ja -muotoiset faviconit.

Näin lisäät faviconin verkkosivustollesi

Faviconin lisääminen onnistuu yleensä kahdella tavalla: lataamalla se palvelimen juureen tai lisäämällä HTML-koodinpätkä sivusi <head>-osioon.

Vaihtoehto 1: Palvelimen juureen sijoittaminen

  1. Nimeä tiedosto: Tallenna kuvake nimellä favicon.ico (tai käytä muuta tiedostomuotoa, jos palvelusi tukee sitä).

  2. Lataa tiedosto: Sijoita tiedosto verkkosivustosi juurihakemistoon (esimerkiksi public_html).

  3. Selaimet etsivät automaattisesti: Monet selaimet etsivät faviconin automaattisesti, kun tiedosto on nimetty ja sijoitettu oikein.

Vaihtoehto 2: HTML-koodin lisääminen

  1. Avaa sivusi HTML-tiedosto ja etsi <head>-osio.

  2. Lisää seuraava koodi:

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

– Jos käytät toista tiedostomuotoa, vaihda href-arvo vastaavasti (esim. /favicon.png) ja muokkaa type-attribuuttia (esim. image/png).

  3. Tallenna muutokset ja tyhjennä selaimen välimuisti, jotta uusi favicon näkyy oikein.

Vinkkejä onnistuneeseen faviconin suunnitteluun

  • Pidä se yksinkertaisena: Vältä monimutkaisia yksityiskohtia, jotka eivät näy pienessä koossa.

  • Käytä brändivärejä: Vahvista yrityksesi visuaalista identiteettiä käyttämällä samoja värejä ja fontteja kuin muualla sivustollasi.

  • Testaa eri laitteilla: Varmista, että favicon toimii hyvin sekä työpöytä- että mobiililaitteissa.

  • Päivitä tarvittaessa: Jos brändisi muuttuu, muista päivittää favicon vastaamaan uutta ilmettä.

Samaan aiheeseen liittyvää