https://www.twistblogg.com/favicon.ico
is the location for our website's favicon). You might have noticed favicon is a .ico format image file. Does that mean other image formats like png, jpeg, gif not supported for favicon? Most modern browsers support these formats, however browsers like internet explorer only supports .ico as favicon. Therefore, it is a good practice to include all image formats. Do people still use IE? -- I'll leave that upto you.
At minimum, favicons need to be 16x16 pixels. Though I strongly suggest to include 32x32 and 48x48 versions as well. That way, if users drag their bookmarks to desktop or bookmark from mobile, the favicon will stretch, giving it a clean look.
Now, you have some information on favicon, let me go straight to the problem faced by bloggers with favicon. It was few days back, I was analyzing my blog in GTMetrix and I saw leverage browser caching problem had great impact on my blog Pagespeed. When I clicked the tab, there was an issue: Leverage Browser Caching For Favicon (1 Day).
So, what is leveraging browser caching? To leverage browser caching means to inform browsers for how long to store images, css and js locally. A small caching time means the file is stored for short span of time locally. Also, small caching time ensures latest updates are visible quickly.
In this tutorial, I'll help you to overcome favicon leverage browser caching issue in blogger. In case, you want to create a brand new favicon with different dimensions, stick with me, else you can skip this section.
Recommended Read: How to optimize font awesome icons to improve web performance?
How to create a beautiful favicon for my blog (different dimensions)?
First, I'll teach you on how to create beautiful favicons for your blogger blog. All steps are straight forward.- Go to Favicon.io.
- You'll see options like Generate from Text, Generate from Image, Generate from Emoji and others. I'll be selecting Generate from Text option.
- Type the text and you can see it on Preview as well.
- Once done, Download the file and extract it in your system.
How to solve favicon leverage browser caching issue in blogger?
The solution is simple. We will convert favicon to Base64 format. Why base64? Because favicons are tiny image files and encoding with base64 formats can reduce HTTP Request. There are downsides too: Learn more here about base64 format.In this process, we will upload a .png format for supported browsers and .ico for unsupported ones. Be sure you have both formats with you.
- Go to base64-image.de.
- Either drag or drop your .png favicon or press "Or Click Here".
- Once conversion is made, you can see a successful green color. Click on Show code and leave the browser tab open for sometime.
- Now, go to Blogger.com > Theme > Edit HTML and Search for favicon.ico. If you found matching query, delete that otherwise skip this step. Don't forget to backup your whole blog before proceeding.
- Search for
<head>and paste the following code below it.
<link href='replace_with_your_base64_address' rel='icon' type='image/x-icon'/>Don't forget to change the address with your base64 code (step 3).
Also Read: 21 Tested Ways To Speed Blog Loading time
How to add favicon bookmark icon for apple users and mobile users?
This is an optional step. In the file you downloaded, while creating favicon for your website, there are different formats available in different dimensions. We will firstly upload them and call them later.
To upload these files, go to blogger.com > Post > New post > upload all those images manually by hitting the image icon in blogger editor. Right click and open all images in new tab. We will need the address later. Hit the "Save" button and press "Close". Do not publish that post.
Paste the following code below
<head>
. Change the image_address with respective addresses opened in new tabs earlier, and you're good to hit the Save button.<link href='image_address_180*180' rel='apple-touch-icon' sizes='180x180'/>
<link href='image_address_192*192' rel='icon' sizes='192x192' type='image/png'/>
<link href='image_address_ico_format' rel='shortcut icon'/>
<link href='image_address_ico_format' rel='icon'/>
<link href='image_address_ico_format' rel='Shortcut Icon' type='image/x-icon'/>It might take some time for google to fetch new favicon. Now, analyze your site in GTMetrix and notice leverage browser caching for favicon is gone. In case, you want to learn more on how to speed up your blog, browse these articles.