Crea tu firma en unos minutos, sin necesidad de saber nada de HTML
Hemos creado la web SignatureForEmail.com: un creador de firmas especializado con plantillas listas para usar, instalación sencilla en Gmail, Apple Mail y Outlook, y gestión de equipos para empresas que necesitan que todas las firmas sigan la imagen de marca.
🌐 company.es
En WordToHTML.net también hay varias formas de crear una firma de correo electrónico en HTML:
- Crea tu firma de correo electrónico con el generador de firmas de WordToHTML.net.
- Diseña tu firma de correo desde cero introduciendo todo el texto a mano en el editor visual.
- Crea una firma de correo electrónico en HTML utilizando nuestras plantillas integradas.
- Puedes pegar el código HTML de una firma creada en cualquier otra web que ofrezca esta función en nuestro editor HTML y luego modificarla (cambiar el texto, añadir una foto o un logotipo, etc.).
- Usa nuestro generador de IA para crear un código de firma HTML de ejemplo.
Cómo diseñar una firma de correo electrónico en HTML manualmente desde cero
Te recomendamos crear la firma en una tabla. Por ejemplo, si quieres crear una firma con tu foto a la izquierda y el resto de datos de contacto a la derecha, puedes empezar creando una tabla con dos columnas y una fila:
A continuación, coloca el cursor en la celda de la izquierda de esa tabla y sube o pega tu foto. Te recomendamos que subas una foto pequeña o que le cambies el tamaño al subirla:
Si tu foto es grande, nuestra web te mostrará automáticamente un cuadro de diálogo para cambiar el tamaño. Te recomendamos que ajustes el tamaño de la foto para que tenga entre 100 y 200 píxeles de ancho o alto.
A continuación puedes ver el archivo de imagen redimensionado, que es un archivo pequeño de 6,6 KiB (kilobytes), de 154 x 154 píxeles. Dependiendo del tamaño de la foto que hayas subido, tendrás que ajustarla con el control deslizante de la izquierda hasta que veas una foto pequeña que te guste para tu firma. A continuación, haz clic en el botón azul «Insertar imagen redimensionada».
Después, verás tu foto en la celda izquierda de la tabla:
Si ves una foto grande en el editor visual, solo tienes que hacer clic en ella y reducirla a un tamaño pequeño, tal y como se muestra en la captura de pantalla de arriba (te recomendamos entre 100 y 200 píxeles de ancho y alto).
Te recomendamos que establezcas el ancho de la tabla en 500 px (-100 px) colocando el cursor en cualquier celda de la tabla y haciendo clic en el icono de estilo de tabla:
A continuación, introduce un ancho de tabla, por ejemplo, 500 px, y haz clic en «Aceptar»:
Puedes centrar la foto haciendo clic en ella, seleccionando «Mostrar para ajustar al texto» y, a continuación, haciendo clic en el icono de centrado. Además, puedes reducir el tamaño de la celda de la tabla que contiene la foto arrastrando la línea horizontal del centro hacia la izquierda, tal y como se muestra en la captura de pantalla de abajo.
Si lo prefieres, si quieres que la foto tenga las esquinas redondeadas, puedes usar nuestro editor de imágenes. Haz clic en la foto y, a continuación, en el icono «Imagen»:
A continuación, ve a la sección «Ajustar», selecciona «Recortar elipse» y haz clic en el botón «Guardar»:
A continuación, tienes que seleccionar el formato PNG; si no, verás que se añade un fondo negro a tu imagen, y haz clic en el botón «Guardar»:
Deberías ver entonces una foto redondeada en el editor visual:
A continuación, introduce todos tus datos de contacto y personaliza el estilo como quieras en la celda de la derecha. Consejo: por defecto, si pulsas la tecla Intro, el editor visual creará un nuevo párrafo de texto con espaciado entre líneas; pero si mantienes pulsada la tecla Mayús y pulsas Intro, se insertará un salto de línea, que no añade mucho espacio entre las líneas.
Puedes probar tu firma enviándola a tu cliente de correo electrónico o previsualizándola en una pestaña del navegador, etc.
Si quieres, puedes añadir iconos con enlaces a tus perfiles en redes sociales o a cualquier sitio web que desees:
Cuando estés satisfecho con tu firma, puedes guardarla en línea en WordToHTML o copiarla al portapapeles y pegarla en tu cliente de correo electrónico.
Por ejemplo, en Gmail, ve a «Configuración» y busca «Firma» en la sección «General»; a continuación, crea una nueva firma o edita la que ya tengas.
A continuación, pega el código HTML de WordToHTML.net en el campo de texto de la firma, tal y como se muestra a continuación, selecciona esta firma «para nuevos correos» y haz clic en el botón «Guardar cambios» en la parte inferior de la página de Configuración.
Si todo ha salido bien al crear un nuevo correo en Gmail, verás tu firma tal y como se muestra a continuación:
Cómo crear una firma de correo electrónico en HTML a partir de una plantilla integrada
Lo único que tienes que hacer es hacer clic en un icono para seleccionar la plantilla HTML de la barra de herramientas:
A continuación, selecciona tu plantilla de firma:
Una vez seleccionada la plantilla, puedes editar el contenido en el editor visual:
Sustituye la imagen de marcador de posición por una propia en formato JPG o PNG. No te recomendamos incrustar imágenes ni usar el formato SVG, ya que algunos clientes de correo electrónico no lo admiten.
Si quieres añadir más iconos a tu firma (como los enlaces a redes sociales), te recomendamos que uses los iconos de la web Icons, o bien puedes descargar iconos PNG de Icon Finder y subirlos a nuestra web.
Una vez que hayas creado tu firma, puedes copiarla y pegarla en tu aplicación de correo electrónico:
Puedes usar nuestra herramienta AI Writer para generar una plantilla de firma, pero tienes que ser más específico con la indicación para la IA para obtener los resultados que necesitas.
Por ejemplo, una indicación para la IA como esta:
Crea una firma HTML para un director general utilizando una tabla con el logotipo a la izquierda y mi información a la derecha. Por favor, utiliza CSS solo como estilos en línea.
Esto debería generar una firma HTML similar. Para configurar tu logotipo, haz clic en el marcador de posición de la imagen y luego en el icono «Reemplazar». A continuación, selecciona el logotipo que ya hayas subido o sube uno nuevo y selecciónalo.
Te recomendamos desactivar el modo de página completa para ver y copiar solo el código HTML principal:
Una vez que actualices la imagen del logotipo, la firma tendrá el aspecto que se muestra a continuación. Actualiza la información de la firma según necesites, luego cópiala al portapapeles y pégala en cualquier cliente de correo electrónico que quieras.
Preguntas frecuentes sobre las firmas de correo electrónico en HTML
¿Cuál es el mejor formato de imagen para una firma de correo electrónico?
JPG o PNG son las opciones más seguras para las fotos y los logotipos de las firmas de correo electrónico. No se recomienda usar SVG porque muchos clientes de correo electrónico (incluido Outlook) no lo muestran correctamente y puede estropear por completo el diseño de la firma. El formato PNG es el mejor cuando necesitas un fondo transparente, como un logotipo sin un recuadro blanco alrededor.
¿Qué tamaño debe tener la imagen de una firma de correo electrónico?
Para una foto de perfil o un primer plano, lo ideal es que tenga entre 100 y 200 píxeles de ancho o alto. Las imágenes más grandes ralentizan la carga del correo y pueden parecer demasiado grandes en la bandeja de entrada del destinatario. Intenta que el tamaño del archivo sea pequeño también: intenta que no supere los 10-15 KB por imagen para que la firma se cargue rápidamente en todos los dispositivos y clientes de correo electrónico.
¿Qué ancho debe tener una tabla de firma de correo HTML?
500 px (más o menos 100 px) es un ancho estándar seguro. Esto encaja perfectamente en la mayoría de los paneles de vista previa y de lectura de los clientes de correo electrónico sin obligar a desplazarse horizontalmente, al tiempo que deja espacio suficiente para una foto o un logotipo junto a los datos de contacto.
¿Debería usar CSS en línea para una firma de correo HTML?
Sí. Los clientes de correo eliminan o ignoran los elementos style y las hojas de estilo externas, por lo que todo el estilo debe escribirse como CSS en línea directamente en cada elemento HTML. Por eso, crear firmas con tablas (en lugar de métodos modernos de diseño con CSS como flexbox o grid) sigue siendo la forma más fiable de garantizar la compatibilidad con el correo electrónico.
¿Cómo añado una firma HTML a Gmail?
Copia el código HTML de tu firma ya terminada en el portapapeles; luego, en Gmail, ve a Configuración → Ver todas las configuraciones → General → Firma, crea o edita una firma y pégala en el campo de la firma. Selecciónala como tu firma predeterminada para los nuevos correos (y para las respuestas y reenvíos, si quieres) y, a continuación, haz clic en «Guardar cambios» en la parte inferior de la página.
¿Puedo crear una firma de correo HTML sin saber programar?
Sí. No hace falta que escribas el código HTML a mano: puedes usar un editor visual de arrastrar y soltar, partir de una plantilla de firma integrada o utilizar una herramienta de redacción con IA que genere el código HTML por ti a partir de una descripción de texto (por ejemplo, «crea una firma de director general con un logotipo a la izquierda y la información de contacto a la derecha»). Los tres métodos generan código HTML listo para usar que puedes copiar y pegar en tu cliente de correo electrónico.
¿Por qué mi foto se ve demasiado grande en el editor de firmas?
La mayoría de las fotos que se suben proceden directamente de un móvil o una cámara, con una resolución mucho mayor de la necesaria para una firma de correo electrónico. Usa la herramienta integrada de cambio de tamaño de imágenes para reducirla a unos 100-200 píxeles antes de insertarla, en lugar de subirla a tamaño completo y reducirla visualmente; así mantendrás el tamaño del archivo pequeño y la firma se cargará rápidamente.
¿Cómo puedo crear una foto circular (redondeada) en mi firma?
Usa nuestro editor de recorte de imágenes con la herramienta de recorte elíptico o circular mientras subes tu foto.