Blogspot: How To Change Or Add A Customized Favicon Into Blogger Blog

If you’re looking for ways to make your Blogspot blog unique and stand out from the crowd, customizing the Blogger favicon is a fast and easy way to do it. The familiar orange B Blogger favicon is kind of pretty. Don’t get me wrong, I like the orange B, but most of us like to have a little variety every once and a while. Changing the favicon is not permanent. It’s very easy to change and you can change it as often as you wish. If you miss having the orange B Blogger favicon, you can change it back any time you want.

Main steps to change Blogger favicon

Adding a customized favicon for your Blogspot blog requires 3 main steps.

1. Create your favicon either on your computer or on a free favicon generator website. (Some websites allow you to use their favicons free of charge.)
2. Host (store) your favicon online.
3. Copy & Paste HTML code with a link pointing to your favicon into the Blogspot blog’s HTML code.

On your computer: You can make a favicon from just about any picture you have. (Make sure it’s yours or you have permission to use and/or to alter it). The ideal size for a favicon is 16 x16 or 32 x 32 pixels. You will need to resize your picture to either of these sizes. You can use a free image editing software program such as Paint.NET which has a resize feature. Just open the file using the Paint.NET program and crop and/or resize it to either 16 x16 or 32 x32 pixels. A Useful Tip: You want your picture to fill as much as the space as possible, so that it will show up more clearly.

On a free favicon generator website: There are quite a few favicon generator sites on the Internet that provide a free service for you to create or use a favicon for free. I’ve used a few of these kind of websites, but the one I like best is a website called IconJ.com. If you want to checkout some of the other favicon generator sites before deciding if you want to take advantage of their services, you can do a search on Google using a search phrase such as, “favicon generator". Then just follow the instructions given on the website to create or use a favicon.

Once you have created your favicon (on your computer or online on a favicon generator website), you need to host (store) it online so that your favicon will appear on your Blogspot blog 24/7. You can use a photo sharing website like Photo Bucket or Picasa to host your favicon if you wish. Please note that some of these sites will not allow you to upload .ico files. This may be important to you because the Internet Explorer web browser will only display favicons that are file type .ico. Firefox and other browsers don’t have a problem displaying favicon files types like gif, png, jpeg, ico, etc. It seems, Internet Explorer is the only browser that has a problem displaying favicons on any other file type except .ico. If it doesn’t matter to you that people using the Internet Explorer web browser won’t see your favicon, then it’s perfectly fine to use photo sharing websites to host your non .ico favicons for use on your Blogspot blog.

If you’re using a free online website to create your favicon, you don’t have to upload anything. Once you’ve finished creating your favicon online it is automatically hosted (stored) there.

A quick note: Before making any changes to your Blogspot blog HTML code, please download a copy of it to your computer. You should do this as a backup in case any errors occur that you can’t clear.

To use your created favicon with your Blogspot blog, the next and final step is to copy the HTML code and Paste it with a link pointing to your favicon into the Blogspot blog’s HTML code under the Layout tab and Edit HTML. If you create your favicon using one of the free online favicon generator websites, they will provide you with all of the HTML code you need to copy and paste into the Blogspot blog. If you upload your favicon to Photo Bucket or another photo sharing website, they will provide you with a link of where your favicon is stored. You will need to paste your favicon link URL into the HTML code shown below.

<link href=’Your Favicon URL Goes Right Here’ rel=’shortcut icon’ type=’image/x-icon’/>

After you’ve inserted your favicon link URL into the HTML code shown above, then you need to copy the entire code and paste it between the <head> tags as shown in the screenshot. I pasted my code under the <title> tags which are below first <head> tag. The ending <head> tag is further down the page. You just need to be sure your HTML code is pasted BETWEEN the <head> tags.

After you’ve pasted the code in the appropriate place click “Preview" to see your favicon in the preview of your Blogspot blog. Click the “Save" button. Congratulations, you now have a customized favicon for your Blogspot blog. Remember, if you ever want the orange B Blogger favicon back, just remove the HTML code you pasted into your Blogspot blog and click the “Save” button.

Blogspot: How To Remove The Navbar From Blogger Blog
Blogspot: Give Blogger Blog Appearance Of A Website By Adding Pages
How To Embed Amazon aStore Into Blogger Blog
Free Blogger Templates With Bloggers New Template Designer

HubPages is a great place to use your writing skills on topics you love. Come share your expertise & make money at the same time. Find complete details here on how to get started publishing on HubPages.