Website

Mar 09, 2021

Linas L.

2min Read

How to Add an Image or Logo to Your Website

How to Add an Image or Logo to Your Website

When developing a website or theme, you might want to add a logo so people can quickly identify your site. But how to do so? Well, in this tutorial, we’ll show you the easy way to add an image or logo by using HTML.

Steps to Add an Image Using HTML

To add an image or logo to your website, you need to modify the HTML or PHP file where you want the logo to appear.

Use an FTP client to connect to the webserver and edit your web files. Alternatively, you can also use the File Manager of your hosting control panel.

Our tutorial will show you how to add an image or logo to your WordPress site from Hostinger’s hPanel:

  1. Name the image properly. Separate the words with hyphens instead of spaces.
  2. Head over to hPanel’s File Manager. Then, open the public_html folder by selecting the Go To File Manager button.
  3. Upload the image into the public_html directory.
    Upload an image into public_html folder

    Make sure the image’s extension is recognized. The recommended formats for website logos are png, jpeg, or gif.

  4. Go to the wp-content -> themes and access the theme folder you’re currently using.
  5. Open the file where you want the logo or image to appear. Let’s say you want to add the image to your header, so you need to modify the header.php file.
    Right click on the header.php file and select edit or open to start modifying it
  6. Add the image by inserting the following HTML syntax. Place it before the end of the <head></head> tag within the header.php file: 
    <IMG SRC="hostinger-logo.png" ALT="some text" WIDTH=600 HEIGHT=400>

    Change the “hostinger-logo.png” defined by the IMG SRC with the name of the image you’re about to use. Then, edit “some text” dictated by ALT with a description of your image. Finally, specify the WIDTH and HEIGHT of your image.


    Adding the code into the header php.file
  7. Once you’ve saved the changes, reload your site. The image is now displayed on your website’s header.
    The image displayed on your site header

The HTML syntax we provided also works for adding images to other CMS platforms. The steps are the same, but the directory names might differ.

Conclusion

Having a logo or image is beneficial for your website. Not only does it makes your site looks more attractive, but it can boost your branding as well. And thankfully, adding images with HTML is super easy! Simply upload an image in any extension, and then modify the template files of your currently used theme.

Now try it yourself! Good luck!

Author
The author

Linas L.

Linas started as a customer success agent and is now a full-stack PHP developer at Hostinger. He is passionate about making a positive impact on people by utilizing user-driven development techniques. As much as he enjoys coding and changing the world, he secretly dreams of becoming a rock star.

More from Linas L.