# Poser votre logo et votre icône

L’écran **Images** reçoit votre logo, votre favicon et l’icône de votre site sur un téléphone. Cet article vous apprend à les envoyer, à régler les couleurs de l’application et à remplacer une image.

## Avant de commencer

- L’écran **Images** se trouve dans le menu **Apparence**. Il est réservé aux administrateurs du site.
- Il accepte le SVG, l’AVIF, le WebP, le PNG et le JPEG. Préférez le SVG, qui reste net à toutes les tailles.
- Chaque SVG est nettoyé à l’envoi. Le code qu’il pourrait transporter est retiré. Un fichier illisible est refusé.
- Vos images arrivent en ligne à la prochaine publication du site. Elles comptent dans l’espace de votre offre.

## Connaître les emplacements

L’écran a trois sections. **Logo** et **Favicon** ont deux emplacements, **Mode sombre** et **Mode clair**. **Webclip et PWA** en a un seul, **Icône**.

| Section | Usage | Versions produites |
| --- | --- | --- |
| **Logo** | Le bloc Logo de l’en-tête et du pied de page, l’en-tête de vos e-mails et la carte de partage sur les réseaux sociaux. | Une version image pour les e-mails, tirée du logo du mode clair. |
| **Favicon** | La petite icône de l’onglet du navigateur. | Des PNG de 32 et 48 px. |
| **Webclip et PWA** | L’icône d’un site ajouté à l’écran d’accueil d’un téléphone. | Des PNG de 180, 192 et 512 px. |

## Envoyer votre logo

1. Dans le menu de l’administration, ouvrez **Apparence** puis **Images**.
2. Dans la section **Logo**, sous **Mode clair**, cliquez sur **Envoyer** et choisissez votre fichier. Le logo s’affiche dans l’emplacement.
3. Sous **Mode sombre**, envoyez la version de votre logo lisible sur une page sombre.

![La section Logo de l’écran Images : le logo d’Atelier Sauge en mode sombre et en mode clair, chacun avec ses boutons Envoyer et Supprimer.](https://static.lovelyrender.com/uploads/2026/10/1025-doc-design-logo.png)

Par défaut, le bloc Logo affiche le logo du mode dans lequel le visiteur voit la page. Quand le visiteur change de mode avec le sélecteur d’apparence, le logo change avec la page. Sans logo pour le mode sombre, celui du mode clair sert dans les deux modes. Un bloc Logo posé sur une photo peut aussi garder toujours le logo d’un même mode : [Logo](https://lovelyrender.com/fr/documentation/bloc-logo/) décrit les réglages du bloc.

Vos e-mails portent une version image du logo du mode clair, car les logiciels de messagerie lisent mal le SVG. Sans logo du mode clair, ils portent le nom de votre site.

## Envoyer votre favicon

1. Dans la section **Favicon**, sous **Mode clair**, cliquez sur **Envoyer** et choisissez votre fichier.
2. Facultatif : sous **Mode sombre**, envoyez une version lisible sur un onglet foncé.

Le favicon doit rester lisible à 16 px de côté. Préférez une version simplifiée de votre marque, par exemple son symbole sans son nom.

Le navigateur affiche le favicon de son propre mode, clair ou sombre, quel que soit le format du fichier. Sans favicon pour le mode sombre, celui du mode clair sert dans les deux modes.

## Envoyer l’icône d’application

Le webclip est l’icône qu’un visiteur voit quand il ajoute votre site à l’écran d’accueil de son téléphone. Il doit être carré.

1. Dans la section **Webclip et PWA**, sous **Icône**, cliquez sur **Envoyer** et choisissez une image carrée.

Sans icône envoyée, l’emplacement reprend le favicon, celui du mode clair ou à défaut celui du mode sombre, et affiche **Utilise le favicon**. Votre site a une icône d’application dès qu’il a un favicon.

![La section Webclip et PWA : l’icône carrée verte d’Atelier Sauge dans l’emplacement Icône, puis les couleurs PWA et le bouton Enregistrer les couleurs.](https://static.lovelyrender.com/uploads/2026/10/1027-doc-design-webclip.png)

L’icône est la même en mode clair et en mode sombre : les téléphones n’affichent pas d’icône sombre pour un site.

## Régler les couleurs de l’application

Sous **Couleurs PWA**, deux couleurs accompagnent l’icône d’application. Elles valent blanc tant que vous ne les avez pas réglées.

| Couleur | Usage |
| --- | --- |
| **Couleur du thème** | La barre du navigateur sur téléphone. |
| **Couleur de fond** | L’écran de lancement d’un site ajouté à l’écran d’accueil. |

1. Cliquez sur la pastille de la couleur et choisissez une valeur.
2. Cliquez sur **Enregistrer les couleurs**.

## Remplacer ou retirer une image

Pour remplacer une image, cliquez sur **Envoyer** dans son emplacement. Le nouveau fichier prend la place de l’ancien et toutes ses versions sont refaites.

Pour retirer une image, cliquez sur **Supprimer**. Supprimer le favicon du mode clair retire l’icône d’application qu’il remplaçait.

## Voir aussi

- [Logo](https://lovelyrender.com/fr/documentation/bloc-logo/)
- [Soigner le partage sur les réseaux sociaux](https://lovelyrender.com/fr/documentation/partage-social/)
- [Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/)