Cara Membuat Favicon Blogger Agar Tidak Pecah

Cara Membuat Favicon Blogger Agar Tidak Pecah

Sebelum membahas mengenai bagaimana cara membuat favicon agar tidak blur, ada baiknya Saya bahas terlebih dahulu apa itu favicon dan kenapa kamu harus menggunakannya. Favicon, kependekan dari favorite icon adalah gambar ikon website yang berfungsi sebagai identitas visual website atau blog. Favicon biasanya muncul di tab dan bookmark browser.

Banyak kasus yang saya temukan favicon blog yang saya kunjungi blur atau pecah, dengan kata lain tidak jernih. Hal ini dikarenakan tidak melakukan optimasi secara manual pada template blogger itu sendiri.

Pada umumnya hanya karena mengganti favicon hanya melalui fitur bawaan blogger yaitu Konfigurasi Ikon Favorit yang terdapat ditata letak blogger. Oleh karena itu pada hari ini saya akan memberikan cara mudah untuk mengatasi favicon blogger pecah atau blur, agar visual logo blog kamu lebih terlihat profesional.

Berikut Cara Membuat Favicon Blogger Agar Tidak Pecah

1. Buatlah Desain Favicon

Langkah pertama yang harus dilakukan adalah membuat desain favicon yang bagus dan unik dengan format .png minimal berdimensi 1000×1000 pixel. Untuk membuat desain favicon kamu bisa menggunakan aplikasi desain seperti adobe photoshop, adobe illustrator atau bisa juga menggunakan corel draw.

2. Upload Desain Favicon ke www.favicon-generator.org

Setelah membuat desain, upload desain kamu ke web favicon generator, setelah itu klik download the generated favicon. File yang barusan kamu download berupa file .zip, yang berisi favicon blog dengan berbagai macam ukuran.

Pilih file dengan nama :

  • android-icon 192×192.png
  • apple-icon 180×180.png
  • ms-icon 144×144.png
  • favicon 32×32.png

3. Upload File Favicon ke Dalam Dalaman Postingan Blog/Google Drive

Pada langkah ini, kamu bisa upload keempat file icon-blog yang barusan di download dimana aja, bisa dihalaman postingan blog, google drive atau platform penyimpanan lainnya, pada tahap ini kita hanya perlu mengambil link/alamat dari gambar yang sudah kita upload.

Upload 4 file favicon kedalam postingan blog > Klik kanan pada favicon > Pilih Copy link address.

4. Masukan Kode HTML Kedalam Template Blogger

Letakan kode html berikut ini tepat dibawah kode <head>.

<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'/>

Catatan : Ganti link foto sesuai dengan link favicon yang sudah diupload/download pada tahap ketiga.

5. Ganti Favicon Pada Tata Letak Blogger

Tahap terakhir, kamu hanya perlu mengganti favicon yang ada pada tata letak, ganti dengan Favicon-32×32.png yang terdapat pada file .zip.

Demikianlah cara mudah membuat favicon blog kamu agar tidak pecah atau blur. Sekarang favicon blog kamu sudah terlihat tajam dibandingkan sebelum melakukan optimasi favicon blog.

Baca juga: Apakah Bisa Menghasilkan Uang dari Blog? [2022]

Leave a Reply

Your email address will not be published.