# Constructor de firmas de correo HTML

Genera una firma de correo HTML limpia y lista para copiar-pegar que se ve correctamente en Gmail, Outlook y Apple Mail — con avatar/logo, iconos sociales (auto-detectados desde tus enlaces), color de acento, tema claro/oscuro/auto, y un diseño basado en tablas con estilos en línea seguro para correo. Copia el HTML y pégalo en tu cliente.

> Página canónica: https://elysiatools.com/es/tools/email-signature-html-builder

- **Categoría:** Design

- **Palabras clave:** firma de correo, firma HTML, firma Gmail, firma Outlook, Apple Mail, tarjeta de presentación, branding, iconos sociales, modo oscuro, CSS inline, cliente de correo, pie

## Descripción general

Crea una firma de correo profesional que funciona en todos los clientes:

1. **Completa tus datos** — nombre, cargo, empresa, correo, teléfono, sitio, dirección y una URL pública de foto/logo.
2. **Elige un diseño** — lado a lado (foto izquierda con divisor de acento) o apilado (solo texto). La foto se oculta si no provees URL.
3. **Estiliza** — color de acento, fuente web-safe y tema Claro/Oscuro/Auto (Auto inyecta un bloque `prefers-color-scheme` que Apple Mail respeta).
4. **Añade redes** — pega enlaces de LinkedIn, X, GitHub, Instagram, Facebook o YouTube; los iconos se renderizan como data-URI SVG inline seguros para correo.
5. **Copia el HTML** — firma tabular autocontenida con estilos inline, lista para pegar en Gmail/Outlook/Apple Mail.

Todo corre localmente.

## Entradas

- **Nombre completo** (text): Jane Doe
- **Cargo** (text): Product Manager
- **Empresa** (text): Acme Inc.
- **Correo** (text): jane@acme.com
- **Teléfono** (text): +1 555 123 4567
- **Sitio web** (text): acme.com
- **Dirección** (text): 123 Market St, San Francisco, CA
- **URL de foto/logo** (text): https://…/avatar.png
- **Redes sociales** (textarea): One per line or comma-separated. Auto-detects LinkedIn, X, GitHub, Instagram, Facebook, YouTube.
- **Color de acento** (color)
- **Fuente** (select)
- **Disposición** (select)
- **Tema** (select)

## Cuándo usarlo

- Cuando necesitas una firma de correo profesional que mantenga su diseño y formato en múltiples clientes de correo como Outlook, Gmail y Apple Mail.
- Al querer integrar iconos de redes sociales y fotos de perfil sin que se rompa el diseño o se bloqueen las imágenes externas.
- Cuando buscas adaptar tu firma corporativa a temas claros y oscuros de forma automática según las preferencias del sistema del destinatario.

## Cómo funciona

- Introduce tus datos de contacto básicos como nombre, cargo, empresa, teléfono, sitio web y la URL de tu logotipo o foto.
- Configura el diseño eligiendo entre una disposición lado a lado o apilada, selecciona tu color de acento y define el tema visual (claro, oscuro o automático).
- Pega los enlaces de tus redes sociales para que la herramienta detecte automáticamente las plataformas y genere los iconos correspondientes en formato SVG inline.
- Copia el código HTML generado y pégalo directamente en la sección de firmas de tu cliente de correo electrónico preferido.

## Casos de uso

- Creación de firmas corporativas unificadas para equipos de ventas y soporte que utilizan diferentes clientes de correo.
- Diseño de firmas minimalistas para desarrolladores y profesionales técnicos que prefieren un estilo limpio y compatibilidad con modo oscuro.
- Configuración rápida de tarjetas de presentación digitales integradas en el pie de los correos electrónicos de trabajadores independientes.

## Preguntas frecuentes

### ¿Cómo añado la firma a mi cliente de correo?

Copia el código HTML generado por la herramienta y pégalo directamente en el editor de firmas de Gmail, Outlook o Apple Mail.

### ¿Qué redes sociales se detectan automáticamente?

La herramienta detecta enlaces de LinkedIn, X (Twitter), GitHub, Instagram, Facebook y YouTube para generar sus respectivos iconos.

### ¿Cómo funciona el tema automático?

El tema automático inyecta estilos multimedia que adaptan la firma al modo claro u oscuro según la configuración del sistema del destinatario.

### ¿Por qué se utiliza una estructura de tablas HTML?

Las tablas con estilos en línea son el estándar más seguro para asegurar que la firma se renderice correctamente en clientes de correo antiguos y modernos.

### ¿Dónde se almacenan mis datos personales?

Todo el procesamiento se realiza de forma local en tu navegador, por lo que tus datos de contacto no se envían a ningún servidor externo.

## Herramientas relacionadas

- [De paleta de imagen a design tokens](https://elysiatools.com/es/tools/image-to-design-tokens): Extrae los colores dominantes de una imagen con k-means y expórtalos como variables CSS / SCSS / configuración Tailwind / tokens JSON, con nombres y escala de tonos
- [Eliminador de Etiquetas HTML](https://elysiatools.com/es/tools/new-html-tag-stripper): Elimina etiquetas HTML del código y extrae contenido de texto limpio
- [Generador de Código QR](https://elysiatools.com/es/tools/qr-code-generator): Genera códigos QR desde URLs o texto con tamaño y colores personalizables
- [Generador de heatmap de accesibilidad](https://elysiatools.com/es/tools/accessibility-heatmap-generator): Genera un heatmap de accesibilidad enfocado en contraste desde una captura o HTML y sugiere colores de parche
- [Generador por lotes de codigos](https://elysiatools.com/es/tools/barcode-batch-generator): Genera por lotes Code 128, EAN-13, UPC-A, ITF-14, QR Code y Data Matrix desde CSV o texto multilinea con salida PNG ZIP o PDF
- [Extractor Meta Tags](https://elysiatools.com/es/tools/meta-tag-extractor): Extrae y analiza meta etiquetas, Open Graph, Twitter Cards y datos estructurados de páginas web
- [Extractor de tokens de tema ECharts](https://elysiatools.com/es/tools/echarts-theme-token-extractor): Extrae design tokens — colores, números, tamaños de fuente y cadenas — de un JSON de tema ECharts y expórtalos directamente a tu design system. Pega un objeto de tema (el que registras y pasas a echarts.init(dom, themeName)) y la herramienta recorre cada hoja, etiquetando cada color (con normalización opcional nombrado/rgb → hex), número de espaciado, tamaño de fuente y cadena, para luego emitir variables CSS limpias, una configuración theme.extend de Tailwind, tokens.json de Style Dictionary o variables SCSS. Tiende el puente entre un tema de visualización ECharts y los tokens de diseño Figma/CSS/Tailwind sin copiar cada valor a mano.
- [Removedor de Encabezados](https://elysiatools.com/es/tools/header-remover): Eliminar encabezados de datos CSV para crear archivos limpios sin encabezados. Perfecto para importaciones de bases de datos, tuberías de procesamiento de datos.

## Ejemplos

- [Muestras HTML](https://elysiatools.com/es/samples/html-viewer-samples): Archivos de muestra para el visor HTML en el navegador
- [Muestras de HTML con Imágenes](https://elysiatools.com/es/samples/html-with-images): Muestras de código fuente HTML con imágenes para probar la extracción
- [MSG Viewer Samples](https://elysiatools.com/es/samples/msg-viewer-samples): An Outlook MSG email sample for in-browser preview
- [Muestras de Texto con Datos Sensibles](https://elysiatools.com/es/samples/text-with-sensitive-data-samples): Texto que contiene varios tipos de datos sensibles para probar el enmascaramiento de datos (teléfonos, correos, documentos de identidad, tarjetas bancarias)

## Contenido relacionado

- [Herramientas de extracción, limpieza y exportación HTML a Markdown/PDF](https://elysiatools.com/es/hubs/html-convert): Compara herramientas de limpieza HTML, extracción de atributos, extracción de imágenes, HTML a Markdown y HTML a PDF en un solo hub para flujos de conversión de contenido web.
- [Herramientas de codigo de barras, QR y etiquetas](https://elysiatools.com/es/hubs/barcode-utility): Reune en un solo hub herramientas para generar codigos de barras, crear y decodificar QR, validar UPC/EAN, compartir WiFi por QR y preparar etiquetas imprimibles.
- [Herramientas de auditoria de accesibilidad web y color accesible](https://elysiatools.com/es/hubs/web-accessibility-audits): Revisa problemas WCAG, orden de lector de pantalla, fallos de contraste, riesgo de vision cromatica y elecciones de color accesible en un solo hub para flujos de accesibilidad web.
- [Herramientas de Extracción, Limpieza y Entrega de HTML](https://elysiatools.com/es/hubs/html-content-extraction-cleanup-and-delivery): Extrae enlaces, imágenes, tablas y texto limpio de HTML; después convierte o renderiza el resultado para reutilizarlo.