Dans cet article
- Un logo dans un emailing doit peser moins de 50 Ko et mesurer entre 150 et 300 px de large pour s’afficher correctement sur tous les clients mail
- Le format PNG transparent reste le standard en 2026 pour les logos d’emailing, loin devant le JPG et le SVG non supporté par Outlook
- Placer le logo en haut à gauche de l’emailing augmente la reconnaissance de marque de 20 à 30 % selon les études eye-tracking
- Le texte alternatif (attribut alt) du logo est obligatoire : sans lui, vos destinataires voient un rectangle vide si les images sont bloquées
- Le standard BIMI (Brand Indicators for Message Identification) permet d’afficher votre logo directement dans la boîte de réception, avant même l’ouverture du mail
- Un emailing logo bien intégré se teste sur au moins 5 clients mail différents avant chaque envoi
Sommaire
- Pourquoi le logo est essentiel dans un emailing
- Règle 1 : choisir le bon format de fichier pour votre emailing logo
- Règle 2 : dimensionner et compresser sans dégrader
- Règle 3 : positionner le logo au bon endroit
- Règle 4 : renseigner le texte alternatif et le lien
- Règle 5 : garantir le rendu en mode sombre
- Règle 6 : adopter BIMI pour afficher le logo en boîte de réception
- Règle 7 : tester sur tous les clients mail avant chaque envoi
- Tableau comparatif des formats de logo pour l’emailing
- Erreurs fréquentes à éviter avec un logo dans un emailing
Pourquoi le logo est essentiel dans un emailing
Je conçois des campagnes d’emailing pour des clients depuis plus de dix ans, et la première chose que je vérifie systématiquement, c’est le logo. Pas la ligne d’objet, pas le bouton d’appel à l’action : le logo. Pourquoi ? Parce que votre emailing logo est le premier signal de confiance que le destinataire perçoit. En moins de deux secondes, il décide s’il reconnaît l’expéditeur ou s’il classe le mail en spam.
Les chiffres parlent d’eux-mêmes. Selon une étude de Litmus, référence mondiale du test d’emailing, près de 43 % des destinataires signalent un email comme spam uniquement sur la base de l’apparence de l’expéditeur. Un logo absent, pixelisé ou mal positionné alimente directement cette méfiance.
Le symbole @ (arobase), inventé par Ray Tomlinson en 1971 pour séparer le nom d’utilisateur du nom de domaine dans les adresses électroniques, est devenu le symbole universel de l’email. C’est ce caractère qui rend possible l’adresse expéditrice affichée juste au-dessus de votre logo. Mais aujourd’hui, l’arobase seule ne suffit plus à rassurer : il faut un identifiant visuel fort, et c’est exactement le rôle du logo dans vos campagnes.
En travaillant avec des PME parisiennes et des e-commerçants, j’ai vu des taux d’ouverture progresser de 8 à 15 % simplement en corrigeant l’intégration du logo. Pas en changeant le design, juste en appliquant les bonnes pratiques techniques. Voici les sept règles que j’applique sur chaque projet.

Règle 1 : choisir le bon format de fichier pour votre emailing logo
C’est la question que mes clients posent le plus souvent : comment envoyer un logo par email sans qu’il perde en qualité ? La réponse tient en un mot : PNG. En 2026, le format PNG reste le standard absolu pour intégrer un logo dans un emailing. Il gère la transparence, conserve les aplats de couleur sans artefacts, et il est supporté par 100 % des clients mail du marché.
Le JPG est acceptable pour des photos de fond, mais il compresse les contours nets d’un logo et crée un halo disgracieux autour des lettres. Quant au SVG, il offre une qualité vectorielle parfaite en théorie, mais Outlook, Yahoo Mail et plusieurs webmails le bloquent purement et simplement. J’ai testé le SVG sur un emailing client en 2024 : résultat, un rectangle vide pour 38 % des destinataires. Plus jamais.
Le format GIF animé peut sembler tentant pour attirer l’attention, mais il alourdit considérablement le poids du fichier et Outlook affiche uniquement la première frame. Si votre logo n’est pas lisible sur cette première image, vous perdez votre audience professionnelle.
Pour ceux qui cherchent un logo email gratuit ou un logo email PNG gratuit à utiliser comme icône dans une signature ou un en-tête, il existe des banques d’icônes comme Flaticon ou Icons8. Mais attention : vérifiez toujours la licence avant de l’intégrer dans un emailing commercial. Pour un logo de marque, faites-le créer par un graphiste ou utilisez un outil comme Canva, puis exportez systématiquement en PNG 24 bits avec fond transparent.
Règle 2 : dimensionner et compresser sans dégrader
Un logo trop lourd ralentit le chargement de l’emailing. Un logo trop petit devient illisible. Il faut trouver le juste milieu, et après des centaines de campagnes, voici mes repères :
- Largeur recommandée : entre 150 et 300 pixels. Au-delà de 300 px, le logo écrase le contenu sur mobile.
- Hauteur maximale : 80 à 100 pixels. Un logo plus haut repousse le contenu sous la ligne de flottaison.
- Poids cible : moins de 50 Ko. Idéalement entre 10 et 30 Ko pour un logo simple.
- Résolution : exportez en 2x (donc 300 px affichés = 600 px réels) pour les écrans Retina, puis forcez la taille d’affichage en HTML avec les attributs width et height.
Pour compresser sans perte visible, j’utilise TinyPNG ou Squoosh. Ces outils réduisent le poids de 50 à 80 % tout en conservant la netteté. Sur un projet récent pour un cabinet d’avocats (j’en parle dans mon guide sur la création de site internet pour avocat), j’ai fait passer un logo de 180 Ko à 22 Ko sans aucune différence visible.
Si vous envoyez votre logo par email à un prestataire ou un imprimeur, joignez-le en pièce jointe plutôt qu’intégré dans le corps du mail. Les clients mail comme Gmail redimensionnent et recompressent automatiquement les images collées dans le corps, ce qui dégrade la qualité. Pour un logo destiné à un CV ou une signature professionnelle, le PNG reste également le format de prédilection, avec un poids inférieur à 30 Ko.
Règle 3 : positionner le logo au bon endroit
La position du logo dans un emailing n’est pas une question esthétique : c’est une question de performance mesurable. Les études eye-tracking (suivi du regard) montrent que les lecteurs scannent un email en forme de F, en commençant par le coin supérieur gauche. C’est exactement là que votre logo doit se trouver.
Voici les trois positionnements que je teste et leurs résultats constatés :
- Haut gauche : le standard. Reconnaissance immédiate, cohérence avec la navigation web. C’est ce que j’utilise dans 80 % de mes projets.
- Haut centré : acceptable pour les marques lifestyle, mode ou beauté. Le rendu est plus éditorial, mais la reconnaissance est légèrement moins rapide.
- Haut droite : à éviter. Le regard passe d’abord par la gauche ; placer le logo à droite le relègue au second plan.
Dans tous les cas, le logo doit se situer au-dessus de la ligne de flottaison, c’est-à-dire visible sans scroller. Sur mobile, cela signifie dans les 300 premiers pixels de hauteur. Quand je conçois des emailings pour mes campagnes d’emailing clients, je m’assure systématiquement que le logo est visible dès l’aperçu, y compris dans le volet de prévisualisation d’Outlook qui ne montre que les 200 à 300 premiers pixels.
Un piège courant : mettre le logo dans une image de bannière pleine largeur. Si les images sont bloquées (c’est le cas par défaut sur Outlook desktop), votre marque disparaît complètement. Séparez toujours le logo de la bannière pour qu’il ait son propre tag img avec son propre texte alternatif.

Règle 4 : renseigner le texte alternatif et le lien
C’est la règle la plus négligée, et pourtant la plus critique. Quand un client mail bloque les images (Gmail, Outlook, Apple Mail en mode économie de données), votre logo est remplacé par le contenu de l’attribut alt. Si cet attribut est vide, le destinataire voit un rectangle gris avec une icône d’image cassée. Pas vraiment rassurant.
Voici ce que je mets systématiquement dans le code HTML de chaque emailing logo :
<a href="https://votresite.fr" target="_blank">
<img src="https://votresite.fr/logo.png"
alt="Logo Nom de Marque"
width="200" height="60"
style="display:block; border:0; outline:none;"
/>
</a>
Quelques détails importants :
- L’attribut alt doit contenir le nom de votre marque, pas « logo » tout seul. Écrivez « Logo Synergie Web » plutôt que « logo ».
- Le lien sur le logo doit pointer vers votre page d’accueil ou une landing page dédiée. C’est un clic gratuit que vous perdez si le logo n’est pas cliquable.
- Les attributs width et height en HTML (pas seulement en CSS) réservent l’espace même quand l’image n’est pas chargée. Sans eux, le layout saute au chargement.
- Le style display:block supprime l’espace fantôme que certains clients mail ajoutent sous les images inline.
Pour les emailings de remerciement, où la relation de confiance est déjà établie, le texte alt du logo peut inclure un message court comme « Merci de votre confiance, Nom de Marque ». Cela humanise l’email même quand les images sont bloquées.
L’arobase (@) utilisée dans les adresses email remplit une fonction purement technique : elle sépare l’identifiant local du nom de domaine. Mais le logo, lui, remplit une fonction émotionnelle et cognitive. C’est la différence entre être reconnu comme expéditeur légitime et finir dans les indésirables.
Règle 5 : garantir le rendu en mode sombre
Le mode sombre est devenu la norme. Selon les données de Email on Acid, plateforme de test d’emailing, plus de 60 % des utilisateurs mobiles activent le mode sombre sur leur téléphone en 2026. Si votre logo a un fond transparent et des éléments noirs, il disparaît littéralement sur un fond sombre.
Voici les trois stratégies que j’applique selon le contexte :
- Ajoutez un liseré blanc ou un contour clair autour de votre logo. Un padding de 8 à 10 px avec un fond blanc dans la cellule du tableau HTML suffit dans la plupart des cas.
- Préparez une version claire du logo (texte blanc, icône claire) et utilisez le media query prefers-color-scheme pour servir la bonne version. Attention : seuls Apple Mail, iOS Mail et quelques webmails supportent cette technique en 2026.
- Utilisez un fond de couleur fixe derrière le logo via une balise td avec un background-color. C’est la méthode la plus fiable car elle fonctionne partout, y compris sur Outlook.
Sur un projet pour un site e-commerce que j’ai accompagné récemment, le passage au mode sombre avait rendu le logo totalement invisible sur iPhone. Deux lignes de code ont réglé le problème : un padding de 12 px et un background-color blanc sur la cellule contenant le logo. Le taux de clic sur le logo a augmenté de 11 % après cette correction.
Si vous gérez des campagnes sur Apple Mail, sachez que ce client applique sa propre logique de mode sombre : il inverse parfois les couleurs claires automatiquement. Testez systématiquement votre emailing logo sur Apple Mail en mode clair ET sombre.
Règle 6 : adopter BIMI pour afficher le logo en boîte de réception
BIMI (Brand Indicators for Message Identification) est le standard qui permet d’afficher votre logo directement dans la boîte de réception, à côté du nom de l’expéditeur, avant même que le destinataire ouvre l’email. C’est un levier puissant et encore sous-exploité en France.
Concrètement, BIMI fonctionne ainsi :
- Vous configurez SPF, DKIM et DMARC sur votre domaine (c’est un prérequis non négociable, et c’est aussi recommandé par la CNIL pour la sécurité des communications électroniques).
- Vous créez un fichier SVG Tiny PS de votre logo, conforme aux spécifications BIMI.
- Vous publiez un enregistrement DNS TXT contenant l’URL de ce fichier SVG.
- Optionnellement, vous obtenez un VMC (Verified Mark Certificate) pour que votre logo s’affiche aussi sur Gmail et Apple Mail.
Le VMC coûte entre 1 200 et 1 500 € par an auprès d’autorités de certification comme DigiCert ou Entrust. C’est un investissement conséquent pour une TPE, mais pour une marque qui envoie plus de 50 000 emails par mois, le retour sur investissement est mesurable en taux d’ouverture.
En 2026, BIMI est supporté par Gmail, Apple Mail, Yahoo Mail et Fastmail. Outlook a annoncé un support partiel. Même sans VMC, la mise en place de DMARC en mode strict améliore votre délivrabilité, ce qui justifie déjà l’effort technique.
Pour les freelances et les petites structures, je recommande de commencer par DMARC en mode quarantine, puis de passer en mode reject une fois la configuration validée. C’est un sujet que je lie directement à la cybersécurité de vos communications professionnelles.

Règle 7 : tester sur tous les clients mail avant chaque envoi
Aucune règle précédente ne vaut quoi que ce soit sans cette dernière : testez. Le rendu d’un même emailing logo varie considérablement d’un client mail à l’autre. Ce qui s’affiche parfaitement sur Gmail peut être catastrophique sur Outlook 2019, et inversement.
Voici ma checklist de test minimale pour chaque campagne :
- Gmail (webmail et app mobile) : vérifie le rendu des images et le mode sombre.
- Outlook 2019/2021 et Outlook 365 : utilise le moteur de rendu Word, qui est le plus restrictif du marché.
- Apple Mail sur macOS et iOS : bon support CSS mais comportement spécifique en mode sombre.
- Yahoo Mail : gestion particulière des styles inline.
- Thunderbird : encore utilisé dans les administrations et les PME françaises.
Les outils que j’utilise : Litmus (payant, le plus complet), Email on Acid (bon rapport qualité-prix), et pour les budgets serrés, Can I Email, le référentiel open source de compatibilité email. Ce dernier est gratuit et indique précisément quelles propriétés CSS sont supportées par chaque client mail.
En complément, j’envoie systématiquement un email de test à cinq adresses personnelles (Gmail, Outlook, iCloud, Yahoo, ProtonMail) avant chaque envoi en masse. Cela prend cinq minutes et m’a évité des dizaines d’incidents sur des campagnes destinées à des listes de contacts emailing importantes.
Tableau comparatif des formats de logo pour l’emailing
| Format | Transparence | Poids moyen | Support Outlook | Support Gmail | Recommandation |
|---|---|---|---|---|---|
| PNG 24 | Oui | 15-50 Ko | Oui | Oui | Recommandé pour tout logo |
| JPG | Non | 10-40 Ko | Oui | Oui | Acceptable si pas de transparence nécessaire |
| GIF | Partielle (1 bit) | 10-80 Ko | Première frame uniquement | Oui | Déconseillé pour un logo statique |
| SVG | Oui | 2-10 Ko | Non | Partiel | À éviter dans le corps de l’emailing |
| WebP | Oui | 5-20 Ko | Non (Outlook desktop) | Oui | Trop risqué en 2026, support incomplet |
Erreurs fréquentes à éviter avec un logo dans un emailing
Après plus de dix ans à auditer des campagnes d’emailing, voici les erreurs que je retrouve le plus souvent :
1. Héberger le logo sur un serveur instable. Si l’URL de votre logo renvoie une erreur 404 ou un timeout, l’image ne s’affiche pas. Hébergez votre logo sur un CDN fiable ou sur le serveur de votre outil d’emailing. Ne le liez jamais à un Google Drive ou un Dropbox partagé.
2. Utiliser un logo différent de celui du site web. La cohérence visuelle entre l’emailing et la landing page est essentielle. Si le destinataire clique et atterrit sur un site avec un logo différent, la confiance est rompue. C’est un point que j’aborde systématiquement dans mes projets de refonte de site web.
3. Intégrer le logo en base64. Certains développeurs encodent l’image directement dans le HTML pour éviter les problèmes de chargement. Mauvaise idée : Gmail et Outlook bloquent les images base64. Le logo ne s’affiche tout simplement pas.
4. Oublier le logo dans la version texte. Si vous envoyez une version plain text de votre emailing (recommandé pour la délivrabilité), remplacez le logo par le nom de la marque en texte, éventuellement entre crochets : [Nom de Marque]. C’est basique mais souvent oublié.
5. Surcharger l’en-tête avec un logo trop grand. Un logo qui occupe toute la largeur de l’emailing repousse le contenu principal sous la ligne de flottaison, surtout sur mobile. Le destinataire doit scroller pour voir le message. Résultat : baisse du taux de lecture de 15 à 25 % selon mes observations.
Pour approfondir la question des consultants SEO e-commerce, la cohérence du branding entre emailing et site est également un facteur indirect de référencement, car elle influence le taux de rebond post-clic.
Côté icônes, beaucoup de professionnels cherchent un logo téléphone ou un logo email au format JPG pour enrichir leur signature ou leur CV. Mon conseil : utilisez toujours le format PNG avec fond transparent, même pour ces usages. Le JPG crée un fond blanc disgracieux sur les fonds colorés, et la plupart des logiciels de messagerie gèrent parfaitement le PNG en signature.
À retenir
- Exportez votre logo en PNG 24 bits transparent, compressé sous 50 Ko, en résolution 2x pour les écrans Retina
- Placez toujours le logo en haut à gauche de l’emailing, dans sa propre cellule de tableau HTML, avec un attribut alt contenant le nom de votre marque
- Ajoutez un fond blanc ou un padding clair derrière le logo pour garantir sa lisibilité en mode sombre sur tous les clients mail
- Configurez DMARC sur votre domaine dès maintenant ; c’est le prérequis technique pour BIMI et un levier direct de délivrabilité
- Testez chaque campagne sur au moins cinq clients mail différents (Gmail, Outlook, Apple Mail, Yahoo, Thunderbird) avant tout envoi en masse
Questions fréquentes
Qui a inventé le symbole @ pour les adresses email ?
Le symbole @ (arobase) a été choisi par Ray Tomlinson en 1971 pour séparer le nom d’utilisateur du nom de machine dans les premières adresses email du réseau ARPANET. Le caractère existait déjà sur les claviers de télétype, mais Tomlinson lui a donné sa fonction moderne. Depuis, l’arobase est devenue le symbole universel de la messagerie électronique, reconnaissable dans toutes les langues.
À quoi sert le symbole @ dans une adresse email ?
Le @ remplit une fonction technique précise : il sépare l’identifiant local (le nom de l’utilisateur, à gauche) du nom de domaine (le serveur de messagerie, à droite). Par exemple, dans [email protected], « contact » est l’identifiant et « synergie-web.fr » est le domaine. Sans ce séparateur, le serveur de messagerie ne saurait pas où acheminer le message. C’est le seul caractère réservé à cet usage dans le protocole SMTP.
Comment envoyer un logo par email sans perte de qualité ?
Pour envoyer un logo par email en préservant sa qualité, joignez-le en pièce jointe au format PNG ou AI (Illustrator), plutôt que de le coller dans le corps du message. Les clients mail comme Gmail et Outlook redimensionnent et recompressent automatiquement les images intégrées au corps. Si vous devez absolument l’intégrer dans le corps, utilisez un PNG compressé via TinyPNG et forcez les dimensions avec les attributs HTML width et height.
Quel est le symbole utilisé pour représenter l’email ?
Le symbole le plus universellement associé à l’email est l’arobase (@). Dans les interfaces graphiques et sur les supports imprimés (CV, cartes de visite), on utilise aussi l’icône d’enveloppe fermée comme pictogramme représentant le courrier électronique. Pour un usage professionnel dans un emailing ou une signature, privilégiez une icône au format PNG transparent, dimensionnée entre 16 et 24 pixels, qui reste lisible sur tous les supports.
Quelle taille doit faire un logo dans un emailing ?
La taille recommandée pour un logo dans un emailing est de 150 à 300 pixels de large et de 60 à 100 pixels de haut. Pour les écrans Retina, exportez le fichier en résolution double (600 px pour un affichage à 300 px) et forcez la taille d’affichage en HTML. Le poids du fichier doit rester sous 50 Ko pour ne pas ralentir le chargement, surtout sur les connexions mobiles.
Le format SVG est-il recommandé pour un logo dans un emailing ?
Non. En 2026, le SVG n’est toujours pas supporté de manière fiable dans les emailings. Outlook bloque complètement le SVG, Yahoo Mail l’ignore, et Gmail ne le supporte que partiellement. Le seul cas d’usage valide du SVG dans le contexte email est le standard BIMI, qui utilise un format SVG spécifique (SVG Tiny PS) pour afficher le logo en boîte de réception, mais ce fichier n’est pas intégré dans le corps de l’email.
Thomas Lefèvre est développeur freelance full-stack à Paris depuis 2015, spécialisé WordPress sur mesure, no-code (Bubble, Webflow, Make) et SEO technique. Ex-OpenClassrooms, intervenant ponctuel à l école 42, il documente sur Synergie.Web les outils, techniques et vrais coûts du web freelance en France, testés sur de vrais projets clients.