Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

How to change your WordPress logo size (works with 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.’

Select Divi theme customizer

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

Here you can change the size of your logo.

Select Divi primary menu bar

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.

Adjust logo 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.

How to change the size of WordPress logo in the Astra theme

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

Here you can easily change the size of your logo.

Astra's site title settings in the WordPress Customizer

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.

Astra logo width slider

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.

Ultra click site logo and tagline

After that click the ‘Site Logo’ dropdown.

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

Ultra click site logo button

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.

Change logo height and width

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.

Right click inspect

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.

Click select an element icon

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

It will look similar to the image below.

Logo CSS class

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.

The Additional CSS settings in the WordPress Customizer

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.

Changing the logo size with custom CSS

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.

Activate CSS Hero plugin

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.

Customize with CSS Hero

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.

CSS Hero preview

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.

Click show advanced props

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.

Define logo width and height

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

3 CommentsLeave a Reply

  1. I have an issue in Google speedinsight, Properly size images that suggests the it slow down the website because it has to resize the image when loading, which affects loading time. I found your article very helpful. However, I have one question. How to know the actually size of my logo based on my theme. Thanks to you, I know now how to resize it, but I am struggling to find the actual size logo because according to another article the actual size of the logo differ depends on the theme.

    • You would need to check with the specific support of your theme as they would be the main ones who would know the image size if it is not in your theme’s documentation.

      Admin

  2. If I’ll change the Logo size by editing the CSS, will it stay as I edited it if there is any theme updates?

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.