How to Make a Clickable Logo
The logo that appears on a company website serves as a handshake or form of branding similar to a business card. So long as the logo is consistent both online and offline, a company will brand themselves, making them recognizable just from their logo. A clickable logo or header image is one tool websites can use to direct visitors to a specific page of the site, such as the homepage. All you need is a bit of coding and a place to host the image.
Other People Are Reading
Instructions
-
-
1
Open your logo into an art program and resize it to fit the header of your site. For example, if the content area of your site is eight hundred pixels wide, your header cannot have a width higher than that. Use a logo or banner that's no more than one hundred to two hundred pixels high, so it doesn't detract from the rest of the site.
-
2
Save the image onto your desktop either as a .gif, if it has a transparent background, or as a .jpg due to its compressed file size. Upload the image to your website using an FTP upload manager or by using a free image host such as imageshack.us, tinypic.com or photobucket.com. Copy the URL, the location where the image is stored, and paste it into a text document, as we'll be using that URL later.
-
-
3
Log in to your webhost, if you haven't done so already, and open the file called "index.htm." This index file is what appears on the screen when visitors reach your homepage. Hold down the "Ctrl" and "F" keys on your keyboard, and look for one of the following lines of code:
<HEAD>
</HEAD>
-
4
Paste the following code between those lines so that your clickable logo will appear at the top or in the header of your site.
<a href="http://www.YOURSITE.com">
<img src="imagelocationURL" border="0" alt="Welcome to WEBSITE NAME" />
</a>
-
5
Replace the first line of code that reads "YOURSITE.com" with the URL or page address you'd like your logo to send visitors to once it's clicked. In most cases, companies make this their homepage. Do not remove the quotes from around your site address.
-
6
Copy the line of code or URL you pasted in your text document in step two. Paste the URL into the second line above that reads "imagelocationURL." Do not remove the quotes as they tell your website what to do.
-
7
Add a border to your image by placing a number where it says "0" if you'd like your image to have a border around it. Otherwise leave it as zero.
-
8
Change where it says "Welcome to WEBSITE NAME" to the name of your site. Remove the line of code that reads: alt="Welcome to WEBSITE NAME" if you'd rather not use it. All this line of code does is show a bubble of text when a viewer places their mouse cursor over your logo.
-
9
Save these changes to your HTML files. Go to your site and click on the logo to make sure it sends visitors to the right page. Once the code is working properly, you can add the code you placed between the <HEAD> and </HEAD> brackets to your other pages so they also have a clickable logo.
-
10
Change the HTML code for each page of your site where you'd like the logo to appear. If you decide to resize the logo image or edit it later on, you'll have to come back and change "imagelocationURL" to the new image's address on each page. Otherwise the logo will not change.
-
1
