Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

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

Your website logo is an important part of your brand, so you will want to make sure it looks good. However, sometimes, it’s not clear how to make the logo bigger or smaller.

In this article, we will 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?

No matter whether you hire someone to design a custom logo for your WordPress website or design one yourself using a free logo maker, logos are an important part of any website.

However, when you upload a logo, it might not always be the right size by default.

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.

That being said, let’s see how you can easily change the logo size in WordPress. Simply use the quick links below to jump to the method you want to use:

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 theme supports multiple logo sizes.

The good news is that many of the popular themes come with built-in tools for resizing the logo, including Divi, Astra, and Ultra.

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

In this guide, we will 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 are 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 you don’t see these settings, then you can always check your theme’s documentation or reach out to the developer for help. For more information on this topic, please see our guide on how to properly ask for WordPress support and get it.

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

Change the WordPress Logo Size in Divi WordPress Theme

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

Select Divi theme customizer

After that, select ‘Primary Menu Bar.’

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 drag the ‘Logo Max Height’ slider up and down until you find the perfect size for your WordPress blog.

When you are 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

If you’re using the Astra theme, then go to Appearance » Customize and 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

Simply drag the ‘Logo Width’ slider to the left or right to make the logo bigger or smaller.

The WordPress Customizer will show these changes in its live preview, so you can try different sizes to see what looks the best for your WordPress website.

Astra logo width slider

When you are happy with how the logo looks, click ‘Publish’ to make it live on your website, blog, or online store.

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.

When it appears, select the ‘Logo Image’ radio button.

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 to scale the logo based on the original size, then only change the dimensions in one box.

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

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

Method 2: Change the WordPress Logo Size Using the Full Site Editor (Block-Based Themes Only)

If you are using a block-based theme like Hestia Pro, then you can change the logo size using the full site editor.

To get started, just go to Themes » Editor in the WordPress dashboard.

Opening the WordPress full-site editor

By default, the full site editor will show your theme’s home template.

To resize your site’s logo, you will typically select ‘Patterns.’

Selecting a pattern in a block-enabled theme

The editor will now show a list of all the patterns and template parts that make up your theme.

Simply click on the Header option, which controls the layout of your blog’s header.

Customizing a header on your WordPress website

WordPress will now show all the Header template parts that make up the current theme. Simply find the header you want to edit and give it a click.

You’ll now see a preview of that header template. To go ahead and edit the template, click on the small pencil icon.

How to edit the site logo using the full-site editor (FSE)

With that done, click to select your site’s logo.

In the right-hand menu, select the ‘Block’ tab.

Customizing the site logo block using the full-site editor (FSE)

Then, select the ‘Settings’ tab.

You can now make the logo bigger or smaller by dragging the ‘Image Width’ slider.

How to change the WordPress logo size using the full-site editor (FSE)

When you are happy with how the logo looks, click on the ‘Save’ button.

Now, if you visit your website, you will see the new logo in action.

Method 3: 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, you will need to know the CSS class of your website’s logo. To get this information, go to any page that has the logo, such as your website’s custom home page.

Here, right-click anywhere on that page and 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 the 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 4: 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 CSS 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 allows you to customize almost every CSS style on your WordPress site without writing a single line of CSS code.

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

The 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 will 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 will be sent 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 simply click any element on the page, and you will see a toolbar with all the customizations you can make.

CSS Hero preview

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

After that, select the ‘Show Advanced Props’ link to see all the changes you can make to your WordPress logo.

Click show advanced props

In the ‘Measures’ box, you will find the ‘Max Width’ and ‘Max Height’ options.

To change the size of the logo, simply type new numbers into these fields. If you want to keep the original image dimensions, then only change the height or the width.

Define logo width and height

The live preview will show your changes automatically. This means you can try different sizes to see what looks the best.

When you are happy with how your logo looks, click on ‘Save and Publish’ to make the resized logo 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 guide on how to get a free business email address.

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. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

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

7 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    AND waht about using logos as SVG vectors instead of using PNGs? Or does using SVG logos require any special steps compared to standard image formats?

  3. Ossama Alnuwaiser says

    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.

    • WPBeginner Support says

      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

  4. Mohammed Ghaleb says

    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.