Wwohn.com : Make your logo clickable

Posted by Oeroek in maart 25th, 2008

A logo is a very important design element of your website. It gives identity to the page and functions as a marker for your visitor.

To help your visitor even more to quickly find your website you can add the logo to the address bar of the browser. You can read how to do this in our article “make a favicon“.

Another way of using a logo is as a hyperlink to your homepage. Since more and more websites are making their logo clickable, more people are getting used to using the logo to return to the homepage.

If you get used to using a clickable logo it immediately draws attention if a site does not provide this functionality. Try microsoft.com to find out yourself.

Although many people may know of the clickable logo, not everybody knows about it (or wants to use it). Make sure that you also make a regular hyperlink named “home”.

How do you make a logo clickable

In most cases it is annoyingly simple to make the logo clickable, especially if the tag <img> is used to load the logo. It requires a little bit of HTML knowledge to do the same if the logo is a background picture of a cell in a table or a <div> Nevertheless, with some patience you should be fine.

Clickable image

Look in your HTML for the <img> tag used to load the logo. It looks something like the line below:

<img alt="your website theme" src="www.yourwebsite.com/logo.gif">

To transform this into a link, use the following line of code:

<a title="return to the homepage" href="www.yourwebsite.com"><img alt="your website theme" src="www.yourwebsite.com/logo.gif"></a>

I added a title tag to the hyperlink. If visitors hover the image, a tooltip will be shown with the line “return to the homepage”.

Make a <div> or cell in a table clickable

If you cannot find the <img> the logo is probably the background image of a <div> or <td>. this would mean that you should make the entire <div> or <td> clickable.

You can make a <div> clickable with the following line of code:

<div onclick="location.href='http://www.yourwebsite.com/';" style="cursor: pointer;"></div>

You can make a <td> clickable with the following line of code:

<td onclick="location.href='http://www.yourwebsite.com/';" style="cursor: pointer;"></td>

In the examples above, pointer of the mouse changes if the mouse hovers the <div> or <td>. This provides visitors an indication that the area they are hovering is clickable.

Emphasize hyperlinks

An experienced visitor may recognize a hyperlink by the cursor changing into a hand. An additional indication may be the tooltip that shows a line of text if the visitor hovers a hyperlink. To make a tooltip you use the title tag, for example:

title="Return to the homepage"

The experienced webmaster/designer can use other hover effects to emphasize hyperlinks. For example Facebook, who has added a little homepage icon if you hover the logo.