Joomla 3.x. How to replace text logo with the image

This tutorial shows how to replace a text logo with an image in Joomla 3.x.

Joomla 3.x. How to replace text logo with the image

1. Log into Joomla Admin Panel to upload a new logo image (you can also upload the image via FTP or File Manager):

   

   Go to Media Manager:

   

   Choose the folder for your image and click Upload button, then Browse the image file from your computer:

   

   Get the direct link to the new uploaded image by using a developer tool:

   

2. Log into FTP/File Manager, follow this path templates/themexxxx (with xxxx is the number of the default theme), open index.php file, and look for the code as below (You can search with the key word Logo):

   

       <!-- Logo -->
             <div id="logo">
               <a href="<?php echo $this->baseurl; ?>">
                 <h1><?php echo wrap_chars_with_span($sitename); ?></h1>
               </a>
             </div>
   

   Then replace:

     <h1><?php echo wrap_chars_with_span($sitename); ?></h1>
     

   with:

     <img src="#"/>
     

   # should be replaced with the direct link to the new uploaded logo image that we have saved earlier:

   

   Click Save Changes:

   

3. Refresh the site to see the text logo has been replaced with your new image logo:

   

Feel free to check the detailed video tutorial below:

Joomla 3.x. How to replace text logo with the image