Looking to change your WordPress header logo? It's actually very easy. This blog post will walk you through the process step by step, so that you can have a custom image in place of the default one. After reading this article, your new and improved site should be live on the web!
The logo of any website is an important first impression for any visitor. It quickly establishes your brand and tone for visitors. So, if you're looking to make a change, here's how to do it in WordPress.
WordPress varies by theme, but luckily most use the same core logo feature in the standard website settings. Change this, and your header logo will change globally.
Step One: Log into your WordPress site and click on "Appearance" in the left-hand menu.
Step Two: Now you'll see a new screen with all of the Theme Options. You need to scroll down until you reach Logo Settings, under Site Identity. Click on that section to expand it and then look for where it shows the site icon and logo.
Changing the icon will typically impact the favicon, as well as the main logo on responsive views. Changing the logo should do as the name suggests - change it on desktop view in the header (and wherever else it shows).
Step 3: Upload your new logo and add it
Click on the logo, and the media library should pop up. Upload your new logo, and apply it to the site.
The WordPress appearance cusomizer will automatically refresh to show the changes, and your header logo should now be the one uploaded to the site.
Pro tip: Add SVG support to your WordPress website, and use a SVG format for any logos or basic graphics. The size will be much smaller, resulting in increased performance.
This is what it would look like if the logo is set to be custom:
If you're using a theme that doesn't follow this method, there are two main routes that it may take in terms of defining what logo shows in the header of your site.
1) It's under the core WordPress customizer tool, but in a different tab.
Site identity is typically where all branding is managed, like colors and logos, but sometimes a theme adds a new tab, specific to itself. So go back the the main menu of the customizer interface, find the theme-sepcific settings tab, and see if there's a place to upload and change the logo there. (please note, it may be a bit different in the hosted WordPress.com version)
2) It's under the theme options panel in the WordPress backend.
Many WordPress themes have a backend page where all aspects of their branding and design are managed. Settings include changing fonts, text size, color schemes, as well as the header logo.
Say you looked into both of these solutions for changing the header logo, and you're still stuck.
If you're using a page builder, the process may be a bit different. For example, Elementor and Oxygen allow you to create completely custom header/footer templates. With Full Site Editing in Gutenberg, the same applies -- you may be customizing and publishing the entire header, not just a logo.
Finally, most themes include support for adding custom HTML/CSS code snippets into their templates. You may need to override existing settings with a PHP filter. If this is the case your theme documentation typically can walk you through this process.
In a last-resort scenario, you can typically hide the image element that is the default header logo/icon on WordPress with css (display:none). Then in the container (typically a link <a>), apply a background:url(path to your image), and you'll be able to hack a new image into the header. This isn't a great idea, and should be used as a last resort.
Hopefully this article pointed you in the right direction when it comes to changing the Header Logo in WordPress. If you have any questions, please feel free to ask in the comments section below.