Favicon is the short form of a favorite icon and it is also known as a shortcut icon. Favicon is not an important part of SEO (Search Engine Optimization) but it is highly important for your business branding. Blogger has a default favicon for every website hosted on BlogSpot. But the default favicon doesn't highlight your site and that's why you should add your custom favicon in BlogSpot. Many users are using BlogSpot but they don't know how to add a custom favicon in BlogSpot? So, In this article, I am going to explain more about favicon and how you can add your favicon very easily. Let's start it.
What Is A Favicon?
Favicon is a small-sized icon that highlights a brand to its users. Typically, Favicon is made with a brand logo or using the initial letter of a brand name. Favicon does not improve the SEO score of a brand but it attracts its users.
Where Is Favicon Used?
Generally, Favicon is used next to anything that identifies your brand. Favicon is mostly used in bookmarks, browser tabs, search results, history results, search bars and toolbar apps.
Why Favicon Is Important?
Creating a favicon is an easy task but it is very effective for your business branding. This small icon helps to identify your brand to your web users. A good favicon can improve your brand popularity because good favicons are always eye-catching.
Different Sizes Favicon For Different Browsers?
Generally, A 16px square .ico formated favicon is recommended because this type of favicon is widely used across all browsers. Also, you can follow the below guide to make a favicon for every possible browser.
- 16px: Generally use in all browsers, could be displayed in the address bar, tabs and bookmarks
- 24px: Pinned Site in Internet Explorer 9
- 32px: New tab page in Internet Explorer and Safari’s Read Later sidebar
- 57px: Standard iOS home screen
- 72px: iPad home screen icon
- 96px: Favicon used by the Google TV platform
- 114px: iPhone 4+ home screen icon
- 128px: Chrome Web Store
- 195px: Opera Speed Dial
Which types of formate are allowed for a Favicon?
There are many types of formate are available to make a favicon such as Windows ICO, PNG, SVG, JPG, etc. Let's introduce these formats:
- Windows ICO: The ICO formatted favicon is the most used and widely supported file format for a favicon. ICO files contain multiple resolutions and bit depths which is very useful and works very well for Windows. It is highly recommended to use a .ico formatted favicon for your brand.
- PNG: A PNG formatted icon is very useful and does not require any special tools to make a favicon with this format. PNG makes the file size as small as possible and also supports alpha transparency. Remember that, Internet Explorer does not support a PNG file for a favicon, it only supports .ico favicon.
- SVG: Favicons that are made with SVG is normally used and supported by Opera browsers.
- JPG: JPG does not provide high-quality resolution like PNG and while you make a favicon with this format, it loses all of its benefits due to the small size of your favicon.
How to change the favicon in blogger?
There are only two ways available to change a default Blogger favicon. Please, choose one of the methods that you like and follow the instruction to add your custom favicon in your BlogSpot blog.
Method 1 - Change Favicon In Blogger By Settings
- Log in to your Blogger dashboard
- Click on Settings and find Favicon in the basic settings section
- Click on the Favicon link and you will wonder with a new browser tab
- Now, Click on the Browse button to upload your favicon
- Finally, Click on the Save button. Wow! You are done.
Method 2 - Change Favicon In Blogger By Template Editing
This method is a little bit harder rather than the first one. In this method, you need to edit your current template to change your favicon. Don't worry! If you follow the below steps, it will be very easy for you. Here are the steps to change the favicon by editing your template:
- Log in to your Blogger dashboard
- Go to Theme and then click on the down arrow button which is available next to the Customize button and then click on the Edit HTML link.
- Search for <head> tag and paste the below code just below <head> tag.
- Finally click on the Save button and you are done.
Code:
<link href='YOUR FAVICON URL' rel='icon'/>
<link href='YOUR FAVICON URL' rel='shortcut icon' type='image/x-icon'/>Warning!
Make sure you upload a square image that’s less than 100KB.
Can't see your favicon in BlogSpot?
You may face a problem after successfully change your favicon and the problem is browser does not show the updated favicon. It usually happens because of browser caching features. To solve this issue you need to clear your browser cache and refresh your blog. Wow! The problem is solved.
Wrapping Up
Though favicon is a small thing, it has huge benefits for your web users. So, don't hesitate to make and add your custom brand favicon to your blog. Making a favicon is not hard, so do it for your blog and highlight your brand to your web users.
Finally, I hope you liked this article. Don't hesitate to ask me if you found any errors while you following my tutorial. And follow @wikipoka on the social media platform to get updates from this blog.
Leave a Comment