How to Display Custom Favicon in Blogger BlogIn this tutorial we will learn how to upload a custom favicon to blogger blog including its various features, limitations and web browsers supporting favicon file types.
We already have discussed the overall concept about various items and features provided by blogger blog, so let us start from the top of the blog.
Identifying my own blog has never been easier at the time when I opened two or more blogs or websites in different tabs of a single browser. I was worried about that Big B shown in the tab, bookmarks address bar and even in the history of my web browser.
But, it is so simple and easy with the feature called favicon which is the short from of Favourite Icon associated with a blog, web page/site.
Favourite icons are nothing but small brand recognition images commonly known as a URL icon, Website icon, tab icon, bookmark icon and shortcut icon which makes your blog unique and professional look among all other blogger blogs/sites. It was firstly introduced by Microsoft with the launch of Internet Explorer 5 in 1999.
Most of corporates/ organisations uses one or two letters for their website favourite icon viz. Google, AUBSP, Facebook, Yahoo, Blogger Blog, Bing etc. whereas some entities displays their company Logo as their site favicon like Microsoft, Ask, Apple, Twitter, YouTube and Baidu etc.
You may see my blog favicon in your almost all web browsers like Google Chrome, Internet Explorer, Firefox, Opera and Safari in various places viz. Address bar, Address bar drop down list, Tabs, Links bar, Bookmarks web history and brag to desktop.
Note that there are mainly three types of image files formats which supports favicon in all popular browsers and these are a) ICO, b) PNG and c) GIF. However, favicon with JPG and animated GIF file format will not be supported in Internet Explorer.
The most commonly favicon size is 16×16 pixels but you may also use 32×32, 48×48, or 64×64 pixels in size with 8, 24, or 32 bit in color depth.
Procedure for uploading Favicon:
Thus, if you also want to remove/ replace the default Blogger favicon (Big B) with your own custom favicon then please follow these simple steps:
First of all plan your favicon types and decide whether you will use logo, letters or different images for custom favicon. Then use that image to create a new square PNG/ GIF file type picture with the help of any image editor software e.g. Photoshop or MS Paint. Note that the size of the custom favicon must not be more than 100KB in size.
Therefore, there are only two things that must be kept in your mind viz. (i) Dimensions (Width and Height) of image should be same i.e. image must be squire; and (ii) Size of the image to be used for custom favicon must be less than 100KB.
Blogger will however, automatically convert any uploaded squire image (JPEG/PNG/GIF) with less than 100KB in size into 16×16 pixels PNG file with 1KB in size and therefore you need not bothered about it. But, the problem is that if you not create 16×16 pixels size image yourself then the favicon may not be look professionally.
However, if you are not able to create your professional looking custom favicon then please Contact Us and we will do it for you at a reasonable cost or it may be free of cost for first time customers.
After creating custom favicon for your blogger blog, visit your blog layout option and click on the Edit button of Favicon Widget shown at the top left corner just above Header Gadget.
Alternatively, you may use this URL link after replacing 123456789 with your blogger ID.
Now, upload the blogger custom favicon you have created in step-1 and save it. Finally, clear your web browser browsing cache data and open your blog to see whether the Big B has been replaced you’re your own custom favicon.