JS Animated. How to change the logo

Hello! This video tutorial shows how to change the logo in JS Animated template:

There are two ways of changing logo in JS Animated template:

• Replacing the original logo image file with the desired one.

• Changing the path to the logo image in .html files.

Let’s review both ways.

In order to replace the original logo image with the desired one, you should do the following:

1. Go to /img/ directory and locate the logo.png file there:

   

2. Upload your own logo image to the /img/ directory replacing the original one (make sure your logo image file name and extension matches the original one – logo.png).

3. If everything is done properly, you will receive notification to confirm file replacement. Click “Yes” button to overwrite the original logo with your one:

   

4. Open the site and refresh the page to see the new logo:

   

In order to change the logo by changing the path to the logo image, you should do the following:

1. First, upload your logo image file to the server, e.g. to /img/ directory. Let’s say, the file is named my_own_logo.png.

2. Then, locate the index.html file on your server and open it for editing:

   

3. Use the CTRL+F/CMND+F key (Windows OS/Mac OS) to search for “logo” text. You will find the code similar to the above one:

   <a href="index.html"><img src="img/logo.png" alt="logo"></a>

   

4. Replace the img/logo.png code with the img/my_own_logo.png . Save the file to apply changes:

   

5. Open the site and refresh the page to see the logo is changed.

Remember that in case you have separate .html files for each page, you will need to repeat the procedure with code replacement in each file.

Also, depending on logo image dimensions difference, you may need to alter CSS, so that your new logo fits nicely in the page.

This is the end of the tutorial, you have learnt how to change the logo in JS Animated template.

Feel free to check the detailed video tutorial below: