Favicon – Näin lisäät sen blogiin – Tutorial

Tämänkin voi jakaa... kuten HBOn tunnarit

Favicon on pieni kuvake, joka näkyy selaimessa. Tässä postauksessa käyn läpi sitä,

  • onko tällä pienellä kuvalla merkitystä blogiin
  • miten voit tehdä faviconin itse
  • ja miten lisäät sen omaan blogiin (WordPress | Blogger)

Favicon

Favicon

Favicon

Favicon näkyy selaimessa blogin tai sivuston nimen edessä. Favicon tulee myös näkyviin kirjanmerkkeihin, jolloin blogi tai sivusto on helpompi tunnistaa muiden kirjanmerkkien joukosta. Onko tämä pieni kuva elintärkeä blogin kannalta. Ei ole. Mutta tiettyä ammattimaisuutta ja laadukkuutta se tuo, vaikka sinulla olisi ilmaiselle blogialustalle tehty blogi.

Favicon on pieni osa kokonaisbrändiä. Kävijä huomaa aina ensimmäisenä kuvan ennen kuin lukee tekstin. Meidän silmät ja aivot vain toimivat niin. Nähdessään ja tunnistaessaan faviconin, kävijä voi olla varma, että on tullut oikeaan paikkaan. Ennen kuin sivu tai postaus edes latautuu.

Varsinkin kirjanmerkkien kohdalla, favicon säästää lukijan aikaa, kun hän pystyy löytämään sinun blogisi muiden blogien ja sivustojen joukosta. Hänen ei tarvitse avata jokaista kirjanmerkkiä löytääkseen etsimänsä.

Jos blogilla ei ole omaa faviconia, pahimmillaan kirjanmerkeissä olisi vain lista B-kirjaimia (jos olisit lisännyt sinne eri blogger blogeja talteen. Oikean blogin etsiminen olisi neulan etsimistä heinäsuovasta.

Faviconin käyttö helpottaa siis lukijaasi löytämään parhaat postaukset nopeasti. Parannat siis lukijan kokemusta blogistasi lisäämällä omaan blogiin faviconin.

Faviconin tekeminen on helppoa. Itse olen tehnyt oman Faviconin ilmaisella Canvalla mutta se ei ole paras mahdollinen tapa tehdä. Itseäni häiritsee kuvan valkoinen tausta, joka tumman harmaata taustaa vasten näyttää amatöörimäiseltä.

Joskin olen pärjännyt tällä nyt reilun kaksi vuotta, tulkoon aika muutokselle hieman myöhemmin. Jos olet tehnyt tai teettänyt blogille oman logon tai jos sinulla on yritys, logo on täydellinen faviconiksi. Mutta jos sinulla ei ole logoa, voit tehdä sen esimerkiksi Picmonkeyllä. Picmonkey ei ole enää ilmainen, sen vuosimaksu on 66,00 €.

P.s. Faviconin tekemiseen löytyy myös valmiita sivustoja, mutta itse henkilökohtaisesti olen aina varovainen näiden kanssa. Koskaan ei voi tietää, tuleeko kuvan mukana jotain ylimääräistä koneelle tai blogiin…

Faviconin tekeminen

Faviconin koko on aina neliö. WordPressin ohjeessa on mainittu, että faviconin (tai sivuston kuvake) koko tulee olla 512 x 512 px. Tätä kokoa käytämme myös tässä esimerkissä. Lähdetään liikkeelle Picmonkeylla. Valitse Design, merkitse oikea koko ja klikkaa Make it painiketta.

Favicon

Sen jälkeen tehdään faviconille läpinäkyvä tausta. Tämä antaa ammattimaisemman kuvan faviconista, koska lopputulos ei ole taustaltaan erivärinen kuin selaimen harmaa väri. Lisää täppä ”Transparent canvas” kohtaan ja klikkaa ”Apply” painiketta.

Favicon

Tässä esimerkissä käytän valkoista ympyrää faviconin taustana. Vasemmalla on erilaisia kuvakkeita, joista valitsen perhosen. Vasemman valikon rinnalle ilmestyy uusi valikko. Kun klikkaan ”Geometric” kuvaa, saan ympyrän valittua. Klikkaan ympyrää, jolloin se siirtyy neliön päälle. Kun klikkaan ympyrää, se ”aktivoituu” jolloin voin ottaa kulmasta kiinni ja isontaa sitä. Isonsin ympyrän sopimaan neliölaatikon sisään.

Tämän jälkeen valitsin ympyrälle taustaväriksi (Color 2) valkoisen (Color 1 vaihtaa ääriviivan värin).

HUOM! Huomasin vasta tässä vaiheessa, kun latasin alla olevan kuvan blogiin, että olin vahingossa laittanut nuolen ”Export” tekstin kohdalle. Tässä vaiheessa emme vielä painia ”Exportia” sillä emme lataa kuvaa vielä omalle koneelle. Pahoittelut siis tästä.

Favicon

Halusin tehdä tästä faviconista yksinkertaisen, joten päätin lisätä valkoisen ympyrän sisään pelkät nimikirjaimet T ja K. Klikkasin vasmmalta Tt merkkiä, jonka jälkeen sain eri fontit näkyviin. Koristeelliseksi fontiksi valitsin Bilbo Swash Caps fontin. Klikkasin fonttia ja sen jälkeen ”Add text” paniketta. Tämän jälkeen aktivoin T-kirjaimen klikkaamalla sitä. Muokkasin fontin kokoa mahdollisimman suureksi ja valitsin sopivan sini-vihreän sävyn.

Favicon

Lopuksi kopioin T-kirjaimen, vaihdoin toiseksi kirjaimeksi K ja favicon oli valmis. Tämän jälkeen klikkasi yläreunasta ”Export” painiketta…

Favicon

…nimesin kuvan faviconiksi, pidin kuvamuodon .png, varmistin kuvan koon ja lopulta vain latasin kuvan omalle koneelle. Simppeliä!

Katso alta video, miten lisäät Faviconin omaan blogiin. Kuvaruutuohjeet löydät videon alapuolelta. Löydät lisää tutorial-videoita Youtube-kanavaltani.

Favicon

Faviconin lisääminen WordPressiin

Favicon lisätään WordPressiin näin. Valitse ohjauspaneelista Ulkoasu ja sen jälkeen mukauta.

Favicon

Tämän jälkeen klikkaa ”Sivuston identiteetti” kohtaa…

Favicon

Ja lisää kuva normaalisti WordPressiin. Jos sinulla ei ole koskaan ollut faviconia, sinulla todennäköisesti lukee ”Lisää kuva” tai ”Lisää favicon”. Minulla lukee vaihda, koska olen tämän jo kertaalleen tehnyt. Lisää kuva lataamalla äsken tekemäsi favicon omalta koneelta ja lopuksi tallenna tai julkaise muutokset.

Favicon

Faviconin lisääminen Bloggeriin

Mene bloggerin ohjauspaneeliin, valitse linkkilistasta Ulkoasu ja Faviconin kohdalta joko ”Muokkaa” tai ”Lataa”.

Favicon

Lataa kuva omalta koneelta ja tallenna. Helppoa!

Favicon

Mitä mieltä olet Faviconista? Onko sillä merkitystä vai onko se täysin turha?

Muut tutoriaalit:

 

Tämänkin voi jakaa... kuten HBOn tunnarit

Julkaistu kategoriassa: