How to Add a Favicon to your Blog

Perhatian! Tutorial ni adalah dengan kerjasama seorang rakan yang menjadi Admin bagi website SMK Puchong Utama 1, sebuah web sekolah menengah di Selangor. Sebab tu ada gambar lencana .. heheeee ..

A favicon? What's that? Heheheeeee ... Favicon dapat dilihat pada hujung address bar kat atas tu. Nampak tak? Badge sekolah tu lar! Cute, kan? Nak buat camtu gak? Jom!

Kucuba dan kucuba tutorial buat favicon ni. Tapi malangnya, tak menjadi-jadi juga. Rupa-rupanya sumer ni Blogger punya fasal. Kebelakangan ni, Blogger asyik menukar dan mengupdate itu dan ini, begitu dan begini ... sehingga banyak tutorial-tutorial lama dah tak leh pakai daaaa ... Sigh! Tapi, mungkin banyak penambahbaikan yang Blogger dah buat, kan! Hokey la tu ...

Tapi, don't worry, be happy! Acik akan ajar korang sumer camana nak buat favicon yang kiut miut tu. Beri perhatian taw ... Uihh, macam mengajar dalam kelas la pulak! Heheheeee ...

Tengok arrow dalam gambar atas tu. Yang ijau tu default Blogger.com nyer favicon.  Korang nyer blog camtu ke?  Arrow merah tu favicon blog sekolah. Power! Branded tu! Ada personal touch! Ada umphhhh!!

So, lets do it!

1.  Sediakan samada gambar .jpg, .btm, .gif ataupun .png (Jangan besar-besar taw ... 64 x 64 sesuai) Pastikan gambar tu square, k!

2.  Pastu buka blogger.com dan tekan New Post. Uploadkan gambar terpilih tadi.


3.  Nampak atas tu ...


4.  Klik Edit HTML supaya kita dapat lihat kod bagi gambar tersebut.


5.  Haaa ... tu! Nampak tu dalam kotak merah tu ... Pilih kod src mula daripada http:// sampai habis (biasanya .jpg). Highlightkan dan copy. Kodnya lebih kurang camni lar: 
http://2.bp.blogspot.com/_sdav5HC-2HQ/TFJtWjYrlRI/AAAAAAAAB9A/vEw4DZUjw1c/s320/favicon.jpg

6.  Pada Dashboard korang, klik tab Design - Edit HTML. Cari kod ]]></b:skin> (Boleh pakai fungsi Ctrl+F)

7.  Paste kod ini:
<link href='kod' rel='shortcut icon'/>
<link href='kod' rel='icon' type='image/png'/>
betul-betul selepas kod ]]></b:skin> tadi.

8.  Gantikan kod di atasdengan src kod yang dicopy tadi. Gantikan kedua-dua kod tu taw.
Jadi lebih kurang gini lar -

<link href='http://2.bp.blogspot.com/_sdav5HC-2HQ/TFJtWjYrlRI/AAAAAAAAB9A/vEw4DZUjw1c/s320/favicon.jpg' rel='shortcut icon'/> 
<link href='http://2.bp.blogspot.com/_sdav5HC-2HQ/TFJtWjYrlRI/AAAAAAAAB9A/vEw4DZUjw1c/s320/favicon.jpg' rel='icon' type='image/png'/>

9.  Click Save Template and voila ... macam magic korang akan lihat d very beautiful favicon kat address bar tu. I laikk!!

Have fun!