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 picture is open, please save the image on the computer.
2. Next, please use the favicon tobase64 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 + "favicon.ico"' rel='icon' type='image/x-icon'/>Then please change to the following:
<link href='URL BASE64 DARI LANGKAH 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 + "favicon.ico"' rel='icon' type='image/x-icon'/>2. Then please change to the following:
<link href='https://cdn.statically.io/favicons/www.domainanda.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'/>Maybe Usefull and please share his article ….