Cara Mengganti Favicon Blogger Dengan Benar

Alhamdulillah, pada kesempatan kali ini saya bisa membagikan tutorial tentang cara mengganti favicon blogger dengan benar dan dijamin pasti berhasil. 

Kumpulan Favicon
Sebelumnya saya pernah mengalami masalah pada saat ingin mengganti favicon blogger. Pada saat itu saya mengupload gambar yang berekstensi ico untuk dijadikan icon blogger, setelah selesai saya upload dan membuka blog saya ternyata icon blogger tidak berubah sama sekali. Padahal gambar yang saya gunakan sudah memenuhi persyaratan yaitu tidak lebih dari 100kb dan ukurannya 32 x 32 pixel. Tapi kenapa icon bloggernya masih berupa icon standar blogger yaitu huruf "B"???

Tidak hanya itu, saya coba searching di google ternyata banyak yang mengatakan bahwa gambar icon tersebut harus di upload dulu ke situs penyimpanan gambar seperti Photobucket, Imageshack, Tinypic, dll. Namun sayangnya semua situs penyimpanan gambar tidak menerima file gambar yang berekstensi ico (sudah saya coba broooo...)

Jreennggg....!!! Dan akhirnya saya menemukan artikel yang menggunakan PNG sebagai icon blogger meskipun penjelasannya kurang dimengerti tapi saya berusaha untuk memahami apa yang disampaikan oleh penulisnya. Berikut adalah hasil pengamatan saya dilabrotarium TASSIMBUNG berdasarkan pemahaman dan percobaan.



Ada tiga tahap yang harus dilakukan untuk mengganti favicon blogger.
  1. Upload gambar PNG ke entri baru tanpa di publikasikan (simpan sebagai draft)
  2. Copy link gambar PNG yang ada di draft ke pengaturan Template
  3. Upload lagi gambar PNG di menu dropdown Tata Letak

Sebelum kita mulai, ikuti dulu persyaratannya:
  • Ukuran gambar yang digunakan harus dibawah 100kb
  • Gambar berupa bujur sangkar (panjang kali lebarnya sama)
Nah, mari kita mulai.
Pertama, siapkan dulu gambar yang akan di upload. Disini saya menggunakan gambar bujur sangkar dengan ukuran 32x32 pixel seperti ini.
Masuk ke akun blog lalu buat entri baru seperti biasa ketika ingin membuat artikel.

Pada mode 'Compose' upload gambar yang ingin dijadikan favicon dengan ekstensi png.

Setelah selesai di upload maka dilembar kerja tampilannya akan seperti ini.

Sekarang beralih ke mode 'HTML'. Cari kode tulisan src lalu copy kode link yang berada di dalam tanda kutip. Untuk sementara paste dulu link tadi ke notepad.

Tahap pertama selesai. Simpan sebagai draft dan ingat jangan di publikasikan. Setelah selesai klik 'tutup'.


Sekarang ke tahap kedua.

Pilih menu dropdown Template > Edit HTML. Tekan Ctrl + F lalu cari kode </head>. (Jika terjadi masalah saat mencari kode namun kodenya tidak ketemu mungkin ini bisa membantu Trik Untuk Menemukan Kode HTML Yang Tidak Muncul Di Pencarian Blogger)

Setelah kode </head> ditemukan copy kode dibawah ini lalu letakkan tepat diatas kode </head>.

<link href='URL GAMBAR'/>
<link href='URL GAMBAR' rel='icon' type='image/png'/>

Ganti URL GAMBAR dengan kode link gambar.

Kemudian klik 'Simpan Template'

Sekarang melangkah ke tahap terakhir. Pilih menu dropdown 'Tata Letak' lalu klik 'Edit' di kotak Favicon yang berada di sudut kiri atas seperti gambar dibawah ini.

Maka akan muncul jendela baru. Nah, sekarang pilih 'Browse' kemudian cari gambar icon yang akan dipilih sebagai favicon setelah itu klik 'Simpan'.

Silahkan buka blognya dan lihat apa yang terjadi. Berhasil kan???


Sekian tutorial dari saya... kalau ada yang kurang dimengerti silahkan komentar.... dan kalau ada yang mau download video tutorialnya lengkap dengan toturial cara membuat icon menggunakan corel draw silahkan download dibawah ini.