How to Change Favicon on Blogger

How to Change Favicon on Blogger

 How to Change Favicon on Blogger


A favicon is a small icon that appears next to your blog's title in the browser tab, bookmarks, and search results. It helps your blog stand out and create a professional impression on your visitors. If you are using Blogger, you might have noticed that it has a default favicon that looks like this: 🅱


However, you can easily change this favicon to your own custom one that matches your blog's theme and brand. In this blog post, I will show you how to change favicon on Blogger in two simple methods.


Method 1: Changing favicon on Blogger via Settings


This is the easiest and quickest way to change your favicon on Blogger. You just need to follow these steps:


1. Log into your Blogger dashboard and select the blog you want to change the favicon for.

2. Click on Settings and scroll down to the Basic section. You will see an option called Favicon under the Google Analytics property ID option.

3. Click on the Favicon option and a new tab will open. Here, you can choose a file from your computer to upload as your new favicon. Make sure the file is a square image that is less than 100 KB in size and has one of these formats: .jpeg, .png, .gif, or .ico.

4. After selecting the file, click on Save and wait for a few seconds for the changes to take effect.

5. Refresh your blog and check if your new favicon is showing up in the browser tab.


Method 2: Changing favicon on Blogger via Layout


This method is slightly more complicated but gives you more control over your favicon placement and appearance. You will need to edit some HTML code in your blog's theme to change the favicon on Blogger using this method. Here are the steps:


1. Log into your Blogger dashboard and select the blog you want to change the favicon for.

2. Click on Theme and then click on Edit HTML.

3. In the HTML editor, find the <head> tag and paste the following code right below it:


<!-- [ Favicon ]-->  

<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='120x120'/>  

<link expr:href='data:blog.blogspotFaviconUrl' rel='apple-touch-icon' sizes='152x152'/>  

<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>  

<link expr:href='data:blog.blogspotFaviconUrl' rel='shortcut icon' type='image/x-icon'/>


4. Replace data:blog.blogspotFaviconUrl with the URL of your custom favicon image that you have uploaded to an online image hosting service like Imgur or Google Photos. Make sure the URL starts with https:// and ends with .jpeg, .png, .gif, or .ico.

5. Save the changes and refresh your blog to see if your new favicon is showing up in the browser tab.


Conclusion


Changing favicon on Blogger is a simple way to make your blog more unique and professional. You can use either of the two methods described above to change your favicon on Blogger in a few minutes. I hope this blog post was helpful and informative for you. If you have any questions or feedback, please leave a comment below.

How to Change Favicon on Blogger

0 Comments