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

Favicon is a small icon shown next to the site URL in the address bar. By default, the blogger displays its own orange-colored icon as a favicon. You can make your blog more impressive to your audience by using your own customized icon.  

Blogger - Add Favicon

Earlier the option to change the Favicon was appearing in Layout Options.

Blogger has now recently launched a new interface. But the option to add the Favicon is now not appearing under Layout. Here are simple steps to get going:

Blogger Interface

1. Open blogger and login to your Blogger account

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.

A new window will open, there you can remove the current favicon or choose a favicon image stored on your computer to change it. As of now this feature only supports ICO format files for favicons. 

If you want to use a normal JPEG or PNG image as a favicon in ICO format, 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.

New Blogger Interface
4. After you have selected a favicon image, click the Save button. Blogger will automatically resize and upload the chosen favicon image for your blog.

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 on your Blogger blog does not update, make sure you clear all history from the web browser and then check for it.

Manual method to add Favicon directly to the HTML

To get started, first, you need to backup your Blogger template: 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 a change favicon in 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 code. 

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

In the above line replace 'href' URL to ""  where is the web address or location where your favicon is stored (hosted). You can upload favicon to Google Drive (the file must be shared as 'with anyone who has the link' option) or on any free image hosting websites that support favicons upload. Use ‘favicon.ico’ as the name of your favicon file. In the above code, update the URL and suffix '/favicon.ico' to the updated URL.

3. Then click on the Save button.

Open your blog and your new favicon should be now displayed in the address bar.

If this article was helpful, let us know your feedback in the comments. And also please do 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 »