Faviconin tekeminen ja lisääminen WordPressiin

Koodi Elämästäni - favicon

Favicon on pieni ikoni, joka näkyy muun muassa selaimessa jokaisella avatulla sivulla vasemmassa yläkulmassa sekä puhelimen kirjainmerkeissä tai linkissä puhelinmen näytöllä. Faviconin tekeminen onnistuu esimerkiksi GIMP-kuvankäsittelyohjelmalla ja kerron, miten se tehdään sekä lisätään WordPressiin. Favicon lisätään samanlailla niin WordPress.comiin kuin WordPress.orgiin.

Favicon selaimessa

Tein yllä näkyvissä kuvissa olevan faviconin itseotetusta valokuvasta hedelmäkulhosta. Leikkasin siitä omena pois –  käytin itse asiassa aikaisemmin samaa kuvaa blogisivuni yläosassa – ja lisäsin “Koodi Elämästäni” -tekstin kuvan päälle käyttäen työkaluna GIMP-kuvankäsittelyohjelmaa. Kuten kuvakaappauksista on nähtävissä, tekemäni favicon on pienenä suttuisen näköinen ja varsinkin kun vertaa muiden faviconeihin. Tykkään kyllä kuvasta ja asettelusta, kun favicon on nähtävissä isompana, esimerkiksi puhelimen näytöllä. Lienee kuitenkin parempi tehdä siitä selkeämpi, jotta favicon näyttää paremmalta esimerkiksi selaimessa. Aloitetaan!

Faviconin tekeminen

Perusohjeet faviconin tekemiseen GIMPillä ovat seuraavat:

  1. Avaa  512 x 512 pikselin kokoinen uusi kuva (new image)
  2. Luo siihen haluamasi ikoni
  3. Tallenna kuva (Export as…)

Luodun faviconin voi tallentaa esimerkiksi png tai jpg -tiedostomuodoissa. Huomattavaa on se, että WordPressissä kuvan on oltava vähintään 512 x 512 pikseliä, eikä faviconin pidä olla .ico -tiedostopäätteinen, vaan se saa olla myös png tai jpg.

Seuraavaksi näytän vaiheittain, miten loin itselleni uuden faviconin.

  1. Avaa GIMP ja paina näppäinyhdistelmää ctrl+n (new image)
  2. Valitse kuvan kooksi 512 x 512 pikseliäNew Image - gimp
  3. Avaa maisemakuva rinnalle ctrl+o
  4. Valitse Ellipse Select Tool -työkalulla sopivasta kohtaa soikionmuotoinen osa ja paina näppäinyhdistelmää ctrl + x
  5. Valitse kohdassa 2 luotu tyhjä kuva ja paina näppäinyhdistelmää ctrl-v
  6. Paina hiiren oikeaa näppäintä Layer -> Scale Layer
  7. Suurenna liitettyä kuvaa kokoon width= 500 px, height=303 px
  8. Paina hiiren oikeaa näppäintä Colors -> Threshold…


  9. Valitse auto –asetukset ja paina ok
  10. Paina hiiren oikeaa näppäintä Colors -> Invert
  11. Paina hiiren oikeaa näppäintä Colors -> Colorize…
  12. Valitse arvot Hue=30, Saturation=92, Lightness=-55 ja paina ok
  13. Valitse Text Tool ja laita tekstikenttä keskelle kuvaa
  14. Valitse fontti Purisa Bold Oblique, fontin koko 274 px
  15. Kirjoita teksti KE ja asettele se keskelle puukuviota
  16. Tallenna kuva Export as…

Yllä oikealla oleva kuva on uusi Koodi Elämästäni -blogini favicon. Siitä tuli synkempi kuin aluksi ajattelin, mutta pidän ajatuksesta, että favicon on muokattu käyttäen samaa kuvaa, jonka vaihdoin sivustoni kuvaksi yläpalkkiin.

Yläpalkki - KE

Faviconin lisääminen WordPressiin

Edellä luodun faviconin saa siirrettyä WordPressiin helposti.

  1. Valitse WordPressin hallintapaneelista Ulkoasu -> Mukauta
  2. Valitse Sivuston identiteetti
  3. Paina Valitse kuva ja valitse kuva galleriasta
  4. Klikkaa Tallenna ja julkaise

Siinä koko prosessi! Kuten aikaisemmin mainitsin, faviconin ei tarvitse olla .ico -tiedostopäätteinen vaan WordPressille riittää, että kuvan on oltava neliö sekä suuruus vähintään 512 x 512 pikseliä.

Uusi favicon selaimessa

Loppu löpinät

Tämä postaus sisältää paljon kuvia ja itseäni mietityttää kuvien koko sekä miten se vaikuttaa sivuston nopeuteen. Laitan ylös muistilistalle kuvien pakkaamisen, sillä olen nähnyt vilauksia lisäosista, joilla sen saisi hoidettua. Ei muuta kuin leikittelemään kuvankäsittelyohjelmalla ja luomaan omia faviconeja! Itselläni on sellainen tutina, että sivustoni favicon ja yläpalkin kuva menee vielä muutaman kerran uusiksi, ennen kuin löydän mieltäni tyydyttävän tyylin.

3 thoughts on “Faviconin tekeminen ja lisääminen WordPressiin

  1. Hyvä ja selkeä ohje kuten myös favikonkin. Hienoa! Meille WordPress on ollut vielä opiskelua, mutta hiljalleen juonesta alkaa päästä kiinni. Saimme tehtyä myös oman favikonin.

    1. Onpa kiva kuulla, että ohjeistani oli hyötyä! Yritän kirjoitella niitä tässä samalla, kun käytän WordPressiä ja opin uusia kikkoja.

      Tässä postauksessa oleva faviconi meni jo vaihtoon, sillä etsin vielä blogini tyyliä. Kokeilemallahan sekin löytyy. 😊

Leave a Reply

Your email address will not be published. Required fields are marked *