How to Change Favicon in Blogger {Updated}

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 Sizes of Favicon

Favicon is not limited to a single size. Different dimensions may be required depending on where they are displayed. When designing and uploading a favicon for your blogger blog, it is crucial to understand the different sizes that a favicon can be. Here is a breakdown of the standard 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 versions. It is the recommended dimension for uploading a favicon to 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: It 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 ensure that you back up your blogger template first.

Method 1: Using Blogger's Settings

1. Go 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. Go to your blogger dashboard.

2. Choose a blog (only if you have multiple blogs)

3. Navigate to the "Theme" section 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.

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!

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.