Pienet yksityiskohdat ratkaisevat – tee blogiisi hieno favicon (se ikoni blogisi osoitteen vieressä)

by Petteri on 17/08/2010 · 12 comments

Pienet yksityiskohdat ratkaisevat – tee blogiisi hieno favicon

Minkä tahansa tuotteen brändäämisessä on oleellista, että kaikki viestintä on yhtenäistä ja linjassa halutun sanoman kanssa. Jos haluat että tuotteestasi välittyvä mielikuva on laadukas, on todella tärkeää että kaikki pienetkin yksityiskohdat ovat kunnossa.

Tässä tapauksessa blogisi on oma tuotteesi, jonka haluat olevan tiptop-kunnossa kun asiakkaasi, eli lukijat, saapuvat sinne ensimmäistä kertaa.

Yksi näkyvimmistä pienistä yksityiskohdista blogeissa ja muilla internet-sivustoilla on favicon –ikoni, joka on siis se pieni ikoni joka näkyy osoitteen vieressä. Jos haluat tehdä sivustostasi persoonallisen ja kokonaisvaltaisen brändin, niin tätä yksityiskohtaa ei todellakaan kannata unohtaa.

Visuaalisen ilmeen viimeistelyn lisäksi favicon myös auttaa lukijoitasi surffaamisessa erottumalla esimerkiksi muista alasivuista silloin, kun sivuja on auki useita samaan aikaan. Itselläni niin kutsuttuja tabeja on auki yleensä samaan aikaan useita kymmeniä, joten erottuva favicon auttaa todella paljon oikean sivun löytämisessä.

Millainen on hieno favicon?

Faviconeita on miljoonia ja kauneus on katsojan silmissä, mutta täältä voit katsoa muutamia esimerkkejä hienoista faviconeista:

http://www.fineicons.com/en/favicon-gallery

Tärkeintä olisi, että faviconisi on linjassa blogisi ilmeen kanssa ja näyttää visuaalisesti hienolta. Useimmiten paras ratkaisu on käyttää faviconina blogin tai sivuston logoa, jos sellainen löytyy.

Miten teen oman faviconin?

Oman faviconin tekeminen saitillesi tapahtuu siten, että teet ensin kuvan, joka on samankokoinen pituus- ja leveyssuunnassa, jonka jälkeen lähetät sen favicon-generaattoriin, joita löytyy netistä useita. Jos alkuperäinen kuvasi on .png –muodossa ja sisältää läpinäkyvän taustan, niin myös faviconisi tausta on läpinäkyvä (suositeltavaa).

Tässä on yksi favicon-generaattori, jota olen itse käyttänyt:

http://www.favicongenerator.com/

Kun olet muokannut oman faviconisi valmiiksi ja lähettänyt sen generaattoriin, niin tuloksena pitäisi olla favicon.ico –niminen tiedosto.

Lähetä tiedosto FTP-ohjelmalla (itse käytän sellaista ilmaista ohjelmaa kuin Core FTP) palvelimellesi blogisi juurihakemistoon, niin saat uuden ikonisi vanhan tilalle.

Yleensä uusi ikoni ei näy heti selaimessa, vaan sen ilmaantumiseen voi mennä jonkin aikaa, jopa muutama päivä, joten odottele kärsivällisesti.

Nyt blogissasi on tämä pieni yksityiskohta kunnossa, joka sekä helpottaa lukijoidesi surffailua, että parantaa sivustosi brändiä ja yhtenäistä ilmettä.

Jos pidit tästä artikkelista, niin voit kiittää kertomalla siitä kavereillesi esimerkiksi Facebookin ja Twitterin kautta. Kiitos!

Lisää Artikkeleita!

Jos tästä artikkelista oli sinulle hyötyä, niin varmasti pidät myös tulevista artikkeleistamme. Liity RSS feediin tai e-mail -listalle, niin pääset uusiin artikkeleihin käsiksi heti kun ne ilmestyvät.

Tarjoa Olut

Jos pidit artikkelista, niin voit tarjota Petterille oluen klikkaamalla tuoppeja.

{ 12 comments… read them below or add one }

Lauri Mäenpää August 20, 2010 at 02:01

“Yleensä uusi ikoni ei näy heti selaimessa, vaan sen ilmaantumiseen voi mennä jonkin aikaa, jopa muutama päivä, joten odottele kärsivällisesti.”

Kuvan voi nimetä muulla nimellä ja vaihtaa käytettävän faviconin esimerkiksi seuraavalla kuvauksella headien välissä:

Näkyy heti muutos. En itseasiassa edes tiennyt, että selain hakee automaattisesti favicon.icoa? Olen käyttänyt tuota shortcut-linkkausta.

Reply

Petteri August 20, 2010 at 03:19

Tuosta viestistäsi ilmeisesti jäi koodinpätkä matkan varrelle.

Ja kyllä, selain hakee sen favicon.ico:n automaattisesti, mutta sen näkymisessä on itsellä mennyt joskus parikin päivää joten ehkäpä kärsimättömien on parasta käyttää tuota mainitsemaasi kikkaa. Saatko laitettua sen koodin jossain riisutussa muodossa?

Reply

Lauri Mäenpää August 20, 2010 at 05:38

Juu, näköjään jäi :D
Eli esimerkiksi:
link rel=”shortcut icon” href=”http://www.pikalaina.us/kuvat/favicon.gif”

Edellisen koodin eteen ja loppuun tagien merkit. Ja headien väliin koko pätkä. Tietty jos samalla nimellä vaihtelee tiedostoa, niin muuttuminen voi kestää siitä johtuen, että edellinen versio on selaimen välimuistissa.

Reply

Jyri Väätäinen August 24, 2010 at 03:51

Uudistin faviconiani tämän oppaan siivittämäni artikkelin julkaisupäivänä, minusta tuli hieno uusi favicon.

Reply

Tarkkailija K August 30, 2010 at 20:38

Mukava vinkki. Näin diletanttina haluaisin kuitenkin pientä tarkennusta.

“Lähetä tiedosto FTP-ohjelmalla (itse käytän sellaista ilmaista ohjelmaa kuin Core FTP) palvelimellesi blogisi juurihakemistoon, niin saat uuden ikonisi vanhan tilalle.”

Mistähän tuommoinen juuri oikein löytyy ja miten ?? Oma blogi on bloggerissa.

Reply

Petteri August 31, 2010 at 21:36

Tätä varten blogisi täytyy ikävä kyllä tietääkseni olla omalla domainilla ja hostingilla, eli Bloggerin, Blogspotin ja vastaavien palveluiden kanssa ei minun käsittääkseni voi muokata sisältöä täysin vapaasti. Joku muu voi toki korjata jos olen väärässä.

Reply

Tarkkailija K September 9, 2010 at 00:07

Koska suurin osa bloggaajista ilmeisestikin käyttää juuri bloggeria on syytä korjata. Faviconin SAA kyllä näköjään bloggeriinkin. Koska tuossa palvelussa kuvaa ei voi lisätä juureen, täytyy kuva hostata jonnekin jotta saadaan kuvalle URL-osoite.

Suuri osa esim. ilmaisista kuvapankeista ei hyväksy .ico-päätteisiä siirtoja, joten kuvan voi aivan hyvin lisätä .png- tai .gif-päätteisena esim picasaan jonne on automaattisesti muodostettu jokaiselle bloggerin bloggaajalle oma kuvapankki jos vain on blogiinsa kuvia siirtänyt koneeltaan. Näin saadaan kuvalle osoite.

Sitten vain tuo koodipätkä tageilla varustettuna ja oman kuvan osoitteella juuri ennen viimeistä koodia jolloin faviconeista haetaan se jälkimmäinen eli omasi. Ja tämä on siis diletantin ohje ei todellakaan ammattilaisen.

Toimii ainakin firefoxille ja ainakin vielä. Takuuta en anna !

Reply

Petteri September 9, 2010 at 03:27

Kiitokset vinkistä!

Hieman kyllä mietityttää että ne jotka osaavat tuon virityksen tehdä käyttävät jo muutenkin luultavasti esim. WordPressiä omalla hostingilla, mutta varmaan löytyy niitäkin joille Blogger riittää muuten mutta favicon vain pitää saada vaihdettua. :)

Reply

Jake April 19, 2011 at 20:26

Tarkkailija K, kiitos hyvästä vinkistä. Täytyy ottaa se käyttöön omassa blogger -blogissa. Petterille kiitos neuvosta, jolla tehdään favicon. Täytyy viimein tehdä sellainen omaan blogiin, kun niitä alkaa näkyä useammilla sivustoilla.

Reply

Joonas Toivonen November 10, 2011 at 15:24

Tämä on niitä asioita, jotka multa aina unohtuu. Näin yksinkertaisella kikalla saisi oman saitin näyttämään paljon paremmalta :) Pistän tuon generaattorin testaukseen!

Reply

Roni May 19, 2012 at 16:57

Favicon on kyllä hyvä olla, koska käyttäjä löytää sivun helpommin muiden välilehtien joukosta.

Reply

irish April 15, 2013 at 11:20

Kyllä, favicon kannattaa lisätä!
Tässä yksi hyvä linkki myös: http://favicon-generator.org/about/

Reply

Cancel reply

Leave a Comment

Previous post:

Next post: