A favicon (favorite icon) is a small image or icon that represents a website. It is displayed in the browser’s tab, bookmarks and search results to make it easy for visitors to identify a website at a glance. All blogspot websites have a default favicon. But having a custom favicon not only makes a blog look more professional but also helps to recognize a brand. In this post, I will show you how to change favicon in blogger site.
Different Size of Favicon
Favicon is not limited to a single size. Different dimensions may be required depending on where they are displayed. So, when designing and uploading a favicon on your blogspot blog, it is crucial to understand the different sizes that favicon can be. Here is a breakdown of the common favicon sizes and where they are typically used:
- 16×16 pixels: The most common favicon size for web browsers. It is usually displayed on the browser tabs and bookmarks.
- 32×32 pixels: It is a slightly larger favicon and used for desktop shortcuts. Many browsers use this size to provide better clarity on high dpi screens.
- 48×48 pixels: This dimension is used for desktop and quick launch bar icons in the older windows version. It is the recommended dimension for uploading a favicon in a blogger website.
- 180×180 pixels: This is the dimension used for the icon when apple users add a website to their home screen.
- 192×192 pixels: This is another dimension used when android users pin a website on the home screen.
How to Change Favicon in Blogger
Here are two methods for changing the default blogger favicon. If you choose to follow Method 2, please make sure to back up your blogger template first.
Method 1: Using Blogger’s Setting
1. Log in to your blogger dashboard.
2. Choose a blog (only if you have multiple blogs)
3. Click on the “Settings” in the left sidebar.
4. Locate and click on the “Favicon” option, usually near the top of the page.
5. Upload the new favicon.
6. Preview and click “Save” to update blogger favicon.
Method 2: Editing Template HTML
1. Log in to your blogger dashboard.
2. Choose a blog (only if you have multiple blogs)
3. Go to “Theme” from the left sidebar.
4. Find the down arrow on the “Customize” button and tap on it. Then click on the “Edit HTML” option.
5. Press Ctrl + F or Command + F to find the below code on your blogger template.
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>6. Replace the existing code with the following code and add favicon URLs on href attribute.
<link href='YOUR FAVICON URL' rel='icon'/>
<link href='YOUR FAVICON URL' rel='shortcut icon' type='image/x-icon'/>7. Click on the “Save” icon to save your changes.
The Bottom Line
Changing the default favicon of your blogger site is a simple yet effective way to personalize your blog’s branding. By following these steps, you can upload a unique favicon that represents your blog’s identity. So, go ahead and make your blog truly yours with a custom favicon today!
For more Blogger tips and tricks, stay tuned to our blog!
Frequently Asked Questions
Q: I changed my favicon, but I still see the old one. What should I do?
A: Sometimes your browser caches the old favicon. To resolve this, clear your browser’s cache. Once you have cleared the cache, reload your blog and the updated favicon should now be visible.
