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 di tata 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
Cara membuat favicon selanjutnya, 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 + "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 : 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.
Pentingnya Mengetahui Cara Membuat Favicon Blogger
Cara membuat favicon ini menjadi salah satu informasi yang sangat penting bagi kamu. Bukan tanpa alasan begitu saja, favicon ini memiliki peranan yang tak kalah penting.
Peran dari favicon sebagai tanda unik dari sebuah website ataupun blog. Selain itu, berfungsi sebagai lambang visual dari sebuah halaman blog.
Sebagai contoh, ketika kamu melihat logo dengan huruf G seperti yang tertera pada nama Google, tanpa membaca title-nya secara keseluruhan, kamu akan langsung tahu bahwa huruf G tersebut adalah Google. Dengan kata lain, favicon ini menjadi sesuatu yang melekat erat di memori pengunjung blog.
Dengan favicon ini kamu bisa mengingat dengan jelas dan pasti, bahwa itu merupakan perwakilan dari sebuah situs atau blog. Bahkan, kamu bisa langsung mengenali blog atau situs tersebut meskipun halaman utamanya belum terbuka.
Belum juga nama blog atau situsnya muncul, secara refleks kamu sudah langsung tahu apa nama blog tersebut. Maka dari itulah, desain favicon sangatlah menentukan identitas maupun brand blog yang kamu miliki.
Dengan kata lain, favicon ini bisa kamu ibaratkan sebagai mercu suar atau lokomotif dalam sebuah situs maupun blog. Tak hanya itu saja, favicon ini juga akan menambah blog kamu semakin menarik dan elegan. Selain itu, juga mampu membangun citra yang kuat dan profesional dalam sebuah blog.
Ukuran Favicon
Tak lepas dari cara membuat favicon, favicon ini tersedia dalam berbagai ukuran. Biasanya ukuran ini bisa kamu sesuaikan dengan jenis favicon yang kamu gunakan.
Berikut ini merupakan beberapa contoh rekomendasi ukuran favicon yang bisa kamu gunakan.
- Ukuran Favicon untuk Google terdapat anjuran untuk menggunakan ukuran 96×96.
- Sedangkan ukuran favicon untuk Opera Coast terdapat anjuran untuk menggunakan ukuran 228×228.
Namun, jika kamu bingung dengan metode ini bisa menentukan ukurannya menggunakan gambar sesuai format JPG ataupun PNG. Biasanya memiliki ukuran tidak lebih dari 100 kb.
Sementara itu, ukuran gambar yang dianjurkan yakni 16 x 16 piksel yang dapat kamu edit dengan menggunakan photoshop atau yang lainnya.
Demikianlah cara membuat favicon blog kamu yang mudah 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]
