Bro.Web.Id- Ada banyak hal yang dapat Anda lakukan untuk membuat blog Anda lebih menarik dan terlihat profesional. Salah satunya adalah menambahkan gambar kecil, yang biasa dikenal sebagai favicon (ikon favorit) ke blog Anda.
Jadi sebenarnya,
Apa Itu Favicon Blog?
Untuk yg belum tahu, favicon blog biasanya ada di menu tab browser dan terletak di sebelah kiri nama blog yang mungkin muncul di hasil pencarian. Lihat gambar di bawah.
Istilah atau nama favicon sendiri berasal dari kata favorit icon dan disingkat favicon. Nah, jadi udah pada tau kan pengertian dari favicon ini.
Apa Manfaat Favicon Untuk Blog?
Dari perspektif SEO, mengsetting favicon ini tidak terlalu berdampak langsung dan signifikan terhadap faktor SEO. Namun, hal ini memiliki nilai estetika untuk membuat blog Anda lebih elok untuk dilihat.
Yang jelas favicon adalah sebagai tanda khusus pada blog kita sehingga pengunjung dapat dengan mudah membedakan dan mengenali blog kita hanya dengan melihat favicon.
Namun yang perlu kita ketahui lebih jauh adalah bahwa membuat favicon yang baik tidak sembarangan tapi harus membutuhkan kombinasi yang cocok sesuai dengan isi konten pada blog nya.
Hal ini tentunya untuk memaksimalkan blog kita agar tetap sinkron dan terlihat lebih profesional.
Nah disini mulai muncul masalah baru bagi sebagian blogger, pemula khususnya.
Banyak blogger pemula yang sudah memasang favicon, tetapi gambar yang dihasilkan menjadi tidak jelas, pecah, buram, burik terus apalagi wkwk.
Kalo kamu mengalami masalah diatas mari sama sama kita belajar untuk mengatasinya. Simak ulasan berikut ini.
#1. Buat Favicon
Agar terlihat lebih profesional desain lah sendiri favicon mu. Jika kamu bukan seorang designer atau malas membuatnya silahkan gunakan jasa pembuatan logo blog atau jalan alternatif lain kalian bisa cari cari aja di google.
Banyak sekali logo logo keren yang bisa kamu gunakan untuk dijadikan sebagai favicon pada blog kalian.
Pastikan kamu menggunakan tinggi dan lebar yang sama untuk membuat favicon. Misalnya adalah 500x500 Px dan dalam format .png atau .ico agar memiliki latar belakang yang transparan.
#2. Pakai Favicon Generator
Nah untuk cara ini cukup ribet bagi mimin karena harus mengupload beberapa foto nantinya.
Pertama silahkan buka web Favicon Generator, lalu silahkan upload foto/gambar yang ingin dijadikan favicon kemudian klik Create Favicon nanti jadinya seperti gambar dibawah ini.
tinggal kamu klik Download The Generated Favicon dan otomatis akan mendownload favicon yang berformat zip dengan berbagai ukuran, tetapi disini kita hanya menggunakan 4 gambar saja dengan ukuran seperti berikut
- android-icon 192x192.png
- apple-icon 180x180.png
- ms-icon 144x144.png
- favicon 32x32.png
#3. Upload Gambar Ke Halaman Blogspot
Silakan upload ke-4 gambar yang sudah dipilih tadi ke halaman blog kamu. Hal ini berguna agar kita bisa dapetin link gambar tadi, soalnya link ini akan kita taruh di meta tag pada template blog
#4. Memasukkan Script Favicon anti burik ke Template Blog
Setelah mendapatkan link link gambar tadi, silahkan kalian masukan ke dalam script dibawah ini
<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'/>
Note: Sebenarnya kalian nggak perlu ribet-ribet upload sampai 4 gambar, cukup satu gambar aja udah cukup. Dengan cara mengubah sedikit bagian pada link gambar nya seperti dibawah ini.
https://1.bp.blogspot.com/xxx/s1600/xxx.png
Tinggal kalian ubah aja bagian yang sudah mimin beri tanda biru diatas sesuai dengan ukuran gambar yang diinginkan, misal.
s32 untuk ukuran 32px
s64 untuk ukuran 64px
Nah setelah memasukkan link kalian ke dalam script diatas, langkah selanjutnya adalah memasukan nya kedalam template pada blog kalian dengan cara
buka Tema > Edit HTML dan letakkan script tadi tepat dibawah kode <head> lalu simpan.
#5. Ubah Favicon pada Setelan Blog
Agar favicon bisa langsung berubah kalian bisa mengupload favicon pada setelan blog kalian.
Kalian bebas mau menggunakan ukuran yang berapa asal tidak lebih dari 100Kb.
Selesai deh, cukup mudah bukan. Oiya cara ini bisa kamu terapkan juga pada blog yang Valid AMP ya!
Tunggu beberapa saat untuk melihat perubahan nya, silahkan komen dibawah jika ada yang ingin ditanyakan seputar Cara Membuat Favicon Agar tidak Pecah/Blur/Burik, Valid AMP Blogger!
Posting Komentar