Add Custom Favicon In Blogger | Create Custom Favicon In Blogspot

Description: Create your own Custom Favicon for Blogger Blogs Online. Easy way to add even Animated Favicon to Blogger or Blogspot Blogs.

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.

add favicon in blogger blogspot
Create Custom Favicon & add it to Blogger Blogs

Related Posts:
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.

This post has two parts.

1.) How to create a custom Favicon for Blogger?
2.) How to add Custom Favicon on Blogger Blogs?

Therefore, first I proceed to create a custom Favicon for Blogger.

How to Create Favicon For Blogger/Blogs or Websites

  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,,  to create your first custom Favicon. Follow the steps.

    how to create custom favicon online

    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.

How to Add Custom Favicon To Blogger Blog

Sign into your Blogger Dashboard -> Select your Blog -> Layout -> Click on 'Edit' under Favicon

adding favicon to blogger official

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

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'/>

Don't forget to replace the image link in the above code with your Favicon direct link. Now, save the template.
I have used .png format for our 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 -> 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.


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 advantage 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.

Like Us on Social Media
Share this article
Copyright © 2015 • All Rights Reserved.
Powered by Blogger
back to top