The Logo block shows your site’s logo, the light mode or dark mode one depending on the page the visitor sees, or always the one from a single mode. This page describes its settings, from choosing the logo to loading, then what screen readers announce.
Before you start
The Logo block shows the logo uploaded in Appearance > Images, Logo section. It has two slots, Light mode and Dark mode. By default, the block shows the logo of the mode the visitor sees the page in, and switches when the visitor changes mode. When you change the file, all the Logo blocks of the site show the new one. You do not have to save anything again. Set your logo and your icon explains the upload.
The logo can be an SVG, AVIF, WebP, PNG or JPEG file. SVG stays sharp at every size.
Add the logo
- In the editor, open the inserter and choose Logo. Add a block details the ways to insert a block.
- If no logo has been uploaded, the block shows No logo uploaded. Go to Appearance → Images to upload one. Upload it in Appearance > Images.
- The logo appears in the page. To see the one from the other mode, click the Preview in dark mode or Preview in light mode button in the editor’s top bar. A block set to one mode’s logo shows it in both previews.
The header and the footer, written once for the whole site, usually carry the logo. Write the header, menu and footer once describes them.
Settings tab
Logo panel
| Setting | Effect | Default value |
|---|---|---|
| Logo shown | Automatic shows the logo of the mode the visitor sees the page in. Light mode logo and Dark mode logo always show that mode’s logo, whatever the visitor’s mode. If that logo has not been uploaded, the other mode’s logo replaces it. | Automatic |
| Link to homepage | Wraps the logo in a link to the home page. The link is never placed on the home page itself. | On |
| Inline SVG | Writes the SVG drawing into the page, so its color can be controlled with CSS properties. No effect on a logo that is not an SVG. | Off |
| Lazy loading | The logo only loads as it nears the screen. Leave it off for the header logo; turn it on for a logo placed low in the page. | Off |
Media panel
| Setting | Effect | Default value |
|---|---|---|
| Decorative image | Marks the logo as decorative. The alt text disappears and screen readers skip the logo. | Off |
| Alt text | The name read by screen readers, usually your company’s, without the word “logo”. With Link to homepage, it is also the link’s name: write where it leads, for example “Atelier Sauge, home”. The field’s help reminds you. | Empty |
Image settings panel
| Setting | Effect | Default value |
|---|---|---|
| Behavior | Default, Proportional, Cover or Contain, as on the Media block. | Proportional |
| Width | A forced width in pixels. When empty, the width is automatic. | Empty |
| Height | A forced height in pixels. When empty, the height is automatic. | Empty |
A single forced dimension is enough: the other is calculated from the file’s proportions. With no dimension, the logo is shown at its natural size. The logo has no focal point: in Cover or Contain, the framing starts from the center.
Styles tab
The logo is set in the Default, Hover and Active states. It only has the Size & Spacing panel (Set the size, borders and effects).
The block has no Animations tab: to animate the logo, animate the Container around it.
On a phone
The Size & Spacing panel is set screen by screen: a smaller logo in the mobile header is set with the Mobile screen chosen.
Accessibility
- Screen readers announce the link to home by the logo’s Alt text, for example “Atelier Sauge, home”. Without alt text, or with Decorative image, they announce it as Home.
- The same logo can appear twice on the page, in the header and in the footer. Check Decorative image on one of the two so it is not announced twice.
Limits
- The block shows the site’s logo: for another image, use the Media block.
- It has no image size choice: the uploaded file is served as is.
- With only one logo uploaded, the block shows it in both modes, whatever the Logo shown setting.