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:
-
Suunnittele kuvake:
-
Valitse yksinkertainen ja tunnistettava kuva tai käytä yrityksesi logon osaa.
-
Muista, että pienessä koossa liiallinen yksityiskohtaisuus voi hämärtää kuvaa.
-
-
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.
-
-
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.
-
-
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
-
Nimeä tiedosto: Tallenna kuvake nimellä
favicon.ico(tai käytä muuta tiedostomuotoa, jos palvelusi tukee sitä). -
Lataa tiedosto: Sijoita tiedosto verkkosivustosi juurihakemistoon (esimerkiksi
public_html). -
Selaimet etsivät automaattisesti: Monet selaimet etsivät faviconin automaattisesti, kun tiedosto on nimetty ja sijoitettu oikein.
Vaihtoehto 2: HTML-koodin lisääminen
-
Avaa sivusi HTML-tiedosto ja etsi
<head>-osio. -
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 muokkaatype-attribuuttia (esim.image/png). -
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ä.
