Mengatasi Leverage Browser Caching Untuk Favicon.ico

Ditulis oleh: Adhy Suryadi

Ditulis pada: 8/27/2019

Mengatasi Leverage Browser Caching Untuk Favicon.ico - Favicon adalah ikon utama sebuah web yang muncul pada sisi kiri pada tab browser dan merupakan logo dari web tersebut. Favicon bisa juga dikenal sebagai shortcut icon, website icon, URL icon, atau bookmark icon.

Favicon ini umumnya menggunakan sebuah gambar dengan extension .ico dengan ukuran yang cukup kecil yaitu 16x16 pixel.

Meskipun ukurannya cukup kecil, gambar tetaplah sebuah gambar. Dan ini sering menjadi masalah di tool pengukur kecepatan loading blog yaitu leverage browser caching dari Favicon.ico.

Untuk mengatasi masalah dari leverage browser caching dari Favicon.ico ini silahkan ikuti trik-trik berikut ini.

Menggunakan Base64

Salah satu cara untuk mengatasi leverage browser caching dari Favicon.ico ini adalah dengan menggunakan favicon dengan base64, berikut caranya:

1. Silahkan download gambar favicon blog Anda yang sekarang digunakan. Silahkan klik kanan pada halaman blog Anda lalu pilih View page source. Kemudian cari kode yang seperti berikut:
   

   
   <link href='https://www.domainanda.com/favicon.ico' rel='icon' type='image/x-icon'/>

   
   Silahkan klik URL yang berwarna biru, setelah gambar faviconnya terbuka silahkan simpan gambar tersebut di komputer.
2. Selanjutnya silahkan gunakan tool konversi favicon to base64, upload gambar favicon yang tadi disimpan di komputer lalu pilih Data URI -- data:content/type;base64 untuk Output Format-nya.
3. Setelah itu masuk ke edit HTML blog lalu cari kode seperti berikut:
   

   
   <link expr:href='data:blog.canonicalHomepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

   
   Kemudian silahkan rubah menjadi seperti berikut ini:
   

   
   <link href='URL BASE64 DARI LANGKAH 2' rel='icon' type='image/x-icon'/>

   
   Silahkan ganti kode URL BASE64 DARI LANGKAH 2 tersebut dengan URL base64 dari favicon yang dikonversi pada langkah ke-2.

Sekarang silahkan cek blog Anda dengan tool pengukur kecepatan loading blog yang biasa Anda gunakan. Apakah notif leverage browser caching dari Favicon.ico sudah menghilang?

Menggunakan Staticaly

Base64 biasanya menghasilkan URL yang cukup panjang untuk sebuah gambar, yang tentu saja ini akan mempengaruhi size HTML blog.

Jika Anda tidak nyaman dengan URL yang cukup panjang dari base64, Anda bisa mengatasi leverage browser caching dari Favicon.ico ini dengan cara yang lebih simple yaitu dengan menggunakan Staticaly, caranya seperti berikut:

1. Silahkan masuk ke edit HTML blog lalu cari kode seperti berikut:
   

   
   <link expr:href='data:blog.canonicalHomepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

2. Kemudian silahkan rubah menjadi seperti berikut ini:
   

   
   <link href='https://cdn.statically.io/favicons/www.domainanda.com' rel='icon' type='image/x-icon'/>

   
   Silahkan ganti kode www.domainanda.com dengan nama domain blog Anda, bisa juga tanpa www.
3. Selesai, cukup simple bukan?

Sekarang silahkan cek blog Anda dengan tool pengukur kecepatan loading blog yang biasa Anda gunakan. Apakah notif leverage browser caching dari Favicon.ico sudah menghilang?

UPDATE:

Ternyata di atas ada kekeliruan untuk domain Staticaly, sehingga menyebabkan error di Lighthouse. Ternyata sekarang Staticaly menggunakan domain statically.io (double L), namun kita pun masih bisa menggunakan domain staticaly.com (single L). Tutorial di atas untuk penggunaan Favicon dengan Staticaly sudah saya betulkan.

Dan sebagai tambahan, kita bisa mengontrol lamanya cache untuk Favicon dengan Staticaly. Secara default, Staticaly memberikan cache 1 hari. Namun kita bisa memberikan parameter untuk menambah lama cache-nya dengan hitungan detik seperti berikut ini untuk cache 1 tahun (selama tidak clear cache).

<link href='https://cdn.statically.io/favicons/www.domainanda.com?cache=31556952' rel='icon' type='image/x-icon'/>

Dan postingan tentang cara untuk mengatasi leverage browser caching dari Favicon ini saya buat juga dengan audio visual yang bisa Anda tonton pada video berikut ini:

Semoga bermanfaat.