close sharing button

Add or Change Favicon on Blogger New Interface 2020

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 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 normal JPEG or PNG images as a favicon in ico format, then you can download and use the IcoFx tool to convert image into ico format.

New Blogger Interface
4. After you have selected a favicon image, click the Save button. Blogger will automatically resize and upload the selected 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="https://example.com/favicon.ico" type="image/x-icon"> 

In the above line replace href URL to "https://example.com/favicon.ico"  where example.com 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.


No comments:

Post a Comment