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
- Dans le menu de l’administration, ouvrez Apparence puis Images.
- Dans la section Logo, sous Mode clair, cliquez sur Envoyer et choisissez votre fichier. Le logo s’affiche dans l’emplacement.
- Sous Mode sombre, envoyez la version de votre logo lisible sur une page sombre.
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 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
- Dans la section Favicon, sous Mode clair, cliquez sur Envoyer et choisissez votre fichier.
- 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é.
- 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.
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. |
- Cliquez sur la pastille de la couleur et choisissez une valeur.
- 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.