Näin lisäät favicon-kuvakkeen WordPress kotisivuillesi

Usein juuri pienet yksityiskohdat viimeistelevät verkkosivun ilmeen. Yksi niistä on favicon – pieni kuvake, joka näkyy selaimen välilehdessä sivuston nimen vieressä. Vaikka se on kooltaan pieni, se auttaa käyttäjiä löytämään sivusi helpommin, tukee brändisi tunnistettavuutta ja antaa sivustollesi ammattimaisen viimeistelyn.

Jos käytät WordPressiä, faviconin lisääminen on helppoa ja nopeaa. Tässä artikkelissa käymme läpi, mikä favicon on, mitä hyötyä sillä on ja miten voit lisätä sen WordPress-sivullesi – mukaan lukien oikea koko, tiedostomuoto ja tyylit.

Mikä on favicon-kuvake?

Favicon on pieni sivuston kuvake, jonka nimi tulee sanoista favorites icon eli “suosikkikuvake”. Alun perin sitä käytettiin kirjanmerkkien ja suosikkisivustojen tunnistamiseen. Nykyään sen yleisin paikka on selaimen välilehti, sivuston nimen vieressä.

Favicon on yleensä hyvin pieni – vain muutamia kymmeniä pikseleitä – ja toimii visuaalisena tunnisteena, joka auttaa käyttäjiä löytämään sivustosi nopeasti monien avoimien välilehtien joukosta.

Mitä hyötyä faviconista on?

Favicon on pieni, mutta sen vaikutus sivuston tunnistettavuuteen on suuri. Se auttaa käyttäjiä löytämään sivustosi nopeasti, vaikka selaimessa olisi monta välilehteä auki. Lisäksi kuvake toistuu selaimessa ja kirjanmerkeissä, mikä vahvistaa sivustosi ilmettä ja tekee brändistä helpommin muistettavan. Pieni yksityiskohta kertoo myös, että sivusto on huolellisesti suunniteltu ja viimeistelty, mikä antaa ammattimaisen vaikutelman.

Jos et lisää omaa faviconia, selaimessa näkyy usein tyhjä kuvake tai WordPressin oletuskuvake. Oman faviconin lisääminen on siis helppo tapa tehdä sivustostasi tunnistettavampi ja viimeistellä sen ilme.

Koko

WordPress suosittelee faviconille 512 × 512 pikselin neliökuvaa. Vaikka selaimessa kuvake näkyy usein vain 16×16 pikselin kokoisena, suurempi tiedosto varmistaa sen toimivuuden myös mobiililaitteissa, työpöydän pikakuvakkeissa ja kirjanmerkeissä.

Tiedostomuoto ja tiedostokoko

WordPress tukee useita tiedostomuotoja, mutta PNG on suositeltavin, koska se tukee läpinäkyvyyttä ja toimii useimmissa selaimissa saumattomasti.

Pidä faviconin tiedostokoko pienenä, mieluiten alle 100 KB. Kevyt tiedosto latautuu nopeasti, mikä on tärkeää käyttäjäkokemuksen kannalta, erityisesti mobiilissa.

Tyylit ja värit

Faviconin kannattaa olla yksinkertainen ja helposti tunnistettava. Vältä tekstipainotteisia tai monimutkaisia kuvakkeita, sillä pienessä koossa ne eivät erotu. Suositeltavaa on käyttää:

• Logon yksinkertaistettua osaa
• Selkeää symbolia tai kuvaketta

Mieti myös värejä: faviconin tulisi näkyä selkeästi sekä vaaleassa että tummassa selaintilassa. Parhaiten eri selaintiloista erottuu kirkkaat tai kontrastiset värit.

Jos kirkkaat värit eivät sovi brändisi ulkoasuun, voit käyttää faviconin taustana pyöreää tai neliön muotoista pohjaa omalla taustavärillä ja sijoittaa sen sisälle logon mustan tai valkoisen version.

Suunnittele favicon-kuvakkeesi Canvassa

Tässä esimerkissä kerron miten voit luoda oikean kokoisen tiedoston Canvassa. Huomaa, että jos haluat taustattoman version kuvakkeesta tulee sinulla olla käytössä Canva Pro versio.

1. Valitse vasemman reunan valikosta Luo +
2. Selaa sivun valikosta alareunaan kohtaan Mukautettu koko
3. Kirjoita kooksi 512 x 512 px ja Luo uusi suunnittelumalli
4. Lisää logosi
5. Lataa favicon png tiedostomuodossa – laita samalla raksi ruutuun Läpinäkyvä tausta jos muotona on jokin muu kuin neliö

Lisää favicon WordPressiin

1. Valitse hallintapaneelin vasemman reunan valikosta Asetukset → Yleinen
2. Klikkaa kohdasta Valitse/vaihda sivuston kuvake
3. Lisää faviconisi ja valitset Aseta sivuston kuvakkeeksi
4. Tallenna muutokset painamalla vielä sivun alareunasta Tallenna muutokset

Tarkista että favicon näyttää hyvältä sekä vaaleassa että tummassa selaintilassa. Jos kuvake ei näy heti, tyhjennä selaimen välimuisti.