Personalize Your Blogger.com Favicon

I was wondering the other day, if could change my Favicon on blogger. I was please to find out I could with a post over at Happy Blogging.  His Post was fairly clear, but thought that I'd do one with my spin on it.  As Intend to do a few Blogger related posts in the near future.

It's fairly simple if you know your way around in Blogger and HTML. If not, I hope this post helps.

First, you're going to want to have a favicon already posted somewhere on the web.  Preferably on a site that is yours. :)  You CAN easily upload the icon in .PNG format to a Blogger Post, as blogger won't allow you to upload a .ICO file, the Microsoft extension name for an icon. If you have a Google Sites account, you can upload your image there instead of Blogger. But for the sake of this post, lest say your image is located at:

http://linuxnuts.org/files/wanker.png

With your favorite text editor, well, ok, actually I don't care if its YOUR favorite text editor, but with a text editor that won't "hold" all the HTML code and formating, if you were to cut and paste to it. Replace the "real" place your image is where the {image url} is in the code below.  I find that the Find and Replace function comes in real handy at this point in my Text Editor. 

The HTML Link Code:

<link href='{image url}' rel='shortcut icon'/>
<link href='{image url}' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='{image url}' rel='icon'/>
<link href='{image url}' rel='icon' type='image/vnd.microsoft.icon'/>

So this should give you something like this in your text editor:

<link href='http://linuxnuts.org/files/wanker.png' rel='shortcut icon'/>
<link href='http://linuxnuts.org/files/wanker.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='http://linuxnuts.org/files/wanker.png' rel='icon'/>
<link href='http://linuxnuts.org/files/wanker.png' rel='icon' type='image/vnd.microsoft.icon'/>


Oh, and Happy Blogger also has a Favicon Link Generator that you can use.

Then, you'll want to go to your blogger dash board, such as the one displayed below. Dashboard > Design > Edit HTML 

I do a CTRL-F to search for the </head> tag  while I'm in Chrome and place the code directly above it. As in the example. 

And that will give the results like I've got here on Pimping the Penguin. No more Orange Blogger Icon for your Blog.  

If you Change your template, you stand a chance of loosing your modifications, so keep that in mind. 

Blog on....!