Pada kesempatan kali kita akan mempelajari cara membuat dan mengganti favicon di blog. Favicon adalah sebuah icon, logo, atau gambar kecil yang muncul pada menu tab browser dan juga terletak di sebelah kiri address bar browser tertentu. Favicon ini muncul pada browser Opera dan Mozilla Firefox, Konqueror, Safari, Google Chrome, dll, serta tidak untuk Internet Explorer versi 6 ke bawah.
Format file favicon biasanya berupa file dengan ekstensi ico, namun sebenarnya gambar dengan format gif, jpg, png pun bisa digunakan sebagai favicon di blog.
Fungsi utama favicon adalah sebagai suatu logo dari website, situs, atau blog. Bahkan tak jarang sebuah website atau blog terkenal lantaran memiliki favicon yang unik sebagai indentitas yang unik dari milyaran website yang ada di jagad maya.
![]() |
Diambil dari Prigad.com |
Saya rasa Anda sudah mengerti dan tidak perlu lagi menggunakan demo, dari gambar di atas saja sobat bisa sudah menebaknya kan.
Untuk membuat dan menggantinya Anda dapat mengikuti tutorial berikut di bawah ini:
Membuat Favicon
Pertama anda persiapkan terlebih dahulu gambar untuk favicon blog anda. Favicon dapat berupa .ico atau .gif. Jika belum memilikinya, langsung saja klik http://www.html-kit.com/favicon/.
1. Kemudian klik tombol browse dan cari gambar dari komputer anda untuk dijadikan favicon.Pertama anda persiapkan terlebih dahulu gambar untuk favicon blog anda. Favicon dapat berupa .ico atau .gif. Jika belum memilikinya, langsung saja klik http://www.html-kit.com/favicon/.

2. Klik tombol Generate FavIcon.ico.
3. Klik link Download FavIcon Package.

4. Anda akan mendapatkan file beformat .zip, extract file .zip tersebut.
5. Upload favicon.ico atau animated_favicon1.gif ke image hosting anda.
1. Login ke akun Blogger sobat.
2. Masuk ke Rancangan > Edit HTML.
3. Cari kode berikut ini (Gunakan Control + F):
<b:include data='blog' name='all-head-content'/>4. Copy paste kode berikut ini di bawah kode tadi.
<link href='url gambar.ico' rel='shortcut icon'/>atau
<link href='url-gambar.gif' rel='icon' type='image/gif'/>5. Simpan templates.
Setelah selesai melakukan pengeditan, sekarang lihat hasilnya. Jika anda melakukannya dengan benar, favicon ini akan tampil di address bar, sebelah kiri URL blog anda.
Untuk cara memasang favicon di blog selain blogspot juga bisa menggunakan kode di atas. Tetapi pengeditan HTML-nya mungkin sedikit berbeda.
Selamat mencoba!
Referensi : tutorial blogging
Related Post:
Triks Blog
- Membuat Artikel Terkait Dengan Scroll
- Cara Membuat Reply Komentar
- Cara Mensubmit Artikel ke Lintas Berita
- Cara Mendaftar di Lintas Berita
- Cara Menambahkan Headline News di Blog
- Membuat Menu dan Sub Menu Horizontal
- Cara Membuat Tag Cloud Animasi
- Cara Backup Templates
- Cara Membuat Background Pada Widget Blog
- Cara Membuat Pesan Pembuka dan Kotak Dialog
- Cara Membuat Javascript Image Loader for Blog
- Cara Membuat Show-Hidden Widget di Blogspot
- Cara Membuat Artikel Terkait (Related Posts) Bergambar
- Cara Membuat Artikel Terkait (Related Posts)
- Modifikasi Tampilan Read more
- Cara Membuat Spoiler di Blog/Forum
- Cara Mengganti Style Font Blog
- Menghilangkan Icon Obeng dan Tang / Quick Edit di Blog
Blog
- Ribuan Backlink Gratis dari IMTalk
- Cara Memasang Tweetmeme di Setiap Postingan
- Cara Mendaftarkan Blog ke DMOZ
- Cara Membuat Short URL Google Plus
- Cara Daftar Google Plus (Google+)
- Google Update Pagerank Juli 2011
- Cara Menghapus dan Mengecek Broken Link Pada Blog
- Apa itu Google Plus (Google+) ?
- Tips Menghadapi Komentar Negatif
- Menambah Meta Tag Untuk Perkuat Postingan Kontes SEO
- Kontes SEO, Berbahaya!
- Pentingnya Menjawab Setiap Komentar di Blog
- Kenali Pengunjung Blog Anda
- 10 Artikel Terbaik Bulan Juni 2011
- Metode On Page dan Off Page SEO
- Cara Membuat Link Internal di Setiap Postingan
- Siapa Pengunjung Setia di Blog Anda?
- Tips Mendapatkan Pengunjung Setia di Blog
- Favicon Generate - Fitur Baru Blogger
- Cara Menambah Tombol Google +1
- DAW-XP Toolbar - Akses Cepat Menuju DAW-XP
- Cara Membuat Toolbar Alexa Sendiri
- Cara Memasang Alexa Widget
- Manfaat Alexa Toolbar
- Apa itu Alexa Rank?

16 comments
makasih atas tutorialnya. . keren! XD
Reply@chachacha
ReplyThanks gan, jangan lupa ikuti terus tutorialnya di blog serba guna ini.
Terima kasih infonya , aku perlu belajar lagi.
Reply@Blog Sukses dan Bahagia
ReplyOK Sob. Jangan lupa kunjungi terus DAW-XP untuk mendapatkan artikel terbaru.
om ini kudu punya hosting dulu y om??
Reply: Ga kok sob, ini hanya menggunakan hosting dari punya orang hanya untuk upload fotonya saja. Jika sudah di-upload ya tinggal pake javascript saja.
Replymaav kk , knp di blog saya tidak bisa y ??
Replyhttp://ex-stoob.blogspot.com
: Udah dicoba kedua kode di atas mas?
Replykalo tetap nda bisa, letakkan kode tsb di atas kode Coba aja dlu .. :)
ini yang ane cari gan? thanks atas triknya..
Reply: OK, silahkan diterapkan terlebih dahulu di blog agan. Sama-sama gan, saya juga berterima kasih kepada agan karena sudah mau berkunjung dan berkomentar di blog sederhana ini. ;)
Replymaaf, kalo cara ngeupload favicon ke image hosting gmn caranya ?
Replymakasih gan infonya.. sangat bermanfaat...
Replyuntuk permasalahan mengenai isi postingan yang ga bisa muncul gmn gan caranya?jadi yang muncul hanya judul postingan aja
Replymohon untuk infonya
makasih
by adihansamu.blogspot.com
: oh itu biasanya menggunakan fungsi kode .post-body{display:none;} untuk menampilkan hanya judul postingannya saja mas. :)
Replymantep gan...
Replypunya saya queenwarnet.blogspot.com sekarang dah berubah faviconnya...
penjelasannya dapat di pahami,thanks
ReplyPost a Comment
Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).