Add or Change Favicon on Blogger New Interface [Updated 2023]

Blogger - Add Favicon

Favicon is a tiny icon visible next to the site URL in the browser's address bar. By default, the blogger displays its own orange-colored icon as a favicon. By adding a customized favicon you make your blog look more impressive to your audience. 

Favicons are important for brand recognition. As was said in the introduction, they aid customers in remembering your website as they browse through several URLs. Therefore, favicons assist the user in quickly recognizing and accessing your website, whether through browsing history, search results, bookmarks, or a list of saved websites in your browser. Simply said, images are much more easily understood than words, which is why.

What is the ideal size of the Favicon image?

Normally, the size of the favicon is 16x16 pixels. However, sometimes they need to be bigger in size. 

When picking favicon dimensions, it is advisable to choose a square picture and a larger size of at least 96x96 pixels. Blogger would then automatically resize it and display the right size when appropriate. It is important to remember that the file size of the favicon must be under 100 KB.

Blogger has now recently launched a new interface. And as of now, this new Blogger interface only supports ICO files for favicons. You can still use PNG Favicons, keep reading for the workaround.

Before you follow the steps to change the Favicon, you must have the favicon ICO file saved on your computer or phone.

If you wish to use a standard JPEG or PNG image as a Favicon, then you can download and use the IcoFX tool or use an Online ICO converter to convert the image into ICO format. 

If your ICO favicon appears blurry, you could use a high-quality PNG Favicon by following the manual method (which we have discussed later in the article) or the script method shown in the link below.

How to Change Favicon in Blogger or Blogspot?

Blogger Interface
In Blogger's new interface, the option to add the Favicon is currently not appearing under Layout and it's now under Settings. 

Here are quick and easy steps to start:

1. Open the browser window and go to Use your Google account to login into the Blogger dashboard.

2. Then go to the Dashboard section as shown on the left. 
Click on Settings just below the Themes option. 

3. Now in the right side section, you will see the Favicon Option. Click on the “Favicon” link as shown in the below screenshot.

Once a new window opens, you will find the link to remove the current favicon or choose a favicon file stored on your device to change it. 

New Blogger Interface
4. Once you have selected a favicon image, click the Save button. Blogger will then automatically resize and save the chosen favicon image for your blog on its server.

The new interface is mobile responsive. So it helps when you are using Blogger on Mobile. Your new favicon will take some time to update on your blog. If the favicon added to your Blogger website is not updating, clear all history from the settings of the web browser and check again. The favicon should now be updated.

Manually add Favicon directly to the blogger HTML Theme

First, you need to back up your Blogger template: In the Blogger Dashboard, Click on ‘Theme’. Then click on the button with three dots.

Blogger Interface

Click on Backup
     Blogger Interface

Click on Download to save the offline copy of the backup.

Blogger Interface

Now perform the following steps to change a favicon of your Blogger blog:

1. Again click on the button with three dots. Tap on ‘Edit HTML’

Blogger Interface
Blogger Interface

2. Then use Ctrl + F to find '<head>'. Just after the head tag, you should insert the below link code. 

Add Favicon on Blogger Theme Head Tag

<link rel="shortcut icon" href="" type="image/x-icon"> 

In the above link code, replace the from 'href' URL "", with the web address or hostname of your hosting provider where your favicon file is saved. 

You can upload favicons to Google Drive (the file must be shared as 'with anyone who has the link' option) or on any image hosting websites and provide the URL. 

Use ‘favicon.ico’ as the name for your favicon file. Rename the file if it is saved on your hosting with some other name. 

3. Then click on the Save button.

Open your blog website in the browser and your newly added favicon should now be displayed in the address bar.
Protecting RSS Feed from content stealers
How to Protect RSS Feed From Evil Content Stealers
If this article was helpful, let us know your feedback in the comments. And also please subscribe to our blog

Share with your friends

Add your opinion
You can subscribe to our blog or follow us on social media to get notified about the new posts.
Text Content
Cookies used on the website!
We and our partners use cookies to personalize content and ads, to provide social media features and to analyze our traffic.
You consent to use of these cookies if you continue to use this website.
Learn more »