Cara Membuat Favicon Blogger Agar Tidak Pecah


Beberapa kasus banyak di temukan favicon blog yang admin kunjungi blur atau pecah, dengan kata lain tidak jernih. Hal ini dikarenakan tidak melakukan optimasi secara manual pada template blogger. Pada umumnya hanya karena mengganti favicon hanya melalui fitur bawaan blogger yaitu Konfigurasi Ikon Favorit yang terdapat di tata letak blogger. Oleh karena itu pada hari ini admin akan memberikan cara mudah untuk membuat favicon blogger agar jernih, alias tidak pecah atau blur. Agar blog anda 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 1000x1000 pixel. Untuk membuatnya anda bisa menggunakan aplikasi 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 anda ke web favicon generator, setelah itu klik download the generated favicon. File yang barusan anda download berupa file .zip, yang berisi favicon blog dengan berbagai macam ukuran.

Pilih file dengan nama :
  • android-icon 192x192.png
  • apple-icon 180x180.png
  • ms-icon 144x144.png
  • favicon 32x32.png

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

Pada langkah ini, anda 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 akan 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 tepat di bawah 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 teman-teman yang sudah diupload pada tahap ketiga.

5. Ganti Favicon Pada Tata Letak Blogger

Tahap terakhir, anda tinggal mengganti favicon yang ada pada tata letak, ganti dengan Favicon-32x32.png yang terdapat pada file .zip.

Selesai.

Posting Komentar

[ADS] Bottom Ads

Copyright © 2021

Abbox