I do it mostly like the one above, but for accessibility reasons, I need to support the possibility of images being disabled in the browser. So, rather than indent the text from the link off the page, I cover it by absolutely positioning the <span><a> and using z-index to place it above the link text in the stacking order.
The price is one empty <span>, but I'm willing to have it there for something as important as an <h1>.
<h1 id="logo">
<a href="">Stack Overflow<span></span></a>
</h1>
#logo a {
position:relative;
display:block;
width:[image width];
height:[image height]; }
#logo a span {
display:block;
position:absolute;
width:100%;
height:100%;
background:#ffffff url(image.png) no-repeat left top;
z-index:100; /* Places <span> on top of <a> text */ }