New Image Header & Favicon

New header/favicon today, and a renewed appreciation for the hard work of graphic artists. While the Blogger template I had before did look a little more professional, I think I did pretty well for an amateur (go go MS Paint!). I figured out how to make these modifications using a combination of guides and trial & error. I've compiled the information I found into the small guide below, I hope you find it useful.

Using an Image as a Header

I found most of the information on how to make this modification here. The first step is to remove the old header. Blogger doesn't allow you to remove it as a page element normally, so we'll have to change the template html first. From the Blogger dashboard go to Template > Edit HTML. Back up your template and then look for the following code:

<b:widget id='Header1' locked='true' title='YOURBLOG (Header)' type='Header'/>

Replace the word true with false and save your template. You can now remove your old header as you would any other page element. We will now replace it with the image header, which I recommend you use Photobucket to host. Go to Template > Page Elements, and create a new Javascript/html page element, then insert the following code:

<a href="YOUR BLOG'S URL"><img src="YOUR NEW IMAGE HEADER'S URL" /></a>

Move this new Page Element over to where your old header used to be and hit the "Save" button. However, depending on your template, you may notice that you still have a small piece of your old header above your image. To remove this, delete the following line of code from your template's html:

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'/></div>

Using a Favicon with Blogger

See that little picture next to the "http" in the address bar? That's called a Favicon, and by default Blogger gives you an orange one with a letter B. If you'd like to change this to your own icon, first head on over to FavIcon Generator and save the .ico file it generates. Usually, a webamaster would host this on their own site, but since you can't do this on Blogger we'll have to host it externally. Since Photobucket doesn't let you upload .ico files, so I recommend you use ImageDip. Next we're going to edit the html template, so once again remember to back up your template before modifying it. Look for the following line:

<title><data:blog.pageTitle/></title>

Once you've found this line, add the following code one line above it:

<link rel="shortcut icon" href="Your .ico file's URL" />

Save your template and you're done. Thanks to Tips for New Bloggers and My Tech Life for information on how to do this.