Your logo is often the very first thing a visitor’s eye lands on — and a stretched, misaligned, or oddly-cropped one undoes a good first impression before anyone reads a word of your homepage. It’s a small image, but it lives inside a template part that also holds your navigation, your search icon, and sometimes a button, and that template part is shared by every single page on your site. Swap the image the right way and nothing else moves. Swap it the wrong way and you find out, three pages later, that your whole header shifted half a centimetre to the left.
Here is the version that never does that.
Where your logo actually lives
In a block theme, your logo is not a setting buried in some “General” screen. It is an actual block — the Site Logo block — sitting inside your header, which is itself a template part shared across the whole site. Change it once, and it changes everywhere, because “everywhere” is the point of a template part.
That is good news: you only ever do this once. It is also the reason to do it carefully — a mistake here shows up on every page at once, not just the one you were looking at.
The safe way to swap it
- Allez dans Appearance -> Editor.
- Open any template that shows your header — Home is the obvious one.
- Click directly on the logo image in the preview. A small toolbar appears above it.
- Choose Remplacer, then pick your new file from the Media Library, or upload it fresh.
- Cliquez sur Enregistrer.
That is the entire safe path. You touched exactly one thing: the image the block points to. You did not touch its size, its position, or anything around it.
The mistake that looks harmless
The block also has resize handles — little squares at its corners you can drag to make the logo bigger or smaller. Dragging one of those does not just resize what you see. It writes a fixed width into the header template part itself, and that number now travels with your site regardless of screen size.
On a desktop monitor this can look perfectly fine. On a phone, where the header has a fraction of the horizontal space, that same fixed width can crowd your navigation, wrap your menu onto a second line, or push your logo half off the visible area. It is the single most common way a header “breaks” after a logo change — not the image, the resize handle.
If you need a different size, change it in the Site Logo block’s settings panel (the gear icon), where width is a proper, responsive setting, rather than by dragging.
Getting the file itself right
Two things save you a second trip back to this screen:
- Upload at roughly twice the size you expect to display it. Screens with a high pixel density will otherwise show a slightly soft, upscaled logo — the one detail visitors notice even when they can’t say why.
- Keep the same rough proportions as your current logo, at least the first time. A square mark dropped in where a wide horizontal logotype used to sit will often get squeezed or padded oddly, because the surrounding layout was built around the old shape. Once you’re happy with how it behaves, adjusting the shape further is easy — just watch the preview at a phone width before you save.
A transparent PNG or an SVG both work well; avoid a logo with its own white background unless your header actually is white, or you’ll ship a visible box around it.
Reading the save panel
When you click Save, WordPress will show Review changes and list Header as one of the things you’re about to update. That is expected — you are changing the header, on purpose, everywhere. Nothing is wrong. It would only be worth pausing on if it listed something you didn’t mean to touch, like Styles.
If something looks off afterwards
You have not broken anything permanently. Open Appearance -> Editor -> Patterns -> Template Parts, find Header, open its three-dot menu, and choose Réinitialiser. That discards whatever changed and restores the header exactly as your theme shipped it — logo included — so you can start the swap again from a clean state.
En bref
- The logo lives inside the Header template part, shared by every page — change it once, it changes everywhere.
- Safe path: Appearance -> Editor -> open a template -> click the logo -> Replace -> Save.
- Never resize by dragging the corner handles — it hardcodes a fixed width that can crowd or break your header on mobile. Use the block’s settings panel instead.
- Upload roughly 2x the display size, and keep the logo’s proportions close to the original the first time.
- If it looks wrong, Template Parts -> Header -> three-dot menu -> Réinitialiser puts you back to a clean slate.
-> More step-by-step guides like this one live in our documentation, and if you’re starting fresh, every theme in our collection is built so your logo, colours and layout stay consistent from day one.