Change Website Logo (Replace Image)


  • Frequently people want to add their own business or organisation logo to their website
  • As the default TwentyTen WordPress theme Logo area is a little tricky to alter, we'll do that in another video
  • For this video we'll alter another more usual theme, as it's likely most of you have changed to a new theme
  • In this example we can see the Logo for one of the other websites
  • For the sake of illustration we're going to change the logo to the SelfAssemblySites logo
  • First thing we do is right click on the logo and choose view image
  • Keep in mind we are using the Firefox browser so it might be different in a different browser
  • This brings up a page that just shows information about this one image
  • So across the top we have the title of the image and it's dimensions in pixels, in this case 300 x 80
  • Note that in the address bar is the location of that image file on our website
  • So we're going to find our SAS logo and edit it so that it's also 300 x 80 pixels to fit in the same space
  • On the desktop we have two versions of our logo a small and a large, from the Paint.Net video
  • As the smaller image is just above the required size we're going to edit that one
  • Right click on the selected image, scroll down the options to Open With, and choose Paint.Net
  • If you need to refresh yourself on basic image editing go to the video linked HERE
  • We clicked the image and resize to view the image dimensions
  • We know we want the height to be 80pixels, so we select the number in the height box and type in 80
  • Because they're stuck in ratio the width also was reduced, but we'll deal with that in a moment
  • Click Ok to continue
  • So now our image is the right height but slightly too small on the width
  • Go to the Image list and click Canvas Size, this is essentially the background on which the image sits
  • In the popup box we change the Width box to 300 pixels
  • Down on the Anchor section we can choose where we want the image to sit on this new canvas
  • We click the middle of the selection so it the space is added in equal directions
  • Click Ok to continue
  • So now you can see that the image has been expanded slightly on both left and right sides
  • But it's white, rather than the chequered grey and white which signifies being transparent
  • So using the top left select tool, in the tool bar, we select all the white space on one side and hitting the delete key
  • Then doing the same on the right side. You'll notice it goes from white to chequered grey and white
  • Now our image is the right size to replace the original one.
  • Going back to the logo we need to replace the image at that location, on the address bar
  • You can see that this one is called Logo.png
  • Go out to the image which we were editing and we rename it Logo.png
  • Now we open FTP and connect to the relevant website, in this case SelfAssemblySites
  • Now we go through the website folders, as listed on the image address to find the image
  • When we locate the correct folder, we can right click on the file logo.png and click rename
  • We can call it "original logon logo" and click return
  • So we still have a copy of it there in case you need it, it hasn't been deleted
  • In the left hand window, we locate the new replacement logo, called logo.png, right click and choose Upload
  • It uploads across to the website folder
  • We go back to the original page where we can see the logo, click refresh and SelfAssemblySites logo appears
  • That's one easy way of replacing the giving logo of a theme with your own that is exactly the same size


Leave a Reply

Your email address will not be published. Required fields are marked *