Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Favicon Blogger supaya Tidak Blur dan Pecah

Favicon atau favorite icon merupakan sebuah ikon favorit suatu website, berupa logo, gambar dan sebagainya yang dijadikan sebagai ciri khusus atau identitas website tersebut.

Tentunya, dengan kita memasang favicon pada website kita, maka akan mempunyai keunikan tersendiri, ciri khas, dan menaikkan indexing dan branding website kita. Tujuannya, supaya orang akan jadi mudah mengingat website kita, hanya dengan / pernah melihat favicon kita.

Ukuran favicon itu tergolong kecil ya sekitar 16px sampai 500px, tergantung keperluan kita. Favicon itu identiknya dengan logo website kita. Semakin cantik logo website kita, maka semakin mempunyai daya tarik juga bagi para user internet. Jadi, walaupun ukuran favicon ini kecil, tapi sangat penting sebagai identitas website itu sendiri.

Nah, senada dengan hal diatas, kali ini kita akan membahas tentang bagaimana caranya supaya favicon website kita yang pakai CMS Blogger agar tidak Blur, Pecah, Burik, Buram dan sebagainya. Oke, langsung saja ini dia caranya.

1. Tentunya Sudah Punya Favicon

Ini penting banget sebagai langkah awal kita memasang favicon di website. Yupss, kita harus punya dulu ikon / logo website kita, baik itu membuat sendiri maupun sewa jasa desain.

Selanjutnya, kita upload favicon kita ke Favicon Generator untuk membuat dan mendownload gambar favicon kita dengan berbeda-beda ukuran sesuai yang diperlukan secara otomatis. 

Nah, kan hasil dari Favicon Generator itu berbeda-beda ukuran, silakan gunakan 4 gambar saja dengan ukuran sebagai berikut.
  1. android-icon 192x192.png
  2. apple-icon 180x180.png
  3. ms-icon 144x144.png
  4. favicon 32x32.png
Setelah itu silakan anda upload ke-4 gambar tersebut di halaman Blogger website anda. Lalu, anda salin alamat gambar tersebut dan copy paste kan ke Kode HTML dibawah ini (langkah selanjutnya).

2. Script HTML Favicon Tidak Blur

Nah, supaya tidak blur silakan anda copy paste kode HTML dibawah ini, dan letakkan tepat dibawah kode <head> pada menu Edit Tema.
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link href='link foto favicon-32x32.png' rel='icon' sizes='32x32'/>
<link href='link foto android-icon-192x192.png' rel='icon' sizes='192x192'/>
<link href='link foto apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'/>
<meta content='link foto ms-icon-144x144.png' name='msapplication-TileImage'/>
Silakan anda ganti teks yang berwarna kuning dengan link ke-4 gambar favicon yang telah diupload tadi.

Okey, setelah di letakkan tepat dibawah kode <head> pada menu Edit Tema, klik Save. Silakan lihat hasilnya, Favicon website anda jelas, jernih dan tentunya tidak blur atau tidak pecah.

3. Ganti Favicon pada Tata Letak atau Setelan Blogger

Apabila anda sebelumnya sudah memasang favicon di Tata Letak atau Setelan Blog berarti sudah aman.

Tetapi, bila belum silakan anda upload favicon berukuran 16 x 16 pixel atau 32 x 32 pixel. Dengan ukuran maksimal 100 kilobyte.