Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To change your WordPress logo size, use Appearance → Editor and adjust the Site Logo block in a block theme, or open Appearance → Customize → Site Identity in a classic theme. If your theme has no size control, apply a targeted CSS rule and keep the image height automatic so the logo retains its proportions.
Choose the instructions for your theme
WordPress has two common places to manage a site logo. Block themes use the Site Editor and its Site Logo block; classic themes usually use the Customizer’s Site Identity panel. The controls available within either route depend on the active theme.
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Smashing WordPress: Beyond the Blog (Smashing Magazine Book Series) | $17.11 | Buy on Amazon |
| 2 |
|
Making Your WordPress Site Awesome: The Intermediate Guide (Web Site) | $34.94 | Buy on Amazon |
| Theme type | Where to change the logo | Size control |
|---|---|---|
| Block theme | Appearance → Editor; edit the header or template part containing the logo | The Site Logo block has a width control and can be resized with drag handles. |
| Classic theme | Appearance → Customize → Site Identity | Depends on the theme; it may provide a width, max-width, or header-size control. |
Resize the logo in a block theme
- In the WordPress dashboard, go to Appearance → Editor.
- Open the header or template part where the logo appears.
- Select the Site Logo block. If it is difficult to select on the canvas, use the editor’s List View to locate it.
- In the block Settings panel, adjust Width by entering a value or moving the slider. You can also resize the logo with drag handles. WordPress’s Site Logo block documentation says: “Once you have added an image logo, you can resize it using the drag handles.”
- Preview the header at desktop and mobile widths, then save your changes.
The Site Editor’s Identity section provides high-level controls for the Site Title, Site Tagline, Site Logo, and Site Icon. The logo itself is displayed through the Site Logo block. A change to a synchronized Site Logo block is reflected wherever that logo is used.
Resize the logo in a classic theme
- Go to Appearance → Customize → Site Identity.
- Use Change logo to select an existing image or upload one.
- Look for a theme-specific setting such as width, max-width, or header size. If available, adjust it and publish the change.
- Check the live site at desktop and mobile widths.
Classic themes register custom-logo support with theme-defined expected width and height, so the available size controls vary. If the Customizer has no relevant setting, use Additional CSS in the Customizer for a quick override, or use a child theme stylesheet for a code-level change intended to persist across theme updates. WordPress’s Additional CSS documentation describes how Customizer CSS can override theme styles.
#1 Best Overall
Use CSS when there is no size setting
For a block logo, first select the Site Logo block and open Advanced → Additional CSS Class(es). Add a class such as my-logo, then add this rule in Additional CSS or your child theme’s stylesheet:
.my-logo img {
width: 180px;
height: auto;
}The example sets the rendered width to 180 pixels; change that value to suit your header. Keeping height: auto lets the image preserve its original proportions. For a classic theme, target the logo selector used by that theme rather than assuming the block’s class will apply. The WordPress Site Logo block reference identifies .wp-block-site-logo as the block selector and documents a numeric width attribute.
If the rule has no effect, inspect the rendered logo markup in your browser’s developer tools and check which selector and image element the theme uses. Avoid setting both width and height unless you know the source image’s ratio; mismatched dimensions can stretch or squash the logo.
Check mobile and desktop sizing
A logo that looks right in the editor may still render smaller on the live site if the header or another container limits its space. Preview the front end at multiple viewport widths, including a narrow mobile width. If the image itself has the intended width but still appears constrained, check the header layout and its container rather than repeatedly enlarging the logo setting.
Quick Recap
- Confirm you edited the logo in the active header or template part.
- Check whether the theme applies a width or max-width limit to the logo or its container.
- Verify that your CSS selector matches the rendered markup and is not overridden by a more specific theme rule.
- Use a proportional height and test the result at both mobile and desktop sizes.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
