Overcoming Browser Caching Leverage for Favicon.ico - Favicon is the main icon of a website that appears on the left side of the browser tab and is the logo of the web. A favicon can also be known as a shortcut icon, website icon, URL icon, or bookmark icon.

This favicon generally uses an image with the extension .ico with a fairly small size that is 16x16 pixels.

Even though the size is quite small, the picture is still a picture. And this is often a problem in the blog loading speed measuring tool that is browser caching leverage from Favicon.ico.

To overcome the problem of Favicon.ico's browser caching leverage, please follow the following tricks.

Using Base64

One way to overcome the browser caching leverage of Favicon.ico is to use a favicon with base64, here's how:

  1. Please download a picture of your current blog favicon. Please right-click on your blog page then select View source page. Then find the code like this: 
      <link href='https://www.domainanda.com/favicon.ico' rel='icon' type='image/x-icon'/>

    Please click the blue URL, after the favicon image is open, please save the image on the computer.
  2. Next, please use the favicon to base64 conversion tool , upload the favicon image that was saved on the computer then select URI Data - data: content / type; base64 for the Output Format.
  3. After that, go to the HTML edit blog then look for the code as follows: 
      <link expr:href='data:blog.canonicalHomepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>

    Then please change to the following: 
      <link href=' URL BASE64 FROM STEP 2' rel='icon' type='image/x-icon'/>

    Please replace the URL BASE64 DARI LANGKAH 2 code URL BASE64 DARI LANGKAH 2 with the base64 URL of the favicon that was converted in step 2.

Now please check your blog with the blog loading speed measuring tool that you normally use. Has the browser caching notification from Favicon.ico disappeared?

Using Staticaly

Base64 usually produces a URL that is long enough for an image, which of course will affect the HTML size of the blog.

If you are not comfortable with a URL that is long enough from base64, you can overcome this browser caching leverage from Favicon.ico in a more simple way, namely by using Staticaly , the way is as follows:

  1. Please enter the HTML blog edit then look for the code as follows: 
      <link expr:href='data:blog.canonicalHomepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
  2. Then please change to the following: 
      <link href='https://cdn.statically.io/favicons/ www.yourdomain.com' rel='icon' type='image/x-icon'/>

    Please replace the code www.domainanda.com with your blog's domain name, it can also be without www .
  3. Done, pretty simple right?

Now please check your blog with the blog loading speed measuring tool that you normally use. Has the browser caching notification from Favicon.ico disappeared?

UPDATE:

It turns out that there was a mistake for the Staticaly domain above, which caused an error at Lighthouse. It turns out that now Staticaly uses the statically.io (double L) domain, but we can still use the staticaly.com domain (single L). I have corrected the above tutorial for using Favicon with Staticaly.

And in addition, we can control the length of cache for Favicon with Staticaly. By default, Staticaly provides 1 day cache. But we can provide parameters to increase the cache time by seconds such as the following for 1 year cache (as long as it is not clear cache). 

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

And this post about how to overcome the leverage of browser caching from Favicon is also made with audio visual that you can watch in the following video:

May be useful.


Overcoming Browser Caching Leverage for Favicon.ico