[How to] Link your Logo to the HomePage

This is a default UX you should enable: Linking your Logo to the HomePage 

One of the most common navigation standards is that when you click on the logo of your site you are taken to the Home Page of your website. Funnily enough there are lots of templates which do not have this functionality implemented automatically. To enable this you need to do the following:


Using ftp software or otherwise, go to the index.php file of you template in joomla/<template>/index.php

Look for something like

<div id="logo"></div> (this is what displays the logo in Joomla 1.5), and change this to

<a href="index.php"><div id="logo"></div></a>

This  simply creates a link to the default Joomla homepage from your logo!

[How to] Change logo in Joomla Admin / Backend

Customize the Joomla Administrator backend with your own logo or preferred image

Sometimes it may be desirable to replace the Joomla logo with your own customised logo in the administration panel. These can be easily done by manually changing some images in the administration template.

Joomla 3

Using the template manager, using FTP or using the CPanel file manager, go to the ISIS template files, find the images folder and replace the files with a version of your own. Ideally, don't change the names, so don't you don't need to change any code, just rename your new logo to the logo.png and the other names of the files and replace them.


Change Joomla logo in Joomla Administration

Joomla 2.5

Using FTP go to the following directory administrator\templates\bluestork and open index.php. Find the following line and remove it completely or change it to suit your needs:

 <span class="logo"><a href="http://www.joomla.org" target="_blank"><img src="templates/<?php echo  $this->template ?>/images/logo.png" alt="Joomla!" /></a></span>

Using FTP software or some other way to change Joomla files go to the following directory: \administrator\templates\khepri\images, you will see 3 folders called h_cherry, h_green, h_teal. 

You will find all the header images in these files, select the colour you are using and you can replace the images with the new logo images of your choice,

Please note keep the images the same dimensions or you will have to change several bits of code throught the site and CSS. Ideally if you want to change the logo only, keep it the same size, since the template has been designed for that size, and it usually looks best at that size...

Changing the logo in the Joomla default template

One of the very first things we all do in a new Joomla installation is change the default Joomla logo. When you are still a Joomla beginner, this might be a bit of frustrating task, especially when you still have no idea what templates are, and how to go about changing them. Well this tip tries to make things easier :)

Joomla 3

To edit the Joomla 3 logo, you'll need to find the Logo option in the Template Options. Go to Extensions > Templates > Make sure "Styles" are selected > Protostar > Advanced.

change default joomla logo template

There you'll find a Logo option. Click on the "Select" button, and choose your logo image file to display, or upload a new image to use as your logo. 

Joomla 1.5

The logo is defined as part of the rhuk_milkyway template. It is defined in the template.css file. To change it you need to do the following.

1. Using FTP software upload your new logo to /templates/rhuk_milkyway/images. Let's say the name of the new logo is logo-default.png. We have now made the logo available to the template.

2.  You know need to edit the reference to the logo file. This is done as follows. Edit the template.css file found in /templates/rhuk_milkyway/css/templates.css. Find the following CSS entry: div#logo, and there should be a reference to the logo: mw_joomla_logo.png. The full CSS entry is:

background: url(../images/my_joomla_logo.png) 0 0 no-repeat; 

Change this to:

background: url(../images/logo-default.png) 0 0 no-repeat; (or the name of the filename of the logo you have just uploaded)

3. Change the width and height entries in the to the width and height of your logo.


4. Save the CSS file, and replace the current version.

5. Refresh and voila, you have change the default logo.

Want to supercharge your website?

  Our website loads FAST ... just 1.29 seconds. We're hosted on FAST InMotion VPS servers - click here to see our full review. We want YOUR website to be fast too, so we've gotten you an exclusive deal - 47% OFF for CollectiveRay visitors + FREE domain! Click the button below to grab a bargain. (This is a limited offer - so get it while it lasts)