Logo para email y firma de correo: formatos, tamaños y legibilidad
Guía práctica para preparar un logo de firma, newsletter y email transaccional sin perder nitidez, contraste ni coherencia de marca.
El logo en un correo puede parecer un detalle pequeño: unos píxeles en una firma, la cabecera de una newsletter, una factura, una confirmación o una respuesta de soporte. Sin embargo, es uno de los puntos de contacto más repetidos de una marca. Un prospecto puede ver tu firma antes de entrar en la web. Un cliente puede abrir un recibo meses después. Si el logo se ve borroso, pesa demasiado, desaparece en modo oscuro o queda bloqueado por el cliente de correo, la identidad pierde confianza.
La dificultad es que el email no funciona como una página web normal. Los clientes de correo aplican reglas propias, bloquean imágenes en ciertos casos, limitan CSS y reescriben HTML. Gmail documenta compatibilidad parcial con CSS, y las pruebas de compatibilidad email muestran que los formatos modernos o las imágenes integradas no son universales. Un logo perfecto en una maqueta puede degradarse en Outlook, Apple Mail, Gmail o una app móvil.
Esta guía explica cómo preparar un logo para email y firma de correo: formato, tamaño, peso, legibilidad, contraste, texto alternativo, modo oscuro y brief de entrega. La meta no es añadir una carga técnica más, sino convertir el correo en un soporte fiable de identidad. Para usos web amplios, consulta también nuestra guía del logo para sitio web y la del logo responsive.
1. Por qué el email necesita su propia versión
Un logo de firma no es decoración. Confirma el remitente, tranquiliza al destinatario y conecta cada intercambio con una marca identificable. En ventas aparece en presupuestos, seguimientos y citas. En soporte acompaña respuestas y mensajes de cuenta. En newsletters actúa como ancla visual. En emails transaccionales ayuda al usuario a entender que el mensaje es legítimo.
El error habitual consiste en reutilizar el logo principal sin adaptación. Una versión horizontal muy ancha puede dominar la firma. Un logo con lema deja de leerse en móvil. Un archivo vectorial puede no renderizarse. Una imagen pesada ralentiza la apertura y transmite poca precisión en una conexión móvil.
Como en un kit de entrega de logo, la buena práctica es definir una variante dedicada: simple, legible, ligera y compatible con el canal. No es otro logo; es una declinación controlada de la misma identidad.
2. PNG, SVG, JPG: elegir formato
Para una firma de correo, el PNG transparente sigue siendo la opción práctica más segura. Mantiene bordes limpios, acepta transparencia y funciona en los entornos más comunes. Debe exportarse desde una fuente vectorial limpia y comprimirse sin dañar los contornos.
El SVG es excelente en un sitio web, pero en email resulta delicado. Algunos clientes lo filtran, otros lo muestran de forma imprevisible y muchas herramientas de firma lo rechazan. Mantén el SVG en el kit fuente, pero usa normalmente un PNG en los emails reales. Nuestra guía PNG, SVG y AI para logos explica por qué el formato depende del soporte.
El JPG rara vez conviene para un logo porque añade compresión con pérdida y no gestiona transparencia. Puede servir para una banda fotográfica, no para una marca con tipografía fina. WebP y formatos recientes también requieren cautela: el soporte mejora, pero el correo premia elecciones conservadoras.
3. Tamaños, peso y pantallas de alta densidad
El tamaño debe pensarse como ancho visible más tamaño fuente. Una firma clásica suele funcionar entre 120 y 220 píxeles visibles, según la longitud del nombre, el signo y la densidad de la firma. Para conservar nitidez en pantallas Retina, exporta una fuente al doble de ancho y muéstrala a la mitad en HTML.
El peso debe ser muy bajo. Un logo de firma no necesita pesar cientos de kilobytes. Usa un archivo optimizado, elimina metadatos innecesarios y conserva una paleta limpia. Un archivo ligero abre más rápido y se percibe más profesional.
Prueba en buzones reales, no solo en navegador. Envíate mensajes a Gmail, Outlook, Apple Mail y una app móvil si es posible. Observa respuestas, reenvíos y vistas de conversación. Las firmas suelen degradarse tras varias respuestas; conviene verlo antes de una campaña o una secuencia comercial.
4. Firma de correo: claridad y coherencia
Una buena firma no intenta recrear una página de inicio. Debe ser legible, ligera y profesional. El logo puede colocarse encima de los datos, a la izquierda de un bloque de texto o al final. En cada caso, conserva espacio de seguridad. Si el logo toca el nombre, el teléfono, un badge social o una línea divisoria, pierde su papel de ancla.
Evita firmas compuestas por una gran imagen única. Crean problemas de accesibilidad, se rompen al reenviar y dificultan copiar datos de contacto. El logo puede ser una imagen, pero la información útil debe seguir como texto HTML simple: nombre, cargo, teléfono, web y dirección si hace falta.
Mantén una jerarquía clara. El nombre de la persona y la empresa deben escanearse sin exceso de colores. Los iconos sociales, si existen, deben quedar secundarios. Un logo bien dimensionado aporta credibilidad; uno enorme parece publicidad dentro de una conversación.
5. Newsletters y emails transaccionales
En una newsletter, el logo suele aparecer arriba para instalar contexto antes del título. Debe reconocerse sin robar atención al mensaje. Si el email ya incluye una imagen hero, el logo debe ser discreto. Si el email es transaccional, como una confirmación de pedido, debe tranquilizar: el usuario debe entender al instante quién escribe.
Los emails transaccionales exigen disciplina. Se leen rápido, a veces desde una notificación y a veces meses después. Un logo que depende de un fondo complejo se vuelve frágil. Prefiere una versión transparente o una pequeña zona neutra con contraste estable.
La coherencia con la web importa. Si el header del sitio usa una versión compacta, el email puede retomarla. Si el footer del sitio prevé una variante clara sobre fondo oscuro, puede inspirar una versión para newsletters. La idea es prolongar el sistema, no inventar una firma desconectada.
6. Imágenes bloqueadas, alt text y accesibilidad
Muchos clientes de correo pueden bloquear imágenes por defecto o mostrarlas solo tras autorización. El mensaje debe seguir siendo comprensible cuando el logo no se ve. Añade un texto alternativo breve, normalmente el nombre de la marca. No conviertas el alt text en un eslogan largo o una frase promocional.
Accesibilidad y credibilidad se encuentran aquí. Una persona con conexión lenta, lector de pantalla o configuración estricta debe identificar al remitente. El logo no debe ser la única información de marca. El nombre de la empresa debe aparecer también como texto en la firma o en el cuerpo.
Las reglas de contraste importan incluso para un logo pequeño. Nuestra guía sobre accesibilidad y contraste del logo muestra cómo un signo demasiado fino o pálido desaparece rápido. En email, esta debilidad aumenta con modo oscuro, móvil y compresión.
7. Modo oscuro y contraste
El modo oscuro puede invertir fondos, modificar colores o colocar la imagen en un contexto inesperado. Un logo oscuro transparente que funciona sobre blanco puede desaparecer sobre negro. Un logo claro puede perderse en un tema luminoso. La mejor defensa consiste en preparar dos variantes o colocar el logo sobre una pequeña zona neutra con aire suficiente.
Evita contornos añadidos de urgencia. Si necesitas una versión clara, debe dibujarse y aprobarse como variante oficial. Sombras automáticas y filtros CSS no son fiables en email.
Los colores de marca también requieren pruebas. Algunos tonos pierden contraste en fondos oscuros o resultan agresivos en pantallas OLED. Una revisión visual real en varios clientes de correo vale más que una regla abstracta. La meta es simple: la marca debe seguir identificable sin esfuerzo.
8. Checklist de brief y entrega
Al pedir o aprobar un logo para email, solicita PNG transparente, export optimizado 2x, versión clara, versión oscura y archivo vectorial fuente. Precisa ancho visible deseado, fondos posibles, herramientas de firma y tipos de correo: comercial, soporte, newsletter y transaccional.
Añade reglas de uso: no estirar, no recolorear sin guía, no usar con contraste insuficiente, no bajar del ancho mínimo y no usar la versión con lema en firmas compactas. Estas reglas evitan que cada persona improvise una firma distinta.
Con Wilogo, puedes incluir estas restricciones desde el brief. Indica que el logo debe vivir en la web, redes, documentos y emails. Cuanto más claro sea el contexto, más fácil será comparar rutas de logo. Crear un brief de logo temprano evita descubrir las restricciones de email tras validar la identidad.
Prepara un logo que funcione de verdad en email
Describe tus firmas, newsletters, fondos y restricciones de legibilidad. Wilogo te ayuda a enmarcar un logo útil en los puntos de contacto reales de tu marca.
9. Fuentes útiles
Fuentes revisadas: documentación de Gmail sobre CSS compatible en email, ayuda de Gmail para firmas, Can I Email sobre compatibilidad de imágenes base64, Litmus sobre bloqueo de imágenes y guía W3C/WCAG de contraste.
FAQ
¿Qué formato usar para un logo en firma de correo?
Un PNG transparente suele ser la entrega más segura. El SVG es útil como archivo fuente, pero los clientes de correo y las herramientas de firma no lo gestionan de forma uniforme.
¿Qué ancho debe tener el logo de una firma?
Un ancho visible entre 120 y 220 píxeles funciona en muchas firmas. Exporta una fuente 2x para pantallas de alta densidad y comprime el archivo.
¿Conviene integrar el logo en base64?
Normalmente no. Las imágenes base64 pueden aumentar el peso del mensaje y no tienen soporte uniforme. Una imagen alojada correctamente con texto alternativo suele ser más fiable.
¿Cómo preparar el modo oscuro?
Prepara una versión legible sobre fondos claros y oscuros, o coloca el logo en una pequeña zona neutra. No dependas del cliente de correo para corregir el contraste.
