Minggu, 07 Maret 2010

Cara membuat Favicon

Favicon (favourite icon) adalah icon kecil yang berada di samping alamat blog atau website anda. Apabila anda membuat blog di Blogger.com alias blogspot, maka favicon yang berada di samping alamat URL anda adalah berupa favicon blogger. Untuk memasang favicon. Terlebih dahulu Anda harus mempunyai sebuah gambar atau icon yang disimpan dalam format .GIF atau .PNG dengan ukuran 32x32 pixels.

Setelah Anda mempunyai icon. Upload iconnya ke image hosting. Banyak website yang menyediakan image hosting gratis. Seperti Shareapic, Photobucket, Imageshack dan lain-lain. Kalau saya sendiri mengupload iconnya di Photobucket.

Apakah favicon tersebut bisa di ganti dengan favicon milik anda? jawabannya adalah bisa. Berikut adalah contoh favicon blogger yang sudah di ganti :



Untuk mengganti favicon tersebut, anda bisa melakukan langkah-langkah seperti berikut :
  • Pertama buatlah sebuah gambar yang akan di jadikan sebagai favicon, contoh seperti gambar di bawah ini :
  • Setelah itu anda harus mengubah gambar tersebut kedalam bentuk gambar icon. Untuk hal tersebut, anda bisa menggunakan tool Favicon Generator, silahkan kunjungi situs http://www.favicongenerator.com
  • Klik pada tombol Browse...
  • Masukan gambar yang tadi dibuat untuk di ubah menjadi format icon
  • Klik pada tombol Generate Favicon.
  • Setelah proses selesai, klik pada Click Here to Download your favicon.
  • Save ke komputer anda.
  • Langkah selanjutnya adalah anda harus meng upload Favicon yang tadi ke tempat hosting gamabar, contoh adalah ke Yahoo! Geocities.
  • Sekarang saya asumsikan bahwa anda sudah mempunyai alamat URL dari favicon anda. sebagai contoh, saya mempunyai sebuah alamat URL seperti ini :
                  http://ilmubengkeldotcom.blogspot.com/favicon.ico 
  • Anda harus mengubah alamat URL favicon anda menjadi seperti ini :
                <link rel="shortcut icon" href="http://ilmubengkeldotcom.blogspot.com/favicon.ico"/>
  • Langkah selanjutnya adalah silahkan login ke blogger dengan ID anda.
  • Klik pada Tata Letak.
  • Klik Edit HTML.
  • Silahkan cari kode </head> (posisinya hampir paling atas). 
  • Simpan kode favicon yang tadi persis di atas kode </head> .
           Contoh :
                  <link rel="shortcut icon" href="http://ilmubengkeldotcom.blogspot.com/favicon.ico"/>
  • Klik tombol Simpan Template.
  • Selesai. Sekarang anda sudah mempunyai favicon di alamat URL blog anda.

Bagi anda yang masih menggunakan browser IE6, favicon anda tidak akan langsung terlihat, coba di bookmark dulu alamatnya. Berbeda jika anda menggunakan browser firefox, opera dan yang lainnya, favicon anda sudah langsung dapat di nikmati.