# Logo

Le bloc **Logo** affiche le logo de votre site, celui du mode clair ou du mode sombre selon la page que voit le visiteur, ou toujours celui d’un même mode. Cette page décrit ses réglages, du choix de ce logo au chargement, puis ce que les lecteurs d’écran en annoncent.

## Avant de commencer

Le bloc **Logo** affiche le logo envoyé dans **Apparence** > **Images**, section **Logo**. Elle a deux emplacements, **Mode clair** et **Mode sombre**. Par défaut, le bloc affiche le logo du mode dans lequel le visiteur voit la page, et en change quand le visiteur change de mode. Quand vous changez le fichier, tous les blocs Logo du site affichent le nouveau. Vous n’avez rien à réenregistrer. [Poser votre logo et votre icône](https://lovelyrender.com/fr/documentation/identite-de-marque/) explique l’envoi.

Le logo peut être un fichier SVG, AVIF, WebP, PNG ou JPEG. Le SVG reste net à toutes les tailles.

## Ajouter le logo

1. Dans l’éditeur, ouvrez l’inserteur et choisissez **Logo**. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) détaille les façons d’insérer un bloc.
2. Si aucun logo n’a été envoyé, le bloc affiche **Aucun logo envoyé. Allez dans Apparence → Images pour en envoyer un.** Envoyez-le dans **Apparence** > **Images**.
3. Le logo s’affiche dans la page. Pour voir celui de l’autre mode, cliquez sur le bouton **Aperçu en mode sombre** ou **Aperçu en mode clair** de la barre du haut de l’éditeur. Un bloc réglé sur le logo d’un mode le montre dans les deux aperçus.

L’en-tête et le pied de page, écrits une fois pour tout le site, portent en général le logo. [Écrire une fois l’en-tête, le menu et le pied de page](https://lovelyrender.com/fr/documentation/compositions/) les décrit.

## Onglet Réglages

### Panneau Logo

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Logo affiché** | **Automatique** affiche le logo du mode dans lequel le visiteur voit la page. **Logo du mode clair** et **Logo du mode sombre** affichent toujours le logo de ce mode, quel que soit le mode du visiteur. Si ce logo n’a pas été envoyé, celui de l’autre mode le remplace. | **Automatique** |
| **Lien vers l’accueil** | Entoure le logo d’un lien vers l’accueil. Le lien n’est jamais posé sur l’accueil lui-même. | Activé |
| **SVG en ligne** | Écrit le dessin SVG dans la page, pour piloter sa couleur avec des propriétés CSS. Sans effet sur un logo qui n’est pas un SVG. | Désactivé |
| **Chargement différé** | Le logo ne se charge qu’à l’approche de l’écran. Laissez-le désactivé pour le logo de l’en-tête ; activez-le pour un logo placé bas dans la page. | Désactivé |

![L’inspecteur d’un bloc Logo, avec les seuls onglets Réglages et Styles : le panneau Logo, Logo affiché sur Automatique, Lien vers l’accueil activé, SVG en ligne et Chargement différé désactivés.](https://static.lovelyrender.com/uploads/2026/10/885-doc-blocs-logo.png)

**Conseil :** Un logo posé sur une photo doit rester lisible dans les deux modes. Sur une photo sombre, choisissez **Logo du mode sombre** : le logo du mode sombre, dessiné pour les fonds sombres, s’affiche même pour un visiteur en mode clair. La création **En-tête : posé sur l’image** est réglée ainsi.

### Panneau Média

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Image décorative** | Marque le logo comme décoratif. Le texte alternatif disparaît et les lecteurs d’écran sautent le logo. | Désactivé |
| **Texte alternatif** | Le nom lu par les lecteurs d’écran, en général celui de votre entreprise, sans le mot « logo ». Avec **Lien vers l’accueil**, c’est aussi le nom du lien : écrivez où il mène, par exemple « Atelier Sauge, accueil ». L’aide du champ le rappelle. | Vide |

**Remarque :** Avec **SVG en ligne** et un logo SVG, les lecteurs d’écran annoncent le logo comme une image nommée par le texte alternatif. Sans texte alternatif, ils le sautent.

### Panneau Réglages de l’image

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Comportement** | **Par défaut**, **Proportionnel**, **Couvrir** ou **Contenir**, comme sur le bloc [Média](https://lovelyrender.com/fr/documentation/bloc-media/). | **Proportionnel** |
| **Largeur** | Une largeur forcée en pixels. Vide, la largeur est automatique. | Vide |
| **Hauteur** | Une hauteur forcée en pixels. Vide, la hauteur est automatique. | Vide |

Une seule dimension forcée suffit : l’autre se calcule d’après les proportions du fichier. Sans dimension, le logo s’affiche à sa taille naturelle. Le logo n’a pas de point focal : en **Couvrir** ou **Contenir**, le cadrage part du centre.

## Onglet Styles

Le logo se règle dans les états **Par défaut**, **Survol** et **Actif**. Il n’a que le panneau **Taille et espacement** ([Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/)).

Le bloc n’a pas d’onglet **Animations** : pour animer le logo, animez le [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/) qui l’entoure.

## Sur téléphone

Le panneau **Taille et espacement** se règle écran par écran : un logo plus petit dans l’en-tête mobile se règle avec l’écran **Mobile** choisi.

## Accessibilité

- Les lecteurs d’écran annoncent le lien vers l’accueil par le **Texte alternatif** du logo, par exemple « Atelier Sauge, accueil ». Sans texte alternatif, ou avec **Image décorative**, ils l’annoncent **Accueil**.
- Le même logo peut paraître deux fois sur la page, dans l’en-tête et dans le pied de page. Cochez alors **Image décorative** sur l’une des deux pour ne pas le faire annoncer deux fois.

## Limites

- Le bloc affiche le logo du site : pour une autre image, utilisez le bloc [Média](https://lovelyrender.com/fr/documentation/bloc-media/).
- Il n’a pas de choix de taille d’image : le fichier envoyé est servi tel quel.
- Avec un seul logo envoyé, le bloc l’affiche dans les deux modes, quel que soit le réglage **Logo affiché**.

## Voir aussi

- [Poser votre logo et votre icône](https://lovelyrender.com/fr/documentation/identite-de-marque/)
- [Écrire une fois l’en-tête, le menu et le pied de page](https://lovelyrender.com/fr/documentation/compositions/)
- [Média](https://lovelyrender.com/fr/documentation/bloc-media/)