Artikel Terkini

Wednesday, August 22, 2012

Cara Membuat Icon Address Bar ( Favicon ) di Blog

0 comments

Pada bagian address bar web / blog, sering kita lihat ada semacam icon kecil yang muncul, contohnya anda bisa melihat blog saya ini dibagian address bar sebelah kiri ada icon kuning bulat . Nah kali ini aku akan menuliskan cara membuat icon tersebut (favicon). Cara membuatnya relatif sangat mudah. Ikuti langkah2 yang saya tulis ini :


1. Buatlah sebuah icon yang akan dijadikan favicon pada address bar.
2. Ubahlah icon image yang anda miliki menjadi favicon dengan menggunakan favicon generator melalui situs www.favicongenerator.com.
3. Klik pada tombol Browse...
4. Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon
5. Klik pada tombol Generate Favicon.
6. Setelah proses selesai, klik pada Click Here to Download your favicon.
7. Save ke komputer anda.
8. Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gambar, contoh adalah ke Yahoo! Geocities / hosting yang lain kesukaan anda memyimpan image.

Image tanpa membuat icon favicon dengan favicon generator :

Kalau anda malas membuat icon, saya sarankan pake aja icon dari yahoo ( seperti pada blog saya ini ). Contohnya seperti ini :



Untuk icon dari yahoo, alamat link dibawah ini, jadi anda tidak usah pusing2 membuat icon sendiri tetapi langsung memasukkan alamatnya :


= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif

= http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif

9. Saya asumsikan bahwa anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, saya mempunyai sebuah alamat URL seperti diatas :


http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif

10. Anda harus mengubah alamat URL favicon anda menjadi seperti ini :


<link rel="shortcut icon" href="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif"/>

11. Langkah selanjutnya adalah silahkan Login ke blogger dengan ID anda.
12. Klik pada Tata Letak.
13. Klik Edit HTML.
14. Silahkan cari kode </head> (posisinya hampir paling atas, jadi jangan jauh-jauh nyari ke bawah).
15. Simpan kode favicon yang tadi persis di atas kode </head>. Contoh :


<link rel="shortcut icon" href="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif"/>

</head>

16. Klik tombol Simpan Template.
17. Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

Mudah bukan ? bagi rekan2 yang belum membuat favicon, silahkan di praktekkan ...

Leave a Reply