if there is anything you want to ask please contact admin Contact now!

Cara Membuat Favicon Blogger Agar tidak Pecah, Blur atau Burik, Valid AMP html!

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.

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

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!

Tags:
Cara bikin favicon blog agar tidak pecah
Cara membuat icon blog agar tidak pecah
Cara agar favicon tidak pecah
Cara agar favicon tidak blur
Cara agar favicon tidak buram
Cara bikin favicon agar tidak burik
Cara membuat favicon supaya jernih
Cara supaya favicon blog tidak pecah

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.