Cara Memasang Favicon di Blog Agar tidak Blur dan Pecah

tampilan favicon google

Pernah nggak sih kalian udah capek-capek desain favicon buat blog, eh ternyata pas udah dipasang diblog ternyata faviconnya malah blur? Masalah itu pernah ku alami juga tempo hari, blog utama yang sekarang sedang kupakai ini punya kasus yang sama menyebalkannya. Pas udah dicari tahu kenapa, eh ternyata emang ada yang kurang sob.. Jadi nih, dalam template blogger ini ada yang wajib kuperbaiki.

Sedikit informasi aja, bahwa favicon yang dibutuhkan oleh browser itu memiliki banyak versi ternyata sob. Mengingat berkembangnya teknologi pada browser yang begitu cepat, sampai-sampai saya terlambat mengetahui bahwa favicon haruslah ada dan hadir untuk semua platform. Kalo kita udah bicara ke topik responsive, maka hal ini akan sedikit berhubungan ke arah itu.

Ini karena W3C, menyadari perlunya penggunaan multi platform, yang pada akhirnya dalam HTML5 memiliki standar tersendiri untuk jenis dan ukuran untuk favicon, berpangku dari interface pengguna sistem operasi yang bermaca-macam, jenis dan ukuran browser, serta ketersediaan terhadap perangkat seluler. Saat ini sepertinya udah menjadi sebuah kewajiban, bahwa membuat favicon menjadi berbagai ukuran itu sangat penting. Salah satunya adalah agar menghindari tampilan favicon menjadi blurry/blur dan pecah.

Daftar Ukuran Favicon Standard

Di bawah ini adalah daftar yang menjadi standard dari ukuran favicon yang banyak digunakan saat ini, daftar ini didasarkan pada Favicon Cheatsheet. Kalian bisa memakai beberapa saja, tidak perlu semua.

Size Name Purpose
32×32 favicon-32.png Standar untuk sebagian besar browser desktop
128×128 favicon-128.png Ikon Toko Web Chrome & Ikon Layar Mulai Windows 8 Kecil *
152×152 favicon-152.png Ikon iPad touch (Ubah untuk iOS 7: naik dari 144 × 144)
167×167 favicon-167.png Ikon sentuh Retina iPad
(perubahan untuk iOS 10: naik dari 152 × 152, tidak beraksi. iOS 10 akan menggunakan 152 × 152)
180×180 favicon-180.png iPhone Retina
192×192 favicon-192.png Rekomendasi Manifes Aplikasi Web Pengembang Google
196×196 favicon-196.png Ikon layar beranda Chrome untuk Android

Kira-kira menurut kalian, ukuran mana aja sih yang harusnya dipakai pada template Blogger?

Mungkin untuk menjawab pertanyaan itu, bakalan ada macam-macam jawaban dan belum tentu kalian bakal sepakat soal itu, termasuk dengan pendapat saya pada postingan ini. Disini saya menyederhanakan 3 ukuran platform penting, yaitu Desktop, Tablet dan Mobile. Jadi, saya merekomendasikan setidaknya kalian memakai 3 dari jenis ukuran platform tersebut.

Ukuran favicon rekomendasi dari saya adalah :
1. 16x16 = Ini adalah ukuran favicon default dari Blogger, jika kalian udah pernah upload melalui menu pengaturan template, mungkin kalian bakalan nemuin pengalaman 'tidak sempurna' dari ukuran ini. Jelas, kalo hanya pake ukuran ini maka bakalan blurry banget faviconnya. Sebagai tambahan kalian bisa pake tambahan favicon dengan ukuran dibawah ini:
2. 60x60
3. 152x152
4. 192x192

Bagaimana Cara Pasang Favicon Tanpa Agar tidak Blur?

Mudah banget, as simple as touching slime. Hah? Paan sih sok inggris banget ni penulisnya.

Tutorial cara memasang favicon di blog

1. Kalian buat 3 favicon dengan ukuran yang berbeda. Export masing-masing ukuran 60x60, 152x152, 192x192 ke dalam format PNG, inget ya PNG!

2. Udah? apa belom nih? Kalo belom dan masih bingung caranya, tak kasih tau cara sederhananya sob, kalian pergi aja ke icons8.com, disitu udah disediakan fitur untuk resize icons. Cari aja icons yang kiranya cocok buat kamu pakai, lalu download dengan opsi custom dan format PNG.

3. Kalo udah, kalian langsung aja buat New Post di Bloggernya, lalu upload ketiga gambar tadi. Lalu insert gambar ke postingan. Dan ambil url gambarnya, caranya dengan klik kanan pada gambar, lalu salin tautan.

4. Setelah dapat link dari masing-masing ukuran favicon, kalian tinggal menerapkannya kedalam blog. Copy script dibawah ini lalu paste diantara kode <head> dan </head>
<link href="url-icon-60x60" rel="icon" sizes="60x60"></link>
<link href="url-icon-152x152" rel="icon" sizes="152x152"></link>
<link href="url-icon-192x192" rel="icon" sizes="192x192"></link>
Catatan : ubah url-icon-xx itu menjadi url icon kalian yang barusan diupload tadi ya.
5. Lalu simpan deh.


Kalo kalian masing bingung dengan langkah-langkahnya, silahkan berkomentar dibawah ya! Sampai jumpa di artikel selanjutnya!

Baca juga

Post a Comment