Kali ini saya akan membagikan tips agar favicon pada blog tidak blur.
Terkadang jika kalian mengatur favicon pada pengaturan blog hasilanya akan blur bukan hanya itu, di google search console pun tidak terlihat.
Oleh karena itu kalian bisa menggunakan cara di bawah ini, berikut caranya.
- Buat Favicon
Pertama kalian harus buat Favicon terlebih dahulu, bagi pengguna Android kalian bisa menggunakan aplikasi pixellab, buat ukuran 1:1 tapi jangan terlalu besar.
- Upload
Kalo kalian sudah selesai membuatnya, langkah selanjutnya kaliam upload gambar yang kalian buat tadi ke favicon generator.
Pilih yang generate icons agar hasilnya nanti bisa banyak ukuran. jangan yang generate only, karena nanti hasilnya satu ukuran saja.
Kalo sudah tinggal download dan ekstrak menggunakan zarchiver.
Nantinya ukuran dari hasil generate akan bermacam macam, pilih saja yang berukuran sebagai berikut:
- android-icon 192x192.png
- apple-icon 180x180.png
- ms-icon 144x144.png
- favicon 32x32.png
Upload ke blog agar bisa mendapatkan url-nya, nantinya url ini akan kalian gunakan pada code HTML.
- Html
Kalian copy kode html di bawah ini dan paste ke template di bawah <head>.
| Code HTML |
|---|
| <link expr:href='data:blog.homepageUrl + "favicon.ico"' 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 "kalian rubah tulisan yang berwarna biru dengan link gambar kalian"
Kalo sudah tinggal paste di template di bawah <head>.
- Upload di pengaturan
Langkah terakhir tinggal upload Favicon berukuran 16x16 atau 32x32 pada pengaturan blog dengan ukuran maksimal 100kb.
Itulah tips agar Favicon pada blog atau website tidak blur, terimakasih telah berkunjung dan semoga bermanfaat.