In WordPress, the Steps to Add Your Logo Icon to Your Pages

In WordPress, the Steps to Add Your Logo Icon to Your Pages

This also applies to adding your logo icon to your WordPress Posts. This also applies to adding images to your WordPress Pages and Posts. You Create your logo icon using your favourite tools. Everyone has their favourite tools. I use a free tool called Jing, which I find great.

Update: This has been superseded by TechSmith Cature which is also free and which I also find great.

They discontinued updating Jing due to the evolving computing environment we all find ourselves in.

I believe that they rewrote the tool to work in a more modern evolving computing environment.

Anyway I found that Jing did what I needed it to do.

At the time of updating this, TechSmith Capture does what I need it to do. Hopefully this will remain the case in the future as well. 🙂 🙂

These steps assume that you want to add this logo icon to the top of all your WordPress pages and posts. You perform these steps for each of your WordPress pages and posts.

You upload your logo icon image to your WordPress Dashboard. On your WordPress Dashboard select Media, then select Library, then click on the add new button. Then upload your icon image from your computer. When it has finished loading, click on that image.

Note the values of the following properties:
Its width, its height and the full URL name for it after your domain name, then remove the domain name, for example:
http://mycoolsite.com/wp-content/uploads/my-cool-icon.jpg
Update: Many websites now use the more modern and more secure https: rather than http: protocol.
https://mycoolsite.com/wp-content/uploads/my-cool-icon.jpg

Becomes ‘/wp-content/uploads/my-cool-icon.jpg’ when the domain name removed.

Adding your logo icon to your WordPress Pages

You then edit each of your posts and pages by doing the following steps:

  • Edit your post/page.
  • Change to text view.
  • Then on top line of your article, add something similar to the following:
    Sample HTML source to add image to a WebPage
  • Replace /wp-content/uploads/my-cool-icon.jpg with your value.
  • Replace My cool icon description with your value.
  • Replace width value with your value.
  • Replace height value with your value.
  • Replace the class value with your value. It may or may not be the value as above.
  • Save the change.
  • Test the change to ensure you are happy with it.

Adding your logo icon to your WordPress Pages, using a widget for the right hand side sidebar

If you have many WordPress Pages or WordPress Posts, and you want to implement the above in one place, rather than for each WordPress Page or WordPress Post, consider doing the following:

  • Make sure you have resized or edited your image so that it fits neatly into the widget sidebar area.
  • For instance lengths greater than 300 pix may not fit.
  • Resizing or editing the image upfront may help with performance. If the image downloaded is already smaller, it should mean your website page loads quicker. You want your website to load and display quickly and as fast as possible.
  • On your WordPress Dashboard select Appearance, then select Widgets.
  • On the available widget section, click on the Text box.
  • Then take the option to add widget to the applicable sidebar.
  • A Text data entry box is displayed. Enter a title if required. (you can edit this later if required).
  • Then within the data entry area for the widget, add something similar to the following:
    Sample HTML source to add image to a WebPage
  • Replace /wp-content/uploads/my-cool-icon.jpg with your value.
  • Replace My cool icon description with your value.
  • Replace width value with your value.
  • Replace height value with your value.
  • Save the change.
  • Test the change to ensure you are happy with it.

The above option needs to be carefully considered if your website visitors are using small devices to access your website, as the widget on the right hand side sidebar on a desktop/laptop screen may be displayed elsewhere on a small device screen.

However you could use this technique first, and then maybe with a different image, apply the different image to each of your applicable WordPress Pages or applicable WordPress Posts. In my opinion, the images on each page or post should be different and relate to the content on that page.

Hi, I'm David. I write articles such as this one. Enjoy!

[More About David]

2 thoughts on “In WordPress, the Steps to Add Your Logo Icon to Your Pages”

  1. David, very helpful WordPress info. Thanks for the post

    Reply
    • Hi Scott,
      Thanks for the feedback. Glad you found the article helpful. Thanks for dropping by.
      Kind Regards,
      David

      Reply

Leave a Comment