Your header logo is the first thing visitors notice on your website. It sits at the top of every page, anchors your brand identity, and builds trust the moment someone lands on your site. If you are wondering how to add a logo to your WordPress website header, the good news is that WordPress makes it easy, and you have three solid methods to choose from depending on your theme and comfort level.
In this guide, we will walk through the Customizer method (the easiest), the Elementor Site Logo widget method (for page-builder users), and the theme-file method (for full control). We will also cover logo size and format best practices so your logo looks sharp on every screen.
Method 1: Add a Logo Using the WordPress Customizer
This is the standard, beginner-friendly way to add a logo to your WordPress header, and it works with almost every modern theme including Astra, GeneratePress, OceanWP, and the default WordPress themes. WordPress documents this feature in the official Customizer handbook if you ever want the full reference.
- In your WordPress dashboard, go to Appearance > Customize. If you are new to the dashboard layout, our guide on understanding the WordPress dashboard will get you oriented.
- Look for the Site Identity section and click it.
- Click the Select Logo button. The media library will open.
- Upload your logo file (or pick one you already uploaded) and click Select.
- WordPress may ask you to crop the image. If your logo file is already trimmed tightly, skip the crop.
- Use the Logo Width slider if your theme provides one to adjust the display size.
- Click Publish at the top of the Customizer to save your changes.
That is it. Visit your homepage and you should see your logo in the header. If your theme also shows the site title text next to the logo, you can hide the title from the same Site Identity section by unchecking the Display Site Title and Tagline option. If you want to polish that text branding as well, see our guide on changing the WordPress site title and tagline.
Limitations: the Customizer only works if your theme supports the custom-logo feature. Almost all themes released in the last several years do, but if the Site Identity section has no logo option, your theme may be older or heavily custom. In that case, try Method 2 or Method 3 below.
Method 2: Add a Logo Using Elementor (Free or Pro)
If your site is built with Elementor, you can place your logo in the header with the Site Logo widget. This gives you full design control over size, alignment, padding, and even sticky-header behavior.
First, a quick note on where the header itself lives. If you have Elementor Pro, you can build a custom header with the Theme Builder. With Elementor Free, the header comes from your theme, but you can still add the Site Logo widget to any page or template you design. Our tutorial on editing your header with Elementor Free explains exactly how header customization works without Pro.
Steps (Elementor Pro – Theme Builder header)
- Go to Templates > Theme Builder > Header and click Add New.
- Choose a blank template or import a pre-designed header block.
- From the widget panel, drag the Site Logo widget into your header layout.
- By default, the widget pulls the logo you set in the Customizer. You can override it with a custom image per header if you want a different logo on specific pages.
- Use the Style tab to set the logo width in pixels, adjust alignment, and add padding or margins.
- Publish the header and set display conditions (entire site, or specific pages).
Steps (Elementor Free – logo inside a page section)
- Edit your homepage with Elementor.
- Add a Site Logo widget to the top section of the page.
- Style it with the Width and Alignment controls until it sits where you want it.
Pro tip: set your logo once in Appearance > Customize > Site Identity even if you plan to use Elementor, because many widgets and plugins fall back to that site logo when no custom image is given.
Method 3: Add a Logo by Editing Theme Files
The theme-file method is for users who want complete control or whose theme does not support the custom-logo feature. It requires a child theme so your changes survive theme updates. Never edit your parent theme directly, because the next update will wipe your changes.
Step 1: Create or install a child theme
If your theme does not already include a child theme, create one with just a style.css and functions.php. Many themes also ship a ready-made child theme you can download from the theme author’s site.
Step 2: Copy the header template
Copy header.php from your parent theme into your child theme folder. WordPress will load the child theme’s copy first.
Step 3: Add the logo markup
Find the branding section in header.php and replace or extend it with code like this:
<div class="site-branding">
<?php if ( has_custom_logo() ) : ?>
<?php the_custom_logo(); ?>
<?php else : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php echo esc_url( get_stylesheet_directory_uri() . '/images/logo.png' ); ?>" alt="<?php bloginfo( 'name' ); ?>">
</a>
<?php endif; ?>
</div>Upload your logo to the child theme’s images folder via FTP or the file manager in your hosting control panel, then refresh your site.
Step 4: Style the logo size with CSS
Add this to your child theme’s style.css to keep the logo from stretching:
.site-branding img {
max-height: 60px;
width: auto;
}Adjust the 60px value to match your design. Using width: auto keeps the proportions correct so the logo never looks squished.
Logo Size and Format Best Practices
Adding the logo is only half the job. A blurry, stretched, or slow-loading logo hurts your brand more than having no logo at all. Follow these rules:
- Use PNG with a transparent background for most logos. Transparency lets the logo sit cleanly on any header color. Use SVG if your theme supports it, since SVG stays perfectly sharp at any size and has a tiny file size.
- Avoid JPG for logos unless your logo is a full-color photograph. JPG cannot do transparency, so you get an ugly white box around the logo.
- Upload at 2x the display size for retina screens. If your logo displays at 200 pixels wide, upload a 400-pixel-wide file. Retina displays are everywhere now, and a 1x image looks fuzzy on them.
- Keep the file small. Run your PNG through a compressor like TinyPNG before uploading. A logo should be under 100 KB, ideally under 50 KB. Large logos slow down your header, which loads on every single page.
- Use a horizontal lockup. Headers are short and wide, so a wide, short version of your logo fits best. Square or stacked logo versions work better as favicons or footer logos.
- Check mobile. Headers shrink on phones, and many themes swap to a mobile menu. Open your site on a real phone and make sure the logo is readable and not overlapping the hamburger menu icon.
- Add alt text. When you upload the logo, fill in the alt text field with your brand name. This helps accessibility and gives search engines a text signal about your site identity.
Troubleshooting Common Logo Problems
Logo not showing up? Clear your browser cache and any caching plugin cache first. This fixes the problem more often than anything else.
Logo looks blurry? You probably uploaded a small image and the theme is stretching it. Re-upload at twice the display size as explained above.
Logo too big or too small? Check for a logo width slider in Appearance > Customize under Site Identity or Header settings. If your theme has none, add the CSS from Method 3 to Appearance > Customize > Additional CSS instead of editing files.
Logo disappears on some pages? If you used Elementor Theme Builder, check your header display conditions. A header set to show only on the homepage will not appear on other pages.
Two logos showing? Your theme and Elementor may both be outputting a logo. Turn off the theme logo in the Customizer (uncheck display options or remove the image) and keep only the Elementor one, or vice versa.
A strong header logo does not need to be fancy. Clean, readable, and fast-loading beats a complicated design that turns into a blurry smudge on mobile screens.
Frequently Asked Questions
Where do I upload my logo in WordPress?
Go to Appearance, then Customize, then Site Identity, and click Select Logo. This is the standard location in almost every WordPress theme, and the logo you set here is also used by page builders and many plugins as a fallback.
What size should my WordPress header logo be?
There is no single perfect size because every theme is different, but a safe starting point is 200 to 300 pixels wide at 2x resolution (so upload a 400 to 600 pixel file). Keep the height under about 80 pixels so it fits comfortably in a standard header, then fine-tune with your theme’s width slider or CSS.
Can I add a logo without a plugin?
Yes. The Customizer method needs no plugin at all and is built into WordPress core. You only need a plugin like Elementor if you want advanced header design control, and even then the logo itself can live in the Customizer.
Should I use PNG, JPG, or SVG for my logo?
Use PNG with transparency for most cases, or SVG if your theme supports it since it scales perfectly and loads fast. Avoid JPG for logos because it cannot handle transparency and compresses flat-color graphics poorly, which creates visible artifacts around text and edges.
Why is my logo not showing on mobile?
Many themes use a separate mobile header with its own logo setting, or they hide the desktop logo below a certain screen width. Check your theme’s Customizer under Header or Mobile Menu settings for a dedicated mobile logo option, and test on an actual phone rather than only resizing your desktop browser.
Can I have a different logo on the homepage and inner pages?
Yes, with Elementor Pro’s Theme Builder you can create multiple headers with different logos and assign each one with display conditions. With the standard Customizer method you are limited to one site-wide logo, so a page builder or small custom code is needed for per-page logos.
