Add Custom Favicon In Blogger – Change Default Blogger Favicon

How To Add Custom Favicon In Blogger – Change Default Blogger Favicon

Favicon is a small image of size 16x16 or 32x32 px which is used on the left side in the browser's address bar and it also appears in the browser tab as you can see it in the following image.

Why should we use Favicon for Blogger?

Answer! Generally it gives a professional look to your Blogger blogs. You already bookmarked many blogs or websites in your browser, and let you want to open any bookmarked page then you will go to the bookmarked menu page and try to find out the bookmarked page, but if the bookmarked page has its own Favicon then you would find it easily that is also an advantage to use the favicon for Blogger. You may also hide your Blogger navigation bar to make your blog more pretty. I am already using a custom Favicon for this blog, you can see it live.

I have seen many of the Blogger users have the default Favicon for their blogs as mention in above image. It is generally happen when you don't use the custom Favicon. We all know, Blogger is a big platform, and most users using Blogger platform for blogging. If you are using a custom Favicon for your Blogger then your blog can be easily determine into the user's bookmarked menu on the browsers.

Also Read Below Guideline

Add Related Posts To Blogger

What Is A Favicon?

Favicon is a type of small picture, which size is (16px * 16px). It is also known as Favorites icon. When we visit a website, we see a icon in our browser's address bar. This is known as favicon. Look at the ScreenShot Carefully.

Also Check Out Below Article!

Add Pages & Menu Tabs In Blogger

Important Of Custom Favicon

Blogger is a great blogging platform. You can easily able to create a blog on blogspot blogging platform. Blogger provide us free default template, blogger widget and also a default Favicon. This is an orange colored icon which is look ugly.

There are a thousand of blog (which is made in Blogspot platform) that contains this default Favicon. To make your blogger site more professional, you must need to add a custom one. Custom Favicon helps a website to increases the brand recognition. It is helps to get a better response from your blog reader. You will not see any of the pro bloggers, who are not using a custom icon on their blog. In blogging competition, you must need to branding your blog. Favicon plays an important role for branding your blog.

How To Create Favicon For Blogger / Blogs Or Websites?

You can create your custom Favicon using following Two Methods.

1. Using PicResize Website

1. First, you have to choose an image that you want to make it as a custom Favicon. If you want a part of any image, you should crop that part with equal size in width and height.

(Recommendation:- The blog logo is always better to use it as a Favicon.)

2. Now, we are going to make any image as our custom Favicon in this step. We just want to change the image size into 16x16 or 32x32 px. Absolutely, you can use your own image editor software like Photoshop.

If you don't have any image editor then you can use this online image editor, picresize.com, to create your first custom Favicon. Follow the steps.

Just follow the simple steps as mention in the above preview like abcd. Finally click on "I'm Done, Quick Resize My Picture!" and save this image to your desktop.

3. Now, your newly created Favicon is ready to become live on your blog. You just need to upload this Favicon on any image hosting site, and copy the direct link of your image. Don't have image hosting site? Don't worry! You are a Blogger user. You can host any file into your Blogger and easily find the direct link of that image to use it anywhere on the web. You can read this article to upload any image on Blogger for hosting & get image's direct link.

4. Once you have direct link, proceed the following steps.

2. Using Favicon.cc Website

This is another method to create your own custom Favicon using Favicon.cc website.

Here you can take an example of Favicon in below screenshot.

If you're good at in Photoshop, then create a favicon (16px * 16px).

If you're not good in Photoshop, don't worry.

1. Click on this link Favicon.cc.

2. You will see a dashboard then click Create new favicon button and create your favicon. You can able to using color, design etc.

3. After create a Favicon, click on Download favicon button. After downloading, you are complete to create a custom favicon.

Congratulations! You've created your Favicon successfully using both of the mentioned methods. Now, this is the time to add your Favicon to your blogger blog. So let's go ahead.

How To Add Custom Favicon To Blogger Blog?

Note:- You can use this single method to add your custom Favicon to your blogger blog for both of the above mentioned methods.

Sign into your Blogger Dashboard > Select your Blog > Layout > Click on 'Edit' under Favicon. See the below ScreenShot.

Now, click on browse, and select your custom Favicon. Finally, click on 'Save' button.

You're done it all.

Remember! It is an officially way to add a custom Favicon to your Blogger. However, older version of some browsers might show the default Favicon. If you also want to resolve this issue, proceed further more steps.

Sign into your Blogger Dashboard > Select your Blog > Template > Edit HTML, click anywhere on the Blogger code area. Now, press Ctrl + F to find ]]></b:skin> code, and just after this code paste the following code.

<link href='http://Your-favicon-url.png' rel='icon' type='image/png'/>

Never forget to replace the image link "http://Your-favicon-url.png"in the above code with your Favicon direct link.

Now, click on "save template".

Note:- I have used .png format for my Favicon so I have mentioned png in the type field in above code.

If you want animated Favicon for your blog you can skip the official way to add your Favicon although you go with this method and you can use .gif format instead of .png format. Make sure if you are using .gif format as an animated Favicon, change png to gif under the type field in above code.

Similarly, If you want .ico format as a Favicon, replace png with x-icon under the type field in above code.

Must Read Below Article!

Social Widgets For Blogger

Conclusion

Most of Blogger users don't know about custom Favicon option for their blog. Lets your visitors have open five different Blogger blogs on the browser, and navigating to other blogs. Now, he/she want to go in your blog's tab then he/she have to choose each tab till he/she reaches to your blog, but if you have a custom Favicon then your visitors can easily find out your blog by your unique Favicon. There are more advantages to use a custom Favicon that we have already discussed on this post. I recommend you to use it. If you have any doubt then feel free to ask me via comments. IF you like this article please share it to your friends and subscribe to our blog for latest updates.