# Gerador de assinatura de e-mail HTML

Gera uma assinatura de e-mail HTML limpa e pronta para copiar-colar que renderiza corretamente no Gmail, Outlook e Apple Mail — com avatar/logo, ícones sociais (auto-detectados dos seus links), cor de destaque, tema claro/escuro/auto e um layout em tabela seguro para e-mail com estilos inline. Copie o HTML e cole no seu cliente de e-mail.

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

- **Categoria:** Design

- **Palavras-chave:** assinatura de e-mail, assinatura HTML, assinatura Gmail, assinatura Outlook, Apple Mail, cartão de visitas, branding, ícones sociais, modo escuro, CSS inline, cliente de e-mail, rodapé

## Visão geral

Crie uma assinatura de e-mail profissional que funciona em todos os clientes:

1. **Preencha seus dados** — nome, cargo, empresa, e-mail, telefone, site, endereço e uma URL pública de foto/logo.
2. **Escolha o layout** — lado a lado (foto esquerda com divisor de cor) ou empilhado (só texto). A foto é ocultada sem URL.
3. **Estilize** — cor de destaque, fonte web-safe e tema Claro/Escuro/Auto (Auto injeta um bloco `prefers-color-scheme` que o Apple Mail respeita).
4. **Adicione redes** — cole links do LinkedIn, X, GitHub, Instagram, Facebook ou YouTube; os ícones renderizam como data-URI SVG inline seguros para e-mail.
5. **Copie o HTML** — assinatura tabular autossuficiente com estilos inline para Gmail/Outlook/Apple Mail.

Tudo roda localmente.

## Entradas

- **Nome completo** (text): Jane Doe
- **Cargo** (text): Product Manager
- **Empresa** (text): Acme Inc.
- **E-mail** (text): jane@acme.com
- **Telefone** (text): +1 555 123 4567
- **Site** (text): acme.com
- **Endereço** (text): 123 Market St, San Francisco, CA
- **URL de foto/logo** (text): https://…/avatar.png
- **Redes sociais** (textarea): One per line or comma-separated. Auto-detects LinkedIn, X, GitHub, Instagram, Facebook, YouTube.
- **Cor de destaque** (color)
- **Fonte** (select)
- **Layout** (select)
- **Tema** (select)

## Quando usar

- Quando você precisa de uma assinatura de e-mail profissional que não perca a formatação ou desalinhe em diferentes clientes de e-mail.
- Ao criar assinaturas corporativas padronizadas com links sociais dinâmicos e logotipos hospedados externamente.
- Para garantir compatibilidade nativa com o modo escuro (dark mode) em leitores de e-mail modernos como o Apple Mail.

## Como funciona

- Insira suas informações de contato, cargo, empresa e a URL pública da sua foto ou logotipo.
- Escolha o layout (lado a lado ou empilhado), selecione a fonte web-safe, defina a cor de destaque e escolha o tema visual.
- Insira os links das suas redes sociais para que a ferramenta detecte e gere automaticamente os ícones correspondentes em formato SVG inline.
- Copie o código HTML gerado com estilos inline e cole diretamente nas configurações de assinatura do seu cliente de e-mail.

## Casos de uso

- Profissionais autônomos que desejam transmitir credibilidade com um rodapé de e-mail padronizado e links para portfólios.
- Equipes de marketing que precisam gerar assinaturas HTML consistentes para os colaboradores da empresa sem depender de ferramentas complexas de design.
- Desenvolvedores que buscam um código HTML limpo, sem scripts externos e com ícones sociais embutidos como SVG inline para evitar bloqueios de imagens.

## Perguntas frequentes

### Como insiro minha foto ou logotipo na assinatura?

Você deve hospedar a imagem publicamente (por exemplo, no seu site ou em um serviço de hospedagem de imagens) e colar o link direto da imagem no campo 'URL de foto/logo'.

### Quais redes sociais são detectadas automaticamente?

A ferramenta detecta automaticamente links do LinkedIn, X (Twitter), GitHub, Instagram, Facebook e YouTube, gerando os ícones correspondentes.

### A assinatura funciona no Outlook e no Gmail?

Sim, o código gerado utiliza tabelas HTML e estilos inline, que são os padrões mais seguros para garantir a compatibilidade e renderização correta no Gmail, Outlook e Apple Mail.

### Como funciona a opção de tema 'Auto'?

O tema 'Auto' injeta regras de CSS baseadas em 'prefers-color-scheme', permitindo que clientes de e-mail compatíveis (como o Apple Mail) alternem as cores da assinatura conforme o tema do sistema do destinatário.

### Meus dados pessoais são enviados para algum servidor?

Não. Todo o processamento e geração do código HTML ocorrem localmente no seu navegador, garantindo total privacidade dos seus dados de contato.

## Ferramentas relacionadas

- [De paleta de imagem para design tokens](https://elysiatools.com/pt/tools/image-to-design-tokens): Extrai cores dominantes da imagem por k-means e exporta como variáveis CSS / SCSS / config Tailwind / tokens JSON, com nomes e escala de tons
- [Removedor de Tags HTML](https://elysiatools.com/pt/tools/new-html-tag-stripper): Remove tags HTML do código e extrai conteúdo de texto limpo
- [Gerador de Código QR](https://elysiatools.com/pt/tools/qr-code-generator): Gera códigos QR a partir de URLs ou texto com tamanho e cores personalizáveis
- [Gerador de heatmap de acessibilidade](https://elysiatools.com/pt/tools/accessibility-heatmap-generator): Gera um heatmap de acessibilidade focado em contraste a partir de captura ou HTML e sugere cores de ajuste
- [Gerador em lote de codigos](https://elysiatools.com/pt/tools/barcode-batch-generator): Gera em lote Code 128, EAN-13, UPC-A, ITF-14, QR Code e Data Matrix a partir de CSV ou texto multilinha com saida PNG ZIP ou PDF
- [Extrator Meta Tags](https://elysiatools.com/pt/tools/meta-tag-extractor): Extrai e analisa meta tags, Open Graph, Twitter Cards e dados estruturados de páginas web
- [Extrator de tokens de tema ECharts](https://elysiatools.com/pt/tools/echarts-theme-token-extractor): Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão.
- [Removedor de Cabeçalhos](https://elysiatools.com/pt/tools/header-remover): Remover cabeçalhos de dados CSV para criar arquivos limpos sem cabeçalhos. Perfeito para importações de banco de dados, pipelines de processamento de dados.

## Exemplos

- [Amostras HTML](https://elysiatools.com/pt/samples/html-viewer-samples): Arquivos de amostra para o visualizador HTML no navegador
- [Amostras de HTML com Imagens](https://elysiatools.com/pt/samples/html-with-images): Amostras de código fonte HTML com imagens para testar extração
- [MSG Viewer Samples](https://elysiatools.com/pt/samples/msg-viewer-samples): An Outlook MSG email sample for in-browser preview
- [Amostras de Texto com Dados Sensíveis](https://elysiatools.com/pt/samples/text-with-sensitive-data-samples): Texto contendo vários tipos de dados sensíveis para testar a máscara de dados (telefones, e-mails, documentos de identidade, cartões bancários)

## Conteúdo relacionado

- [Ferramentas de extração, limpeza e exportação de HTML para Markdown/PDF](https://elysiatools.com/pt/hubs/html-convert): Compare ferramentas de limpeza de HTML, extração de atributos, extração de imagens, HTML para Markdown e HTML para PDF em um único hub para fluxos de conversão de conteúdo web.
- [Ferramentas de codigo de barras, QR e etiquetas](https://elysiatools.com/pt/hubs/barcode-utility): Reune em um so hub ferramentas para gerar codigos de barras, criar e decodificar QR, validar UPC/EAN, compartilhar WiFi por QR e preparar etiquetas imprimiveis.
- [Ferramentas de auditoria de acessibilidade web e cores acessiveis](https://elysiatools.com/pt/hubs/web-accessibility-audits): Revise problemas WCAG, ordem de leitor de tela, falhas de contraste, risco para deficiencia de visao de cores e escolhas de cor acessivel em um unico hub para fluxos de acessibilidade web.
- [Ferramentas de Extração, Limpeza e Entrega de HTML](https://elysiatools.com/pt/hubs/html-content-extraction-cleanup-and-delivery): Extraia links, imagens, tabelas e texto limpo de HTML e converta ou renderize o resultado para reutilização.