Cara Membuat / Mengganti Favicon / Site Icon Blog


Favorit Icon atau yang disingkat Favicon adalah sebuah gambar kecil di address bar. Terletak disebelah kiri nama blog ataupun judul posting blog yang sedang kita buka. favicon bawaan blogspot biasanya dilambangkan dengan huruf B dalam kotak berwarna orange. Seorang blogger mengganti faviconnya mungkin bisa jadi agar terlihat lebih indah, keren dan profesional, hehehe. Lihat Gambar di Bawah.

cara mengganti merubah favicon blog


Ada 2 cara untuk mengganti favicon, cara pertama ialah secara default dan ini cukup mudah dilakukan sedangkan cara kedua ialah dengan membuat favicon secara online kemudian mengupload gambar favicon itu di hosting/tempat penyimpanan image online (misal di google code). Yuk kita simak sama-sama caranya.

Cara Pertama;

1. Buatlah dan Siapkan gambar yang akan dijadikan favicon, persegi bujur sangkar misalnya ukuran 32x32 pixel atau berapapun yang penting harus persegi.

2. Masuk ke Rancangan > Tata Letak > Lihat ada kata Favicon di atas header, Klik link Edit.

mengganti ikon blog

3. Cari gambar dengan klik Telusuri lalu klik simpan.

4. Favicon blog sobat sudah berubah. hehehe

Cara kedua;

1. Masuk ke genfavicon.com  atau ke www.favicon.cc
 
2. Buat favicon di  situ. sebagai contoh saya akan membuat favicon di genfavicon.

3. Masukkan gambar baik lewat url gambar ataupun menguploadnya (disini saya menguploadnya) lalu Klik Upload image

4. Jika sudah diupload bisa Select Size untuk menentukan ukuran gambar. atau juga memotongnya/crop (crop & preview) sesuai tampilan yang kita inginkan.

5. Download favicon Image. Lalu upload ke hosting gambar, disini Saya menguploadnya ke google code.


upload favicon di google code

6. Buka Dasbor > Menu Template > edit HTML > centang expand template, cari kode  <b:skin><![CDATA[. Lalu masukkan alamat url favicon blog yang telah di upload di hosting image tadi, tepat di atas kode  
<b:skin><![CDATA[.  diantara kode biru dibawah.
<link href=' masukkan alamat tempat hosting favicon ' rel='shotcut icon'/>
sebagai contoh lihat kode di bawah ini.

<link href='http://julak-project.googlecode.com/files/animated_Favicon.gif' rel='shotcut icon'/>
 <b:skin><![CDATA[
pada kode berwarna merah diatas, adalah alamat saya menyimpan/hosting gambar favicon blog ini.

7. Jika sudah klik pratinjau, lalu save template. Lihat perubahannya.

Jika sobat mau tau cara membuat file hosting image, javascript maupun dokumen lain di google code termasuk menyimpan gambar favicon silahkan kunjungi postingan cara membuat file hosting di google code
Nah bagaimana sobat sudah berhasil mengganti faviconnya, terlihat lebih profesional, keren dan ... bagus khan? hehehe selamat mencoba. Salam Blogger.

50 komentar:

  1. mas, cra buat label kyk mas gimn??

    ReplyDelete
  2. Mudah kok, Tata Letak > add gadget > Label >
    kemudian klik pada cloud, hapus centangan "Tampilkan jumlah entri per label" , terakhir simpan > simpan Setelan

    ReplyDelete
  3. Wahhh...makasih nih info'a tadi sudah ane coba, tinggal nunggu aja nih perubahan di blog'a...
    nice posting... :D

    ReplyDelete
  4. thanks ,, akhirny BLOG saya ada iconnya ,hhehe

    ReplyDelete
  5. Saya udah coba berkali-kali, pake 1, tetep aja, pake cara 2 dengan hosting photobucket tetap nggak berhasil. Kemapa ya?

    ReplyDelete
  6. terima kasih pak, klu berkenan tlng dong blog sy dicek and kurangnya di mana?www.doamakbul.blogspot.com

    ReplyDelete
  7. thx,, berguna bgt.. mampir juga ya ke experimentalion.blogspot.com

    ReplyDelete
  8. ok mas atas tutorial nya.
    boleh dicoba nie .

    ReplyDelete
  9. Gak Usah repot2 mending cara pertama aja hehehehe
    mampir ke blog ane sob salam kenal

    happy blogging

    ReplyDelete
  10. langsung aja gan... g ada kata laen ni. selain muji post agan. keren bnget dah...
    salam kenal gan ... jangan lupa jalan" lah ke http://www.di-cb.blogspot.com

    ReplyDelete
  11. Mas kalo buat tabel kaya yang paling atas itu gimana? kaya yang daftar isi, tentang saya dll

    ReplyDelete
    Replies
    1. itu menu navigasi horizontal namanya, cari aja tuh di widget ada tuh artikel menu navigasi

      Delete
  12. thnks atas informasinya
    jangan lupa follow blog aku ya


    happy blogging

    ReplyDelete
  13. info yang lengkap ya..
    pengen nih ganti favicon...sudah nyoba tapi pusing liatin "HTML" jadi kuurungkan niatku...

    ReplyDelete
  14. gan mau tanya blog itu bisa mendafatkan uang ngga...

    ReplyDelete
  15. apa sih manfaat blog .........

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. makasih gan infonya
    http://filmgratis-aja.blogspot.com

    ReplyDelete
  18. Makasih mas atas sharenya jadi mas berhasil

    ReplyDelete
  19. sukses sob...
    thank's infonya...
    kunjungi jga blog saya yg sederhana...

    http://blogzets.blogspot.com/

    ReplyDelete
  20. kok saya tidak pernah berhasil ya gan ?

    ReplyDelete
  21. Saya juga gak berhasil masih ada tanda 'B' nya

    ReplyDelete
  22. jika type imaage-nya saya ganti (.gif) menjadi(.png) masih bisa muncul di address bar apa tidak gan,,,,trims infonya gan salam kenal.

    ReplyDelete
  23. ngambil url nya icon itu dimana sih ?? pusing nah gan

    ReplyDelete
  24. waah baru tahu, sukses submit sitemap nya. mudahan segera terindeks google

    ReplyDelete
  25. Makasih juragan untuk tutorial cara membuat favicon diatas sangat berguna banget buat ane.

    ReplyDelete
  26. thanks jgan lupa mampir www.iqbalsayap.blogspot.com

    ReplyDelete
  27. akhirnya ketemu juga tutorial tentang favicon ini, terima kasih gan...

    ReplyDelete
  28. Thx banget. emang lagi nyari ttg ini nich

    ReplyDelete
  29. saya pakai cara pertama, tapi kok gak berubah ya mas? masih blank aja tuh

    ReplyDelete
    Replies
    1. sama gan ane juga masih ga keganti, malah 2 cara dah ane cobain semua

      Delete
  30. trims abis.. membantu sekali infonya

    ReplyDelete
  31. thanks gan ,, mampir sini http://dandylaksana.blogspot.com/

    ReplyDelete
  32. Waahh, berhasil aku sudah bisa sekarang :D
    oh iya, mampir y di blog aku --> http://komikmerlingirl.blogspot.com/
    Thanks infonya

    ReplyDelete
  33. wadu kok nggak bisa semua ya icon nya nggak berubah monggo mampir teman teman http://investasicepatpemula.blogspot.com/

    ReplyDelete
  34. Replies
    1. bisa kok, tp memang harus menunggu dulu beberapa menit. Saya nunggu samai 15 menit baru berubah

      Delete
  35. Makasih banyak. infonya menarik banget,,

    ReplyDelete
  36. Thx ya bermanfaat buat saya....mampir juga ya diblog saya ryan-maarif.blogspot.com

    ReplyDelete

Anda harus menjadi follower blog ini jika ingin memberikan komentar. Terima Kasih