The Joomlashack Blog

How to Change the Logo on Joomla Templates

Written by Steve Burge Steve Burge
Published: 10 January 2010 10 January 2010
Well, almost any template. This tip works for all but the most complicated templates.

  • Step 1: Go and download the Firefox browser, if you haven't done so yet: https://www.mozilla.com/en-US/firefox/personal.html. Firefox is much better than Internet Explorer or Safari for working on websites.
  • Step 2: We're going to install an extra toolbar for Firefox. It is called the "Web Developer" toolbar. It was already installed on the Firefox we used in the Joomla beginners classes: https://addons.mozilla.org/en-US/firefox/addon/60
  • Step 3: Click "Add to Firefox" and follow the instructions, including restarting Firefox.
  • Step 4: The next time you open Firefox, you will see a list of links that starts with "Disable", "Cookies", "CSS" and ends in "Options"
  • Step 5: Browse to the website where you want to change the logo. We're going to use https://joomla.org for this example.
  • Step 6: In the toolbar, click on "Images" which is the 5th link from the left. Then click "View Image Information" from the dropdown.
  • Step 7: You will now see a list of all the images on the site.
  • Step 8: Scroll down until you see the logo. You will see two pieces of information about it: Location ( https://cdn.joomla.org/images/logo.png ) and Size ( Width = 235 pixels, Height = 40 pixels ).
  • Step 9: You need to make a new logo that is the same width and height as the old.
  • Step 10: Use your favorite file manager to upload the new logo to the location you found in Step 8. It is better to rename rather than delete the old logo. You could call it logo-backup.png for example.