How to Change Your WordPress Logo Size (Works with Any Theme)

Do you want to learn how to change your WordPress logo size?

Your website logo is an important part of your brand. Depending on your WordPress theme, sometimes it’s not clear how to make the logo bigger or smaller.

In this article, we’ll show you how to easily change the WordPress logo size in any theme.

Why Change the Size of the Logo in WordPress?

When you upload your logo to WordPress, it might not always be the right size.

A logo that’s too small won’t stand out, while a logo that’s too big can distract visitors from the rest of your content.

If you’ve invested in a custom logo design, then you want to make sure your logo is the right size in your website header.

Still in the process of designing your logo? Then see our pick of the best free logo makers.

That being said, let’s see how you can easily change the logo size in WordPress. The method you choose will depend on your WordPress theme, and how comfortable you are editing CSS code. Simply use the quick links below to jump to the method you prefer.

Method 1. Change Logo Size with WordPress Customizer (Recommended)

The simplest and easiest way to change the logo size in WordPress is by using the theme customizer. However, this method only works if your WordPress theme supports it.

The good news is that a lot of popular themes like Divi, Astra, and Ultra have a built-in tool for changing the logo size.

Note: Your logo will only ever be as big as the image you upload, so make sure you upload a larger image if you want to make the logo bigger.

For the sake of this guide, we’ll show you how to change your logo in Divi, Astra, and Ultra themes, but the method is similar for most popular WordPress themes.

Even if we’re not covering your specific theme, it’s still worth seeing if you can change the logo size using the WordPress customizer.

Simply go to Appearance » Customize and look for any settings that are labeled Header, Site Identity, Logo, or similar.

If your theme doesn’t have a built-in logo editor, then you’ll need to use method 2 or 3 of this tutorial.

Change the WordPress Logo Size in Divi WordPress Theme

First, navigate to Divi » Theme Customizer and click on ‘Header & Navigation.’

After that, click the ‘Primary Menu Bar’ drop-down option.

Here you can change the size of your logo.

First, you need to adjust the ‘Menu Height’ setting. This controls the height of your entire navigation menu, which will define how big you can make your logo.

After that, you can change the ‘Logo Max Height’ setting, which is a percentage of the total menu height.

You can move the ‘Logo Max Height’ slider up and down until you find the perfect size for your WordPress blog.

When you’re happy with how the logo looks, make sure to click on ‘Publish’ before closing the WordPress Customizer.

Change the WordPress Logo Size in Astra WordPress Theme

First thing you need to do is navigate to Appearance » Customize and then click the ‘Header Builder’ menu option.

After that, click the ‘Site Title & Logo’ menu option.

Here you can easily change the size of your logo.

All you have to do is move the ‘Logo Width’ slider to the left or right.

The WordPress Customizer will show the logo changes as you make them, so you can try different sizes.

When you’re happy with the size of your logo, make sure to click ‘Publish’ before exiting the WordPress Customizer.

Change the WordPress Logo Size in Ultra WordPress Theme

To customize the logo size in the Ultra theme, go to Appearance » Customize, and click ‘Site Logo & Tagline’ in the left-hand menu.

After that click the ‘Site Logo’ dropdown.

Then, select the ‘Logo Image’ radio button that appears.

Now, you can make the logo bigger or smaller by typing new sizes into the boxes.

You can change the width using the box on the left, and the height using the box on the right.

If you want the image to scale based on the original size, then only type new logo dimensions into one box.

As you type in new dimensions, the size of the logo will change in real time.

When you’re happy with how the logo looks, go ahead and click on ‘Publish’ to make your changes live.

Method 2. Change the WordPress Logo Size by Editing CSS (Works With Most Themes)

If your WordPress theme doesn’t have built-in support for changing the logo size, then another option is adding custom CSS.

To start, go to your website’s homepage and right-click anywhere on that page. Then, select the ‘Inspect’ option.

This will open an Inspect menu that shows all the code for the homepage.

After that, click the ‘Select an element’ icon, which looks like a mouse pointer.

Next, simply hover the mouse over your website’s logo until the CSS class pops up.

It will look similar to the image below.

You’ll use this CSS class to customize the size of your WordPress logo, so make a note of this class in a text editor like Notepad.

In the WordPress dashboard, go to Appearance » Customize. Then, click on the ‘Additional CSS’ option.

You can now add custom CSS code to the small code editor.

Simply add the CSS class you found earlier, and then specify the new logo dimensions that you want to use.

Here’s an example of how the code will look:

 img.custom-logo {
     max-height: 100px !important;
}

Make sure you change the img.custom-logo CSS class and the max-heightvalue.

After making your changes, simply click the ‘Publish’ button to make them live.

Method 3. Change the WordPress Logo Size Without Editing CSS (No Code)

If you aren’t comfortable editing theme files or adding custom CSS, then you can use a WordPress styling plugin instead. These plugins allow you to make visual changes to your site, similar to using a drag-and-drop page builder.

We recommend using CSS Hero. It’s a styler plugin that lets you edit almost every CSS style on your WordPress site without writing a single line of CSS code.

Deal: WPBeginner readers can get a 34% discount through our CSS Hero coupon code.

First thing you need to do is install and activate the plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, click the ‘Proceed to Product Activation’ button to activate the plugin. You’ll find it right above your list of installed plugins.

This will bring you to a screen where you can enter your username and password. Simply follow the onscreen instructions to verify your account, and you’ll be redirected back to the WordPress dashboard when you’re finished.

After that, click the ‘Customize with CSS Hero’ button in the WordPress admin toolbar.

You will now see your website with CSS Hero running on top of it.

CSS Hero uses a WYSIWYG (What You See Is What You Get) editor, so you can click any element on the page to see a toolbar with all the different customizations you can make.

Simply click on your WordPress logo at the top of the page.

After that, click the ‘Show Advanced Props’ link to see even more CSS customization options.

In the ‘Measures’ box you’ll find options called ‘Max Width’ and ‘Max Height’.

You can change these to the logo sizes you want to use instead. If you want the image to keep the same dimensions, then only change the height or the width.

The WordPress Customizer will automatically show your changes as you make them. This means you can try different sizes to see what looks the best.

When you’re happy with your logo, click ‘Save and Publish’ to make your changes live.

We hope this article helped you change your WordPress logo size. You may also want to see our expert picks for the best live chat software for small businesses, and our list of the must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.