Minggu, 24 April 2011

Membuat dan Memasang Favicon Pada Web



Beberapa hari yang lalu, sobat Muhibb mengajukan pertanyaan pada shoutbox seputar bagaimana cara merubah icon Internet Explorer ataupun Blogger yang terletak di samping URL address menjadi foto dirinya, seperti layaknya blog yang di miliki mas Anang, dan kali ini saya akan mencoba membahasnya.

Gambar atau foto yang menggantikan icon blogger sepengetahuan saya yang terbatas ini, foto tersebut disebut dengan Favicon. Awalnya favicon ini berupa gambar biasa yaitu sebuah gambar icon layaknya icon-icon yang terdapat dalam program windows karena favicon sendiri berasal dari kata "Favorite Icon", akan tetapi dalam perkembangannya banyak favicon ini banyak yang berupa foto.

Bagaimana cara membuat Favicon?

Pertama-tama tentunya kita harus membuat sebuah icon ataupun foto yang berukuran kecil sekitar 16px x 16px untuk nanti menggantikan icon blogger. contoh :


Jika sebuah icon atau foto sudah jadi, langkah selanjutnya adalah kita bisa menggunakan jasa sebuah situs sebagai server favicon ini salah satunya adalahhttp://www.myfavatar.com. Untu cara bergabungnya silahkan ikuti langkah-langkah berikut ini :

  1. Silahkan klik disini untuk menuju http://www.myfavatar.com/atauhttp://chami.com/
  2. Klik tombol Register Now untuk melakukan pendaftaran pada situs tersebut
  3. Ada beberapa form yang harus diisi antara lain :
    • Desired Username (5 to 25 chars) –> isi dengan username yang sobat inginkan. contoh : Unyil
    • First Name –> isi dengan nama depan sobat
    • Last Name –> isi dengan nama belakang sobat
    • Gender –> pilih sesuai jenis kelamin sobat. male=pria, female=wanita
    • Date of Birth –> pilih tanggal yang sesuai dengan tanggal lahit sobat
    • Country –> pilih negara di mana sobat tinggal. contoh : Indonesia
    • Email Address –> isi dengan alamat email sobat, tentunya harus yang masih valid untuk nanti melakukan verifikasi
    • Confirm Email Address –> isi kembali dengan alamat email yang tadi dituliskan
    • Password (5 to 25 chars) –> tulis password yang sobat inginkan
    • Confirm Password –> tulis kembali password yang tadi sobat tulis
    • Enter the characters below –> tulis huruf atau angka yang tertera pada kotak sebelah bawah
    • Beri tanda centang pada kotak di samping tulisan I agree to MyFavatar Terms of Service
    • Klik tombol yang bertuliskan Register
  4. Setelah muncul tulisan Congratulations!!!, sobat harus melakukan verifikasi melalui email sobat
  5. Buka email sobat yang tadi dituliskan pada saat melakukan Register
  6. Buka email yang di kirim dari site-admin@ myfavatar.com yang bertajuk Welcome to MyFavatar!
  7. Klik link yang diberikan untuk melakukan verifikasi
  8. Setelah ada tulisan Congratulations!!! kembali, klik tulisan here atau bisa juga tulisan Sign In untuk masuk ke halaman account sobat
  9. Tulis user name serta password sobat, klik tombol Sign In
  10. Klik tulisan Change Favatar yang berada pada sebelah kiri layar
  11. Klik tombol Browse…, lalu masukan icon atau foto yang tadi di buat
  12. Klik tombol Submit
  13. Klik tulisan Edit Blog
  14. Ada beberapa form yang harus di isi :
    • Blog URL –> isi dengan alamat blog sobat, jangan lupa untuk menambahkan tanda slash (/) pada ujung alamat URL. Contoh : http://kolom-tutorial.blogspot.com/
    • Title –> Isi dengan judul blog sobat. Contoh : Blog tutorial
    • Category –> pilih kategori yang sesuai dengan blog sobat
    • Description –> isi dengan deskripsi blog sobat. Contoh : Panduan praktis membuat blog di blogger.com
    • Klik tombol Submit
    • Klik tulisan Favatar Codes untuk mengambil kode favicon
    • Copy kode HTML yang berada di bawah tulisan favicon Code:….. dstlalu paste pada program notepad
    • Klik tulisan Sign Out untuk keluar dari halaman Account sobat
    • Silahkan tutup halaman windows browser situs tadi.
Contoh kode Favicon yang di berikan yaitu :



langkah selanjutnya adalah memasukan kode yang tadi telah sobat dapat kedalam kode template blog. Untuk template klasik dengan template baru tentunya ada sedikit perbedaan, silahkan ikuti langkah berikut :
Untuk template klasik :
  1. Sign in di blogger dengan id sobat
  2. Klk menu Template
  3. Klik menu Edit HTML
  4. Masukan kode Favicon di bawah kode atau sebelum kode

Populer Post