Netistä löytyy tuhansia ohjeita miten lisätä favicon eli siis pieni kuvake osoitteen vasemmalla puolella ja joka tulee kirjanmerkkipalkkiin (koska kaikille teillähän on acoustic.fi siellä, eks niin! ;D) Kaikki vain eivät huomioi Bloggerin erityistarpeita tai toimi oikein, mutta tässä on täydellinen ohje joka pelaa!
Tärkeintä on ensiksi luoda kuvake. Se onnistuu esim Photoshopilla tai Gimpillä. Faviconin lopullinen koko tulee olemaan 16x16 pikseliä, mutta työskentelyä helpottaa toimia 64x64 kokoisella tiedostolla. Kuvaksi kannattaa pohtia jotain yksinkertaista ja simppeliä, koska ilmaisuvoima 16x16 pikselisellä kuvalla on pieni. Sitten tallennat kyseisen tiedoston .ico muodossa ja lisäät johonkin image hosting palveluun. Itse valitsin nyt käytettäväksi Picturestack palvelun, jota en ollut aiemmin kokeillut.
Käytännössä enään puuttuu koodin lisääminen omaan lähdekoodiin. Blogin ulkoasun muokkausasetuksista löytyy kohta "Muokkaa html-koodia". Koodi pätkä pitää lisätä <head> ja </head> tagien väliin, joten kannattaa laittaa se juuri ennen sulkutagia eli </head>:ia.
Tässä on sitten mitä lisäsätään:
<link href='{image url}' rel='shortcut icon'/><link href='{image url}' rel='shortcut icon' type='image/vnd.microsoft.icon'/><link href='{image url}' rel='icon'/><link href='{image url}' rel='icon' type='image/vnd.microsoft.icon'/>
Näin sivunne saa kauniin koristeen ylös! Jatketaan tästä :)
Tässä on todellinen koodipätkä, jonka olen itselleni lisännyt:
<link href="http://www.picturestack.com/203/862/n2cacousticKVH.ico" rel="shortcut icon"></link><link href="http://www.picturestack.com/203/862/n2cacousticKVH.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"></link><link href="http://www.picturestack.com/203/862/n2cacousticKVH.ico" rel="icon"></link><link href="http://www.picturestack.com/203/862/n2cacousticKVH.ico" rel="icon" type="image/vnd.microsoft.icon"></link>
Vinkvink, sulla ei näy tossa tekstissä minkä tagien väliin teksti pitää laittaa. Kannattaa jättää sydämenpuolikkaat pois, niin luulis näkyvän ;).
VastaaPoistaKiitos vinkistä. Ne katos editointi vaiheesta ku blogger oletti ne oikeaks html-pätkäks!
VastaaPoista