How to upload & size your logo

This is one of the topics that is asked often when setting up a new theme. Every theme seems to have a different sized logo area and simply loading in your logo file isn’t going to work. It takes a little bit of prepping before loading your logo to a new theme. If not sized right, it won’t look it’s best. In this quick tutorial we will use the free version of PicMonkey.com to properly size a logo before loading it. If after reading through this you are still having trouble, please contact me.

Lets Get Started

Find Your Logo/Header Size

STEP 1: Log in to your WordPress dashboard and view the homepage of the site. In the top left corner is the Customize option. Click that.

STEP 2: Select “Header Image” from the menu.

STEP 3: At the end of the description will be what we will call the “canvas size”. For this tutorial I’ll be using the Hello Darling size of 1000×400.

Create the Canvas

Open a new tab or window and go to PicMonkey.com

STEP 1: Hover over “Design” and select “Custom”

STEP 2: Enter in your logo/header size from your theme. We are using 1000×400 for the Hello Darling Theme. Then click “Make It”.

STEP 3: It is best to create a transparent logo/header. So over where it says “Color” check the box that says Transparent and hit “apply”.

Selecting the Logo/Header & Adjusting it

STEP 1: On the left hand side is the menu, select the “butterfly” icon. Then at the top of the new menu that comes up, choose “Your Own” and locate your logo file on the computer. It is best to use the .PNG format of your logo.

STEP 2: If your logo is huge it will be placed on the canvas and shrunk down in size. If you know your logo isn’t that much larger than the canvas, you can right click on the logo and select “Original Size” then adjust from there. If it is a huge file, doing that will make it super hard to adjust and it is better to stretch it into place.

STEP 3: Stretching it into place. Click on the logo and select the corner. Then pull it and adjust it until it sits perfectly on that canvas. Once done your logo is ready to be saved. Be sure to save it as a .PNG file.

Load Your New Logo/Header

STEP 1: Follow the steps in the “Find Your Logo/Header Size” above and go back to the Customizer on your site. Once there select “add new image” and upload your new image. Then click “Select/Crop”

STEP 2: The canvas that your logo sits on is already the perfect size because we pre sized it. So no need to select “Crop Image”. Click on “Skip Cropping”.

STEP 3: A preview of how your new logo will look shows up. Hit Save and enjoy your properly sized logo/header on your gorgeous new site.

Troubleshooting Tips

Logo is still fuzzy

You need to start with a logo that is larger than the canvas you are placing it on. If it is smaller you can still use it but do not stretch it to fit the canvas. Instead make sure it is full size and center it on the canvas. Also make sure you are always working with a PNG file. JPG files distort easily and will not be as clear.

Logo looked great before saving and is fuzzy now?

Make sure that you saved the logo as a PNG file.

Logo is rectangle sized, not square

This isn’t really troubleshooting. Some logos no matter what you do, will not work for the theme you are using. This is something to take into consideration when picking out a theme. If your logo is a rectangle shape and you’re trying to fit it in a small square space, the logo will look shrunk and not in proportion to the theme. The only option is to do a logo variation, possibly a badge style logo, or break up the long wording and create more of a box logo than a rectangle.

Logo is tall and not rectangle in size

If your logo is more of a square or circle, you have two options. The first is similar to the above solution. Do a logo variation so you have a longer logo. The other option is adjusting the header to accommodate your logo height. This is a task that is beyond what this tutorial will go into but changing the height of a rectangular spot is usually a possibility. If you have a Hello You Designs Theme and this is your issue, contact me and I’ll adjust your theme to best fit your logo.

Why is my logo smaller than the size we created?

This is a good question and usually where most people get tripped up. All of our themes have retina optimized logo areas. Which basically means it takes the original size and compresses the logo in half. What that does is ensures your logo is crisp and clear on all devices, especially Apple products.

Have a tutorial you would like to request?
Or a topic you want addressed?

Then please contact me. Would love to hear your post suggestions

Get in Touch