# Logo

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](https://lovelyrender.com/documentation/add-logo-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

1. In the editor, open the inserter and choose **Logo**. [Add a block](https://lovelyrender.com/documentation/add-block/) details the ways to insert a block.
2. If no logo has been uploaded, the block shows **No logo uploaded. Go to Appearance → Images to upload one.** Upload it in **Appearance** > **Images**.
3. 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](https://lovelyrender.com/documentation/header-menu-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 |

![The inspector of a Logo block, with only the Settings and Styles tabs: the Logo panel, Displayed logo on Automatic, Link to home turned on, Inline SVG and Lazy loading turned off.](https://static.lovelyrender.com/uploads/2026/10/885-doc-blocs-logo.png)

**Tip:** A logo placed on a photo must stay readable in both modes. On a dark photo, choose **Dark mode logo**: the dark mode logo, drawn for dark backgrounds, shows even for a visitor in light mode. The creation **Header: placed on the image** is set this way.

### 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 |

**Note:** With **Inline SVG** and an SVG logo, screen readers announce the logo as an image named by the alt text. Without alt text, they skip it.

### Image settings panel

| Setting | Effect | Default value |
| --- | --- | --- |
| **Behavior** | **Default**, **Proportional**, **Cover** or **Contain**, as on the [Media](https://lovelyrender.com/documentation/media-block/) 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](https://lovelyrender.com/documentation/size-borders-effects/)).

The block has no **Animations** tab: to animate the logo, animate the [Container](https://lovelyrender.com/documentation/container-block/) 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](https://lovelyrender.com/documentation/media-block/) 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.

## See also

- [Add your logo and icon](https://lovelyrender.com/documentation/add-logo-icon/)
- [Write the header, menu and footer once](https://lovelyrender.com/documentation/header-menu-footer-once/)
- [Media](https://lovelyrender.com/documentation/media-block/)