Ultimate site logo

To have a good site logo is important. It’s one of the things that distinguish your web site from everybody else’s. It’s also a design element that exists on all pages within your site. Naturally you want it to be good looking, but at the same time it needs to be accessible and also search engine friendly. To do this properly there are some techniques worth knowing. In this article I will show you the approach I’ve taken on my own blog.

In my opinion a good site logo have these characteristics:

  • It’s search engine optimized
    Score high on Google
  • It’s clickable
    Support the strong convention that a click on the site logo takes you to the homepage
  • It’s accessible
    Enable those with screenreaders or images turned off to read the “logo”
  • It looks good
    A good looking logo is important to build your brand.

If you’re the impatient kind you can watch the example page right away. For an explanation of how it’s done, read on!

The HTML

I’m taking a bottom-up approach to marking this up. That is, I start with some basic HTML to render a simple text link inside a <h1>. I then build upon this with the help of CSS, placing the logo image on top of the text. By doing this I enable all users, even those that use screen readers or have images disabled, to view the sitename while still letting those with able browsers to see the logo image instead.

This approach is often referred to as progressive enhancement and is an important concept when developing web sites according to web standards. The beauty of this approach is that it’s also an effective way to optimize the page for search engines.

To use <h1> or not

In my opinion <h1> is a suitable element for the site logo since it indicates that it’s the most important heading of the page. When search engines indexes pages they give more weight to text inside a <h1> than for example text inside <div> or <p>.

I know that some people disagrees with this and regards the <h1> reserved for the individual documents most prominent heading and not the web sites. However in my approach <h1> is used for the site name and <h2> is used for the documents most prominent heading. If you disagree with me, you can still use this approach by exchanging the <h1> for another element.

Adding a link

I also want the site logo to be clickable. This is one of the most wide spread conventions in web design, and most users expect the site logo to take them to the homepage when they click it. To accommodate this I make the heading a link which points to the homepage.

I have wrapped the <h1> inside a <div> with the id “branding”. Later in the CSS I will use this id as a hook for styling what’s inside.

To get this solution to work properly I’m also forced to use an extra set of <span> inside the <a>. I will use this later on to insert the logo image over the text. Even though I’m not very keen on adding extraneous HTML to the document, this seems like a small trade-off to get this to work properly.

<div id="branding">
<h1><a href="/"><span></span>In usability we trust</a></h1>
</div>

At this point the site logo sure is accessible and SEO friendly but it doesn’t look very appealing. Soon we’re gonna change all that with some styling.

Styling it

I like to keep the HTML lean, therefor I want to have as few CSS selectors as possible. In this case I only have one, the id="branding" on the <div>. I use this hook in my CSS to access the header like this: #branding h1. What I tell the CSS is that I want to access the heading that’s inside the element with the id “branding”.

Styling the heading

I start off by giving the heading a relative position. The reason I’m doing this is that I want to position the containing elements using absolute positioning. Elements with an absolute position is positioned in relation to the nearest containing element with a relative position. If none is available it’s positioned relative to the browsers viewport. So in order to position the site logo inside the containing <div> I have to do assign it a relative position.

I then remove the margin from the heading and give it the same dimensions as my logo image so that it will fit nicely inside it.

#branding h1 {
position: relative;
margin: 0;
width: 461px;
height: 125px;
}

Styling the link

The next step is to style the link. I want the link to be invisible yet clickable. This is done by giving it an absolute position. This is so that I can stack the link and the <span> (which will contain the logo image) on each other using z-index. An element with an absolute position implicitly have a z-index of 0. Therefor I don’t have to explicitly define it in the CSS for the link since I want it to have z-index: 0;.

I also want to ensure that the link stretches the whole area so it’s possible to click anywhere at the logo and I therefor give it a width and height of 100%.

#branding h1 a {
position: absolute;
width: 100%;
height: 100%;
}

Styling the <span>

The last step is to position the <span> on top of the link and display the logo image in it. This is done in three steps.

  1. Give it an absolute position and a z-index of 1. Thereby placing it on top of the link.
  2. Ensure that it covers the whole area by giving it a width and height of 100%.
  3. Assign the logo image as the background. and also add a white background color so that the text doesn’t shine through before the images has loaded.

Edit: I’ve removed the background color because it prevented the text to display if the user have images turned off. The trade-off is that there can be an occasional flicker where the text shines through when hovering the first time if the hover-image hasn’t loaded yet.

#branding h1 span {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: url(img/logo.png) no-repeat;
}

Now the site logo looks a lot nicer. The ugly text is gone and is replaced with the site logo graphics. Still if you turn off the stylesheet you can read the heading and click it to enter the homepage.

Adding a Hover effect

To add some extra flare to the site logo and to provide the user with an additional hint that it’s clickable, you can add a hover effect. In this case it’s done by assigning the pseudo-class :hover to the link. When the user points at the logo the background image is altered.

#branding h1 a:hover span {
background-image: url(img/logo_hover.png);
}

This is what it will look like when the user hovers with the cursor over it.

Tweaks to make it work in IE6 and IE7

It doesn’t come as a big suprise that Internet Explorer needs some special treatment in order for this to work properly. Frankly I wouldn’t have expected anything else! ;-)

A good practice is to place these “hacks” in a separate file and only feed it to IE using conditional comments. Conditional comments is a proprietary feature in IE that allow us to target specific versions of IE. All other browsers treat it just like any other HTML comment and ignores what’s inside it.

<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->

This code snippet feeds the ie.css to versions of IE that is lower than 8 (lt stands for less than). If you just want to feed the file to IE6, just replace the 8 with a 7. More information on conditional comments.

Fixing the cursor

A problem that occurs in both IE 6 and 7 is that the cursor doesn’t change from an arrow to a hand when it hovers over the logo. That is easily fixed with this code snippet:

#branding h1 span {
cursor: hand;
}

Fixing the hover effect

If you added the hover effect you will need this tweak to get it to work properly in IE6. Otherwise you can just discard it.

The problem occurs when the user have hovered with the cursor over the logo and then remove it. For some reason the image doesn’t go back to it’s original state. I found that setting border: none on the link, makes the browser recognize that the cursor have been removed. I’m not sure why this is, but I suspect that it has something to do with the hasLayout property in IE6.


#branding h1 a:hover {
border: none;
}

The only thing is that it now changes the height of the link to be lower than before, resulting in that only a part of the logo is visible. To fix this I had to define the height of the link in pixels instead of just as 100%.


#branding h1 a {
height: 125px;
}

With those issues taken care of, it works fine in IE too.

Compability

I’ve tested the code in Firefox 2.5-3.0, Internet Explorer 5.5 SP2, 6.0 and 7.0, Opera 9.26 and Safari 3.1. All in Windows XP. The only weakness I’ve found so far is that “print background images” has to be turned on in the browser for the logo image to show in print-outs. Otherwise the text version is printed instead.

If you have a solution for this, spot other weaknesses or have other ideas of how to improve this. Please share!

Update: Since I wrote this article I have changed my mind regarding using <h1> as container for the site logo. I have also found other ways to further improve this solution. Read about it in Ultimate Site Logo 2 – For real this time.

About the author

Gabriel Svennerberg is an UX Designer and FrontEnd Developer living in Sweden. When he's not busy designing or building applications at Meetod, he writes about UX Design and all things web on In usability we trust. Gabriel is the author of the book Beginning Google Maps API 3 published by Apress. Gabriel on Google+
  • http://improvetheweb.com Yura

    Unfortunately, your opinion on the use of h1 remains your own opinion, because HTML specification clearly says that h1 is to used to denote a topic of the page.

    If there are several equally notable topics on the page, several h1s can be used.

    If you use h1 as a logo, it doesn’t specify the topic of *the page*.

    I’ve written a bit about it earlier:
    http://www.improvetheweb.com/how-use-h1-heading-tag

    Cheers.

    Btw, welcome to the Cool Programming community on Mixx. I should be more active next week :)

  • http://www.svennerberg.com Gabriel Svennerberg

    @Yura: Thanks for commenting!

    I can certainly see your point. The question is if the site name is the most important heading of the document or not. I believe that in some cases it is and in some cases it isn’t. Perhaps most of the time it’s not.

    This have been a ongoing debate and somehow I have decided to go with the <h1> = site logo opinion. Maybe I have to reconsider my stand point about this.

    It would be interesting to see how you mark up site logos.

    I’m new on Mixx but it seems to be a really great social bookmarking site. Thanks for the welcoming!

  • Sune Radich Christensen

    Eventhough I agree with Yura that is not meant to be used as the logo for a site, I found your technique to “hide the link and show an image instead” to be very useful. Its rather simple once you think about it, its the thinking I just never did ;)

  • http://www.svennerberg.com Gabriel Svennerberg

    @Sune Radich Christensen: I’m glad to hear that you found it useful!