Customizing Your Blogger and WordPress Blog Favicon

I have an exciting tip to share with you that takes you back to an earlier post and video tip that I published regarding branding your site with Favicons. And in a first, I am posting a video on this public blog that was created for my newsletter subscribers. Just scroll to the bottom of the post to watch the video. You can join my free newsletter and receive free weekly video tips for authors by signing up today. You can even see another sample video before you sign up. Here's the sign up link:

http://marketingtipsforauthors.com/videotips.html

Back on March 6th, I posted an article entitled, Branding Tips: Creating Favicons and Custom Error Pages. It discussed how you could create that small, 16X16 pixel icon the shows up next to a URL address form on browsers. If you are reading this on my blog, you can see the red box with the white letters TIPS. That is my custom favicon I added to my website and my blog. (You may also have noticed that I finally got around to pointing my Blogger blog to my own domain. No more yada-yada-yada.blogspot.com :)

When I originally posted the article on creating custom favicons, I did not know that you could replace that orange box with the white B that Blogger puts on all blogs. Chances are, if you have a Blogger blog, you have the orange and white B as your favicon. After reading this, you can have your own favicon on your blog, just as I do now. And for those WordPress bloggers, I have a link for you as well at the end of this post.

Here's what you do. It involves messing with your template's HTML, so as always, be careful. You may even want to paste your template's HTML code on a notepad before you make the change just in case the unthinkable happens and you mess up. It's an easy modification, so I don't want to scare you unduly, but you always need to be careful when modifying your template's HTML. That said, here are your steps:

1. First, you will need to create a favicon. Read my previous post about generating a favicon or visit Dynamic Drive's page for a simple tool on how to do this. They even give easy to follow instructions on uploading your new favicon that they generate for you to your web site (Sadly, they give no instructions for uploading your new favicon to your Blogger blog. But, happily, I do!)

2. Next, you need to upload your new favicon.ico file to a web server since blogger won't let you put this in the root directory, where a favicon really needs to be in order to work. If you have a favicon on your personal web page that you want to also use on your blogger blog, like I do, then you can skip this step. If you don't have a website to upload a favicon to, then you need to search the net to find a free site that you can open an account to upload files to. A better option would be to ask a friend if they would mind if you could upload a very tiny file to their web server that you will be using for your favicon.

3. Once your favicon is loaded on a web page, copy it's link. For example, the link to my favicon is:

http://www.MarketingTipsForAuthors.com/favicon.ico

4. Sign into your Blogger dashboard, click on the Layout Tab, then click on Edit HTML. Don't be intimidated by the code that comes up (but here is a good time to copy the whole code and place it on a note pad if you are nervous. If you accidentally delete something and save over it, I don't have the tech knowledge to help you. I will probably say, "Paste the code that you copied to your notepad back into the HTML form on the Blogger dashboard.")

OK, once you are ready, you will find the following line somewhere toward the top of the page (NOTE: if you are looking at this article on a syndicated feed, you may have to visit my original blog post to see these HTML codes)

a. Find this code in the template:
<title><data:blog.pageTitle/></title>

b. Update the template. Paste this code below the code you just located. You will want to replace YOUR FAVICON'S URL with the URL of your Favicon. Make sure you do not delete the two single quote marks on eather side of YOUR FAVICON'S URL:
<link href='YOUR FAVICON'S URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Here is what mine looks like:
<link href='http://www.MarketingTipsForAuthors.com/favicon.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

5. Save the template and refresh the page. You should see your favicon on your Blogger blog now.

Pretty cool, isn't it?


A note to WordPress users. I have found how you can change the WordPress W favicon to your personal favicon if you have the version of WordPress that you upload to your server. If you have the version of WordPress.com that's hosted on WP's servers, I think you are out of luck-- at least for now. If someone knows a way to modify WordPress.com's favicon, please let me know. If you do all the blog maintenance for your blog and you don't know what version you are using, you are probably using the one you cannot update. Sorry.

However, if you have the WordPress software on your server, here is a link to an article that shows you how to do it. Since I do not have the software on my server, I can not test the method as I have for the Blogger modification, so you are on your own. Take a look at the comments, however. Looks like it's a good place to get instructions:

http://www.computer-realm.net/how-to-change-your-wordpress-favicon/


Again, here is the link to my earlier article on favicons:

Branding Tips: Creating Favicons and Custom Error Pages.

And for the first time, I am posting one of my video tips that subscribers receive e-mailed to them each week, on my blog. No surprise, it's the one on Favicons. It won't help you with today's tip, but it will walk you through the simple way to create a favicon and walk you through the process of uploading it to your site.

FYI.. This video was created with an open source video screen capture program called CamStudio. While it is free, it has no editing capabilities. I have since moved to Camtasia to produce all my video tips. Also, my mic was picking up clicking sounds that I did not pick up until after the video was produced. Other than that, you should have no problems with the video. A special thanks to all my video subscribers who have taken this journey with me as I create better and better quality videos the more I learn the new software.


Branding: Adding A Favicon To Your Website




I hope you enjoyed this article on customizing favicons on your blogger account. If you liked this video tip, why not sign up for my Video Marketing Tips For Authors newsletter? You get video tips e-mailed to you each week, and best of all they're free! Follow the link below to sign up and to even watch another sample video:

http://marketingtipsforauthors.com/videotips.html


Tony Eldridge