How to Add Custom Favicon to Your Blogger Blog




If you want to add favicon to your blogger blog and you don't know how to add in blogger blog then you are in the right place in this lesson we will teach you How to Add Favicon in Blogger Blog.

First of all we have to read some basic information about "Favicon", Favicon which also called shortcut icon, website icon URL icon etc.. The favicon is mostly displayed on the web browser title bar and on some browsers it shows in the address bar, its like identity of your website favicon is very helpful to get user attention.

Blogger.com has its own default favicon icon which you can find it on your browser title bar, You can also use custom favicon icon which could be your blog logo design photo or any photo.

You can also build your own favicon in any photo editing software like Photoshop,Paint.net etc., but keep one thing in your mind, try to make it professional and unique, once you make your favicon image then resize image in this size (16x16) or (32x32) or (48x28) and then save it in "your-image. png" file.

Once you make your Favicon then its time to add it to your blogger blog, there are two methods to add favicon in blogger blog and we will cover both of the methods.


1 Method "Adding Favicon in Layout"

In order to add favicon in blogger layout, log in to your blogger account then go to Blogger>Layout>Favicon click on edit then a window will open up then browse your image and then click on save.






2 Method "Adding Favicon Manually"

First of all we have to upload the favicon image to our blogger blog, In order to do that first add a new post, then upload image to your post then right click on your favicon image and click on copy link location and leave your post as draft.







And now we have to add link tag > in our HTML head tag there to go to > Blogger > Template > Edit HTML and then a code editor will be open, click anywhere in the editor box and press CTRL + F then a little search box will appear on the top right corner of the editor box, then search for the following code.

<head>



Once you find head tag, then paste the following code and replace the URL with your "your image URL" which you copied from your draft post. Note : Paste Your Favicon Image URL in href

<link rel="icon" type="image/png" href="Paste your Favicon image URL here">


Once you paste the above code and replaced the href URL then save your template and your done!
Share and like/follow us on Facebook Twitter
 

Previous Post Next Post