Add A Favicon To Your Blog At Blogger.com

Important note: Internet Explorer won't show your favicon using this method, but Firefox and all the other browsers should.

What is a Favicon?

A favicon is the little icon that you see on the far left-hand side of your browser bar, it also appears on the tab next to the title. Many people use their blogs logo for their favicon, but you can use whatever you'd like.

Just remember, there is only a small space to work with. So make sure that the image you decide to use doesn't have too much detail in it. If you want a great example, look at the favicon I've used here on i-Blogger.

As you can see, I used an orange "i" with a shadow on a white background. The image is very simple with not much detail at all, but I think it still looks great.

Adding a Favicon to your blog will make it look more professional. Not to mention, it will help set your blog apart from every other blog out there.

This is great news for bloggers that use Blogger.com. If you haven't noticed, blogs hosted with Blogger, by default, have a white "b" with an orange background as their favicon.

However, I can show you how to add your own favicon to your blog with just a few simple steps. I have done this for my 2 main blogs which are both hosted by blogger. Look at the image that I have chosen to use on my HCG Diet 411 Blog.

How do you add a favicon to your Blogger.com blog? 

1. First pick an image that you would like to use for your favicon. (I would recommend using a .png image)
    
2. Then go to your Blogger.com account and create a new post titled favicon. But DO NOT publish it!
    
3. Now without writing anything, use the "Insert Image" button and upload the image you would like to use for your favicon. (It's the icon that looks like a picture, located next to the button that says Link)
   
   
4. After that, click on the "Edit HTML" tab, which is located right next to the "Compose" tab above.
    
5. Now copy the image source code; it should look something like this...
   
   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFLqeIRZ_6agcLlRRB31zgyysZ7rGhgtpd2L4u_0lobDSPvhqMJL6XAeYgK58hI7Ome9v1F9TNWyKCt0A0bPQfHKHP9YcS5wz8j1pKSWmT0YGZ3a4PwkGCP1n3R60x2Isc3QHxjlSZb1x/s1600/favicon.PNG
    
6. Now using a text editor, like Notepad, take the code that you had just copied in Step-5 and replace the xxxxxxxxxx located in both parts of these tags below...
   
   <link href='xxxxxxxxxx' rel='shortcut icon'/>
   <link href='xxxxxxxxxx' rel='icon' type='image/png'/>
   
   It will look something like this...
   
   <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFLqeIRZ_6agcLlRRB31zgyysZ7rGhgtpd2L4u_0lobDSPvhqMJL6XAeYgK58hI7Ome9v1F9TNWyKCt0A0bPQfHKHP9YcS5wz8j1pKSWmT0YGZ3a4PwkGCP1n3R60x2Isc3QHxjlSZb1x/s1600/favicon.PNG' rel='shortcut icon'/>
   <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFLqeIRZ_6agcLlRRB31zgyysZ7rGhgtpd2L4u_0lobDSPvhqMJL6XAeYgK58hI7Ome9v1F9TNWyKCt0A0bPQfHKHP9YcS5wz8j1pKSWmT0YGZ3a4PwkGCP1n3R60x2Isc3QHxjlSZb1x/s1600/favicon.PNG' rel='icon' type='image/png'/>

For the next part go to your Dashboard at Blogger.com

1. First go into the "Layout" tab and click on "Edit HTML"
    
2. Then download a copy of your template before making any changes.
    
3. Next find the </head> HTML Tag and place the full code from Step-6 directly above it. (Hit the F3 key and type in </head>)
    
4. Now click "Preview" to make sure that it worked. (Remember, your favicon does not show up in Internet Explorer)
    
5. If it worked, click "Save Template" and your done.

Now if for some reason it won't let you preview your favicon, or it didn't show up in your tab or browser bar, go back and repeat the steps again to figure out what went wrong.

Do you think having a favicon makes your blog look more professional?

If you like this blog, please share it with the buttons below and consider subscribing to my Feed.