How to Add a Custom Logo to Your WordPress Site

It seems simple, but there are so many ways to do it: How do you add a custom logo to your WordPress site?

It really depends on the theme you choose when it comes to uploading an image on your WordPress site. To start, you activate your theme and go on a hunt for the area that allows you to upload your image.

Most of the time you can find a tab on the lefthand side of your WordPress dashboard. Depending on if you choose a free theme, paid theme or a child theme, you can usually expect to locate the logo upload area in the Appearance of Settings tabs.

However, since it all depends on what your theme developer specified, we are going to cover a few of the more common ways to add a custom logo to your WordPress site.

I know there are also plenty of developers out there who are selling their services to multiple clients. You probably want to brand each login area of WordPress to offer white label benefits to each one of your clients.

So, we’ll also talk about how to remove the WordPress branding when people login so they can see their logo, too.

Let’s have a look.

• Adding a Custom Logo to the Front-end of Your WordPress Site
• Alternative Method 1 – Digging for the Upload Tab
• Alternative Method 2 – Modifying the Code
• Adding White Label Branding for Website Clients

Adding a Custom Logo to the Front-end of Your WordPress Site

Let’s start with uploading a logo to a free WordPress theme. You can find these themes by going to Appearance > Themes.

Most of them are free and you can find some nice themes, but you don’t usually get the stability or support as you would with a premium theme. Regardless, the most common method for adding a logo on these free themes (and some premium themes) is quite simple.

Step 1

Login to your WordPress dashboard and click on the Appearance tab on the left. Go to the Header drop-down and click on this button.

Step 2

Locate the option that allows you to upload an image. Some themes have suggestions for logo and header sizes, but you can usually crop them or leave them as is and you’ll be fine. Click on the Choose File button to locate the file on your computer. Choose your file and upload it onto the dashboard.

The dashboard should show you a preview of the image.

Step 3

Many themes place filler text in the logo area until you upload your image. In order to remove this text, uncheck the Show Header Text With Your Image box. Click the Save Changes button to proceed.

Step 4

Go to the front-end of your website to preview the logo. I’ve noticed that some themes place the image in the right spot, while others tend to place the logo below the menu (as seen below). This might not pose a problem for some people, but typical sites have the logo above the menu in the upper lefthand corner. That’s it for this method.

Alternative Method 1 – Digging for the Upload Tab

Like I stated before, some premium themes, and even free themes, vary in the area where you upload your logo. These developers try to make it a little easier to upload quickly, but you have to do a little searching to find the right tab. I’ll cover the most common method I have found in premium themes, but if this doesn’t work, just search around the tabs on the left of your dashboard for a header, logo, or theme customization option.

Step 1

Go to the Theme Options tab on the left hand side of your dashboard. Once again, this name might vary depending on your theme.

Step 2

In this theme it has a General section where the logo upload area resides. It’s common for developers to include accordion-style tabs so you can jump from preference to preference. Locate the area where you can upload the logo and you should be fine.

Step 3

Find the logo on your computer and upload it to the site. You can drop and modify the image after you upload it, like below, but I would recommend using an image editor for this prior to uploading. Feel free to add alternative text and a title as well. That’s it!

Alternative Method 2 – Modifying the Code

I left this as my last method because I know people typically prefer to click a button and upload the image, but modifying your code it the best way to get the logo exactly where you want and how you want it to look.

Step 1

Go to the Media tab and upload your image to the server.

Step 2

Find your Header.php file. It’s not recommended to modify this in your dashboard, so try modifying the code in your locally saved WordPress files.

Step 3

Find the line that has <h1> brackets. You can typically perform a Ctrl +F function and type in “h1” to locate this.

Step 4

Delete everything after the <h1> tag and before the </h1> tag. You’ll notice in mine that it includes <h1 class=”site-title”> If this comes up you can just leave all of this in. Paste code between the tags to make it look like this: <h1><img src=”image_name.jpg” border=0 alt=”My Site” /></h1>

Step 5

Change where it says image_name.jpg to the URL of your uploaded logo. Change the My Site text to whatever you want the alternate text to be, maybe the name of your site. That’s it!

Adding White Label Branding for Website Clients

If you run a website design company and you deliver websites to clients, then leaving them to man the sites themselves, it’s nice to change the default WordPress logo that comes up whenever they login to the dashboard. There are a few ways to modify the code and receive this result, and there are also plenty of plugins that provide solutions, but there’s one plugin that is simple, light and effective.

Step 1

Install and activate the Login Logo plugin to your WordPress site.

Step 2

Make sure the file name of your logo is login-logo.png.

Step 3

Upload the file into your WP-Content/ folder. Once it’s uploaded your login page should look something like this:

Step 4

The only improvement for this plugin would be a simple button to upload the image in your dashboard, but since developers obviously have access to the WP-Content folders, it shouldn’t be a problem. You can also try some of the other custom login logo plugins available if this doesn’t work for you.

Tools for Building Logos

We’ve learned how to get a logo on your WordPress site, on the front-end and login page, but what about tools for building your own logos? If you have design experience then I probably don’t have to tell you to use options such as Adobe Illustrator, Photoshop, or GIMP. For those of you who aren’t as well versed with logo design, here are a few suggestions:

1. Tailor Brands

Tailor Brands is another popular logo generator that comes up with some stylish designs. You’ll start by entering some details about your business, like its name, industry, etc.

You can also choose from different logo styles, such as name-based or icon-based. Then, the tool will show you a bunch of suggestions. Once you pick a design, you’ll be able to customize its style, font, text, etc.

Tailor Brands will also give you lots of previews of what it might look like in different situations. You can download low-resolution versions of your logo for free, but you’ll need to pay for high-resolution versions, starting at $3.99 per month.

Use our Tailor Brands coupon code – WPKUBE to get 25% off.

Pros

• It automatically generates logos for you.
• The logo suggestions look pretty stylish for being automatically generated.
• You can customize how the logo looks.

Cons

• You don’t get a full drag-and-drop editor for full adjustments.
• You’ll need to pay to download high-resolution images.

2. Hatchful

Hatchful is a free logo maker tool from Shopify, though you don’t need to be a Shopify store owner to use it.

It gives you an easy setup process where you’ll add your industry, choose a visual style, and enter your business name. Then, it will give you some suggestions.

If you find a logo that you like, you’ll then be able to choose from different color palettes and icons according to your needs.

Pros

• It’s 100% free.
• While the logos aren’t flashy, some of them are pretty stylish.
• You can customize the icons and text.

Cons

• You don’t have 100% control. For example, while you can choose different color palettes, you can’t enter specific color hex codes.

3. Logomakr

Logomakr is a really nice logo maker tool that manages to give you a fairly simple interface, while still providing lots of control.

You can build your logo from text, shapes, colors, and over one million graphics. Then, you can download a low-resolution version for free (for non-commercial use) or pay a small fee to download high-resolution formats with no limitations on use.

Pros

• You can browse over one million graphics to include in your logo.
• You can include shapes in logos.
• If you’re willing to pay $19, you can download high-resolution vector SVG and PDF files.

Cons

• The logo is only free for non-commercial uses (and you need to provide attribution in those cases).

4. MarkMaker

MakerMaker is a really cool free logo generator that uses artificial intelligence to help you get a logo that you love. You start off by entering your company/website name. Then, MarkMaker will generate a bunch of logos based on your name.

Now – the cool part. You can click “hearts” on logo styles that you like. Then, as you scroll down the infinitely-loading page, MarkMaker will continue to generate new ideas based on the ideas that you already like.

The idea is that as you give it more information, it gives you more and more personalized logo suggestions. Once you find one you like, you can customize the text and colors and then download it for free.

Pros

• The tool generates logos for you, which is great if you’re not a design-savvy person.
• The logos get more personalized as you add your likes.
• You can download the logos for free.

Cons

• The logos are pretty basic – just text and maybe some shapes. Don’t expect something super unique.

5. Designapp

Designapp is a free logo maker tool that lets you build your own logo using a detailed graphic interface and useful elements, like shapes and icons. If you’re willing to build your logo from scratch, the tool is free.

However, you can also pay to use (and customize) pre-built templates, which lets you begin from an already-finished product.

Pros

• You can create your own logo for free.
• It includes lots of shapes and icons.
• You get pixel-perfect control over your design.

Cons

• You start from a blank slate if you’re not willing to pay for the templates – it doesn’t help you generate a starting point like some other logo makers.

6. Canva

Canva is a popular online graphic design tool that’s probably more well-known as a tool to create social media and blog images. However, it also makes a great option for creating a logo and it includes lots of logo templates that you can use to get started.

You will need the paid version of Canva if you want to download your logo with a transparent background.

However, Canva offers a 30-day free trial, which should give you plenty of time to create a logo for free.

Pros

• Canva gives you lots of flexibility when it comes to fonts, colors, layouts, etc.
• There are tons of pre-made templates to choose from.
• You can download your logo in lots of different formats.

Cons

• You need the paid version to download your logo with a transparent background (but there’s a free trial).
• Canva isn’t specialized in logos like some other tools, though it does work fine for them.

Let us know in the comments section if you have any questions about how to add a custom logo to your WordPress site. Or maybe you’ve found an alternate method? In any case, I’d love to hear all about it!