Introduction

When you begin customizing your Joomla website, you will most surely reach the point when you would like to configure your custom site logo. Setting up your brand logo will definitely give your website a personal touch and increase your online recognition. In the following lines, we will walk you through this easy task.

Getting Started

Depending on how you installed Joomla (with or without sample data) and the template you have decided to use, the default logo may vary. Although, the process of changing it is exactly the same. In Joomla, you are allowed to either configure a custom text or a logo image that will appear at the top of your pages.

In order to begin, please log in to your Joomla Admin Dashboard and navigate through the top menu bar to Extensions > Templates > Styles.

On the “Styles” page, you will need to select the template currently in use. The template will be indicated with a highlighted star sign under the “Default” column.

When you access the “Edit Style” page, you will need to switch to the “Advanced” tab. Please note that depending on the template you are using, the “Logo” option might be located under another tab (e.g., “Layout”).

From here, you will be able to set up your custom logo, title, and description.

Changing the Logo

Now that you are located under the “Advanced” tab, please click on the “Select” button next to the “Logo” option.

Once you do that, a new dialog will be displayed, and you will be able to select an image from your Joomla gallery, upload a new image from your local computer, or directly insert an image source URL.

When you select the desired image, all left to be done is to click on the “Insert” button.

You can also include Logo “Title” and “Description” in the corresponding fields if needed. Once you are ready, just hit the “Save” button, and your new image will be successfully configured.

Now, it is time to go ahead and check how your new logo appears on the frontend.

And there you go! Your new logo image appears on your home page nicely, welcoming your visitors.

Customizing Logo Size

In some cases, you might need to resize the logo image to perfectly fit your website. It is recommended to do that using graphical software and to upload the edited image by following the steps above. However, you are able to change the size of your logo by directly editing the code through the “template.css” file. The file in question is located under /joomla_root/templates/your_template_name/css/template.css/.

You can edit the file directly through the “File Manager” feature integrated into your cPanel account or by using your favorite FTP Client. You can find step-by-step instructions on how to edit files in our guide based on How to manage the files of your hosting account using the File Manager feature. In our tutorials based on FTP Services, you will find detailed instructions on how to edit files using various FTP Clients.

Once you access the “template.css” file, you will need to find the style for the logo image and edit the “width” and “height”.

In case you are having a hard time locating the style for the logo image, you can always double-check it by access your website using your favorite browser, hover over the logo image, right-click and select the “Inspect” option.

Once you are ready, you can go ahead and test the website again. If you are pleased with the result, you are all set.

Well done! You have just learned how to customize the logo of your Joomla website. We hope you have managed to easily complete the task, and you were happy with the effect achieved. In case you have any additional questions on the topic, please feel free to contact our Support Team.