The designer has sent the new logo. It looks great in the PDF. Now it needs to replace the old one at the top of the website, and you would like it to look as sharp there as it did in the email, not blurry, squashed or sitting in a white box against a coloured header.
You can change the logo in WordPress in a few minutes once the file is right, and most of the trouble people run into comes from the file rather than from WordPress. Sort the file out first and the upload is the easy part, whether your theme is classic, block-based or run by a page builder. The harder part, for some people, is getting the old logo to leave.
Get the file right before you upload anything
Ask your designer for a web version of the logo, not just the print files. What you want:
- A transparent background, so the logo sits cleanly on your header colour. That means PNG, WebP or SVG. JPG cannot be transparent and will always bring a rectangle of background with it.
- The right shape for the space. Most headers suit a wide, horizontal version of a logo. A tall, stacked version shrinks to almost nothing in a slim header.
- No empty margin around it. Extra space inside the file makes the logo look smaller than it should and is hard to fix with settings. Ask for it trimmed close to the artwork.
- A sensible size in pixels. Find out how wide the logo appears on your site, then use a file about twice that width so it stays crisp on high-resolution screens. More than that only adds weight.
| Format | Transparent? | Good for | Watch out for |
|---|---|---|---|
| PNG | Yes | Most logos; works everywhere | Large files if uploaded much bigger than needed |
| WebP | Yes | Smaller files at the same quality | Some design tools still do not export it |
| JPG | No | Logos on a solid rectangle only | Visible box behind the logo; blurry edges on text |
| SVG | Yes | Perfectly sharp at any size | Blocked by WordPress by default (see below) |
Run the final PNG or JPG through our free image compressor before uploading. The logo loads on every page, so a smaller file helps every page.
How to change the logo in WordPress with a classic theme
- Go to Appearance → Customize and open Site Identity. Some themes move the logo into a Header section instead.
- Under Logo, click Change logo (or Select logo if there is none yet).
- Upload the new file or pick it from the Media Library, then click Select.
- Depending on the theme, WordPress may offer to crop the image. If your file is already trimmed, choose Skip cropping; cropping can cut off the edges.
- Adjust the logo width if the theme offers a slider or box for it. Many do; some leave it to the theme’s own sizing.
- Press Publish.
While you are in Site Identity, you may notice the Site Icon option. That is the small square image in the browser tab, which is a separate job with its own size rules, covered in our post on adding a favicon to WordPress.
Some themes have more than one logo field: one for high-resolution screens, one for phones, one for a transparent header over a hero image, or one for a header that shrinks when you scroll. If the old logo keeps appearing in one particular situation, look through the theme’s header options for a second logo setting.
Block themes: the Site Logo block
In a block theme, the logo is a Site Logo block inside the header template part.
- Go to Appearance → Editor and open the header, or any template that shows it.
- Click the logo. In the block toolbar, choose Replace and upload or select the new image.
- In the block settings, set the Image width so it sits comfortably in the header.
- Leave Link image to home on. Visitors expect clicking the logo to bring them back to the home page.
- Save.
The Site Logo block uses the same stored logo as the Customizer, so changing it here changes it everywhere the Site Logo block appears, including the footer if your theme puts one there. The block also has a Use as Site Icon toggle. Only switch that on if the logo works as a tiny square, which most horizontal logos do not.
Logos in page builder headers
If a builder made your header, open its header template and click the logo. What you find matters.
- A Site Logo element pulls the logo from WordPress’s own setting. Change it in the Customizer or the builder, whichever offers it.
- A plain Image element holds its own copy of the file. Replace the image inside that element. This is the usual reason a logo changed in the Customizer still shows the old version on the live site.
If the builder supplies the footer too, check whether the logo appears there as well.
Sharp on high-resolution screens
Phones, tablets and many laptops have screens that pack in more pixels than older displays. A logo file exactly as wide as the space it fills looks slightly soft on them. A file about twice the display width, scaled down by the theme, looks crisp.
Some themes call this a retina logo and give you a separate field for the larger file. If yours does not, simply upload the larger file as your only logo and set the display width in the theme or block settings. Do not go much beyond double. A huge logo file slows every page down for no visible gain.
SVG logos: why WordPress refuses them
SVG is the ideal logo format in theory: tiny, and sharp at any size. But WordPress does not allow SVG uploads by default, and for a good reason. An SVG file is code, not just a picture, and it can carry scripts. Letting anyone with upload rights add SVGs opens a security hole.
If you want an SVG logo, use a well-maintained plugin that cleans SVG files as they are uploaded, such as Safe SVG, and restrict uploads to administrators. Do not use a snippet that simply turns on SVG uploads without any cleaning. If that sounds like more than you want to manage, a properly sized PNG or WebP looks just as good to visitors.
The new logo is uploaded, but the old one still shows
- Check in a private browser window. Your browser may be holding the old image.
- Clear the site’s cache in your caching plugin, and any host cache or CDN.
- Check the file name. If the new logo has the same file name as the old one, some caches keep serving the old file. Upload it with a new name, such as logo-v2.png.
- Look for a second logo setting in the theme or a builder Image element, as described above.
If none of that works, our guide to WordPress changes not showing explains each cache layer and which one usually holds on.
Other places the old logo lives
The header is the obvious place, but a rebrand reaches further, which is why it counts as one of the bigger jobs in our WordPress management guide. Check the footer, your favicon, the login page if it was customised, WooCommerce emails and invoices if you run a shop, the default social sharing image in your SEO plugin, and your social media and Google Business Profile pictures. Make a short list and work through it in one sitting.
If a footer logo is hard to track down, the guide to the WordPress header and footer shows where each part is edited in your kind of theme.
Frequently asked questions
Why does my logo stay small however big the file is?
Most themes cap the logo’s display size with a maximum height or width, so a larger file does not make it bigger on screen. Look for a logo width or height setting in the theme’s header options, or set the Image width on the Site Logo block in a block theme. If it is still small, check the file for empty space around the artwork.
Should the logo have alt text?
Yes. Give the logo image alt text with your business name, set in the Media Library. In many setups WordPress fills in the site title as alt text when the logo image has none, but setting it yourself means you know exactly what screen readers announce.
Why is my logo blurry even though the file is large?
Usually because something is resizing it badly. The theme may be using a cropped or smaller copy that WordPress made at upload, or the cropping step trimmed it. Upload again, skip cropping, and check that the theme is not forcing a fixed height that squashes a wide logo.
Do I need to delete the old logo from the Media Library?
No, it does no harm sitting there, and keeping it lets you switch back if needed. If you want a tidy library, delete it once you have confirmed the new logo shows everywhere, including in any email templates or builder elements that might still point to the old file.
A logo change should be the easy part of a rebrand. If your theme stores logos in four places and none of them seem to stick, our WordPress support can trace where the old one is coming from and swap it across the site.
Next in this series: WordPress Widgets: What They Are and How to Use Them
