What is favicon for dummies?
Favicon is the smal square 16X16 logo/icon that show on the tab when you open a webpage. It helps in your page branding.
Is the Logo and the Favicon are the same?
No. The logo is usually large in size when compared to favicon. The logo will not have restrictions on the dimensions and depending on your need and plush UI you can change the size. Unlike Logo, Favicons are strict 16X16 size which is very small and understandable cause of their use.
I recommend to create a new favicon instead of using your webpage logo. Because in 16X16 resolution, we will not be able to identify it.
How to change it in Google Blogger?
Blogger by default shows the favicon of blogger [B]. However you can change it from the Layout section (if you want to do it through UI) or from Theme html.
Tip time:Blogger does not provide you hosting capability. That means you cannot have a private storage for the files used in your web page hosting. However, you can add images to your posts and these images will be stored to the cloud with web link. Now when you go to your post and can get the web link of the image.
Now goto your theme html in the blogger and find closing head tag </head>
Just above it, add below two lines and replace href parameter with your favicon weblink.
<link href="http://place-your-favicon-url-here" rel="icon"/>
<link href="http://place-your-favicon-url-here" rel="shortcut icon" type="image/x-icon" />
That's it. You got your favicon for your blog.
Favicon is the smal square 16X16 logo/icon that show on the tab when you open a webpage. It helps in your page branding.
Is the Logo and the Favicon are the same?
No. The logo is usually large in size when compared to favicon. The logo will not have restrictions on the dimensions and depending on your need and plush UI you can change the size. Unlike Logo, Favicons are strict 16X16 size which is very small and understandable cause of their use.
I recommend to create a new favicon instead of using your webpage logo. Because in 16X16 resolution, we will not be able to identify it.
How to change it in Google Blogger?
Blogger by default shows the favicon of blogger [B]. However you can change it from the Layout section (if you want to do it through UI) or from Theme html.
Tip time:Blogger does not provide you hosting capability. That means you cannot have a private storage for the files used in your web page hosting. However, you can add images to your posts and these images will be stored to the cloud with web link. Now when you go to your post and can get the web link of the image.
Now goto your theme html in the blogger and find closing head tag </head>
Just above it, add below two lines and replace href parameter with your favicon weblink.
<link href="http://place-your-favicon-url-here" rel="icon"/>
<link href="http://place-your-favicon-url-here" rel="shortcut icon" type="image/x-icon" />
That's it. You got your favicon for your blog.
Example:
1. Without my favicon
2. With my favicon
UPDATE: 11/05/2020
This update is specific to blogger. If you have observed, Google has released a new version of blogger few days back. The whole UI is now more clean and follow material design. But the Favicon widget is no longer in the Layout section and we cannot find it elsewhere in the blogger.
In this case, you can always use the above method for adding the Favicon to your site / blog. It is universal way of adding the favicon. However, if you want to configure favicon via Blogger standard widget, you do by following below steps:
1. Find and copy your blog ID. Login to your blogger.
1. Find and copy your blog ID. Login to your blogger.
Let us say you are on your posts page. Now in the URL, you can find the blog ID. Copy the blog ID.
eg: https://www.blogger.com/blog/posts/2025010913609532767
2. Copy the below URL of "Configure Favicon" blogger widget into your browser and update it with the blog ID copied in step-1
https://www.blogger.com/u/0/change-favicon.g?blogID=INPUT-YOUR-BLOG-ID-HERE&pli=1
eg: https://www.blogger.com/u/0/change-favicon.g?blogID=2025010913609532767&pli=1
3. That's it. Update your Favicon.
 |
| Update Favicon |
 |
| Favicon on Chrome Mobile |
Post a Comment
If you have any doubts, Please comment below and I will respond to you.