Mengganti Icon Blog (Favicon) buat blogger dengan kode HTML

Favicon (Favorite Icon) adalah icon yang ada pada blog sebagai lambang atau tampilan dari sebuah blog dalam sebuah Tab itu sedniri. Untuk lebih jelas nya lihatlah gambar di bawah

 Bagian yang saya petakin dengan warna hitam itulah yang dimaksut dengan icon blog/website yang disebut juga Favicon (favorite icon). Sudah ngerti kan ? nah tanpa memperpanjang mukadimah lagi saya akan membahas bagaimana cara mengganti favicon dalam sebuah blog namun kali ini bukan dari pengaturan Edit favicon yang dapat kita temui pada pengaturan Tata Letak / Layout yang ada di Dasbor blogger, melainkan dengan kode HTML di Pengaturan Templates blog itu sendiri .

Berikut langkah langkahnya.
1. Siapkan gambar yang ingin di jadikan icon dalam suatu blog, terserah gambar apa saja , mau itu dibuat sendiri melalui software editing ataupun gambar yang sudah ada sebelumnya.

2.Nah untuk mengganti icon syaratnya gambar yang ingin dijadikan icon harus maksimal 100 kb dan berekstensi .gif ataupun .jpeg , jika gambar kamu belum memenuhi syarat sebaiknya compress di Favicon generator . Nah nanti ada pilihan 16px , 24px , dan lainnya . Kalau saya milih yang 16px. Bentuk tampilan faviconnya seperti gambar berikut.

setelah anda pilih foto dan create favicon nanti akan muncul link download. Klik download maka akan didownloadlah filenya dalam extensi .ico .

3.Buka file .ico tadi dengan menggunakan "Paint" lalu save as dan ganti extensinya menjadi .gif atau .jpeg

4.Copy URL gambar dengan cara login ke Blog lalu buat Entri Baru, selanjutnya upload image tadi. Setelah gambar d upload pada Entri , klik kanan pada gambar dan pilih "Copy Link Location". Dapat dilihat seperti gambar dibawah dan saya juga menyertakan contoh URL  .gif yang akan saya jadikan icon blog.

5.Kembali ke Blogger lalu buka Template dan pilih "Edit HTML" nanti akan muncul kode HTML.

 Kemudian cari kode HTML berikut :
<title><data:blog.pageTitle/></title>
(untuk cara cepat mencarinya klik CTRL+F di Edit HTML blog anda dan akan muncul kotak disudut kanan atas lalu copykanlah kode di atas tadi.)

Setelah dapat seperti pada gambar yang saya tandai dengan kotak nomor 1,lalu cari kode <b:skin> yang saya tandai dengan kotak nomor 2.Nah diantara kotak nomor 1 dan 2 ada code iconnya yaitu
<link href='Isikan dengan URL yang telah di copy tadi' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
cotntoh hasil milik saya :
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdTDgV3_0MmpKuZMPC3fidC5OLWD2hzAuASBAnkuk5prAmR3zOdUJTkLz1_W-3EXnF127X8bYdtTZ1NKBS8SUr9CDfbbp2lcsVDp2e-Rf_meIn5MgGoUBVpCUpe_eUS8Pzfx9WgO83aIo/s1600/favicon.gif' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Lalu klik simpan template, cek hasilnya .

Berikut hasil saya :

Jika ada yang kurang di mengerti silahkan tanya di kolom komentar,terimakasih telah berkunjung.
Penulis : johanelyosse@gmail.com