Gerador gratuito de assinatura de e-mail HTML para Gmail e Outlook

A assinatura de e-mail é o bloco com o seu nome, cargo, empresa e contactos que o programa de e-mail acrescenta ao fim de cada mensagem enviada. O gerador constrói-a como uma tabela HTML com os estilos escritos diretamente em cada elemento, por isso a assinatura colada mantém as cores, os espaços e os links.

Só dois campos são obrigatórios: Nome completo e E-mail. O resto acrescenta-o quando for útil a quem recebe: telefone, site, morada, um botão com link para a sua agenda ou os perfis nas redes sociais.

A norma internacional UIT-T E.123 descreve como se escrevem os contactos em papel timbrado e cartões de visita. Recomenda escrever o telefone com o sinal mais e o indicativo do país, sem parênteses, pôr o e-mail com a respetiva etiqueta por baixo do telefone e escrever o site sem o prefixo http://[1]. O esquema Coluna de etiquetas segue exatamente esta ordem: telefone e, por baixo, e-mail e site, cada um com a etiqueta numa coluna própria.

Um campo vazio não aparece na assinatura. Os nomes abaixo são as etiquetas dos campos no editor, e o texto cinzento em cada campo vazio mostra um exemplo do que pode escrever.

• Cargo e Nome da empresa ficam na mesma linha, separados por um ponto.
• O campo Telefone aceita um número escrito como quiser. A assinatura mostra-o tal como o escreveu, e o link de chamada usa só os algarismos e o sinal mais. Um link tel: não admite espaços nem palavras no meio do número[2].
• O endereço do campo Site web aparece na assinatura tal como o escreve, por exemplo www.empresa.pt. Se faltar https://, o gerador acrescenta-o apenas ao link.
• O campo Avatar / logótipo (URL da imagem) recebe o endereço de uma imagem publicada num site. Depois de o colar, escolhe a forma (Circular, Arredondado, Quadrado) e o tamanho: 40, 56 ou 72 px. Uma imagem com pelo menos 144 px de lado fica nítida em ecrãs de alta densidade.
• A Linha acima do nome recebe um texto curto em maiúsculas, por exemplo o nome da empresa ou um slogan.
• A Etiqueta do nome é uma nota curta num contorno oval ao lado do nome, por exemplo MBA ou os pronomes.
• A Linha adicional leva uma frase sobre o que faz.
• Morada e Dados formais são campos com várias linhas: a tecla Enter também começa uma nova linha na assinatura. Os dados formais, como o NIF ou o número de matrícula da empresa, aparecem em letra pequena por cima do aviso legal.

O gerador tem oito esquemas. Na secção Aparência, cada um aparece numa miniatura que mostra a assinatura com os seus dados e cores. Mudar de esquema não apaga nenhum campo:

• Standard: dados uns por baixo dos outros, com telefone, e-mail e site numa linha com etiquetas.
• Faixa superior: nome, cargo e avatar numa faixa da cor de destaque, e os restantes dados por baixo.
• Coluna de etiquetas: telefone, e-mail e site uns por baixo dos outros, com as etiquetas numa coluna própria.
• Centrada: tudo alinhado ao centro, com o avatar por cima do nome.
• Compacta: nome, cargo, empresa e contactos numa linha, com redes sociais e aviso legal por baixo.
• Duas colunas: avatar, nome e cargo de um lado, contactos, redes e botões do outro, separados por uma linha vertical.
• Minimalista: nome, cargo, empresa, e-mail e telefone, sem site, avatar nem botões.
• Barra inferior: dados em cima e, por baixo, os botões e o nome da empresa numa barra da cor de destaque.

Se preencher um campo que o esquema escolhido não mostra, aparece por baixo da pré-visualização um aviso com o nome desse campo.

Na secção Botões configura dois botões. O primeiro tem fundo da cor de destaque, e o texto e o endereço escrevem-se nos campos Texto do botão e Link CTA. O segundo tem só contorno e usa os campos Texto do segundo botão e Link do segundo botão. Cada botão precisa de texto e de link. Se um dos dois campos ficar vazio, o botão não aparece na assinatura.

O link pode abrir uma página, um novo e-mail (mailto:geral@empresa.pt) ou uma chamada (tel:+351212345678). Não precisa de começar o endereço do site por https://, porque o gerador o acrescenta. Os endereços que começam por javascript:, data:, vbscript: ou file: são recusados, por isso um botão com um link desses não aparece.

O Arredondamento dos botões tem três opções: Sem arredondamento, Ligeiro e Completo. O Outlook para Windows não suporta cantos arredondados em CSS[3], por isso os botões aparecem lá sempre com cantos retos. Os esquemas Compacta e Minimalista não mostram botões. O mesmo link, por exemplo para a sua agenda de marcações, pode ir num cartão de visita como código do gerador de códigos QR.

Na secção Redes sociais, clique no nome de um serviço por baixo de Adicionar perfil e o editor acrescenta um campo para o endereço do perfil. Pode escolher entre 12 serviços: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram e Pinterest. Na assinatura só aparecem os serviços com endereço, e o botão com uma cruz ao lado do campo remove o perfil. Os perfis aparecem na assinatura pela mesma ordem que no editor. Um perfil novo entra no fim da lista, e a ordem muda-se arrastando o perfil pela pega ao lado do campo. Com o teclado, selecione a pega e mova o perfil com as setas para cima e para baixo.

Não precisa do endereço completo do perfil. Nos campos Instagram, Facebook, TikTok, YouTube, X, GitHub, Dribbble, Behance, Telegram e Pinterest basta @utilizador, e o gerador constrói o endereço do perfil. O LinkedIn precisa do endereço, porque os perfis de pessoas e de empresas usam caminhos diferentes (/in/ e /company/). No campo WhatsApp escreva o seu número com o indicativo do país: o gerador transforma-o num link https://wa.me/ só com algarismos, o formato descrito na Central de Ajuda do WhatsApp[4].

Ícones em vez de nomes

A opção Mostrar ícones em vez dos nomes troca os nomes por ícones de 16, 20 ou 24 px em três cores: Cores da plataforma, Escuros ou Brancos, estes últimos para um fundo de assinatura escuro. Os ícones são imagens PNG alojadas em arteontools.com. Um ícone SVG escrito diretamente no código não aparece no Gmail, no Outlook nem no Yahoo Mail[5], e o Gmail remove as imagens guardadas em base64[6]. Cada ícone leva o nome do serviço como texto alternativo, por isso, se um programa de e-mail bloquear as imagens, quem recebe vê esse nome.

Cores

A Cor de destaque escolhe-se entre cinco amostras prontas ou no seletor do navegador, que abre ao clicar no quadrado de cor. Também pode escrever um código HEX no campo ao lado do quadrado, por exemplo o do manual de identidade da marca. O campo aceita o código com ou sem cardinal, com seis ou três carateres, por exemplo #1d4ed8 ou 14c. A Cor do texto e a Cor de fundo funcionam da mesma forma, mas sem amostras. A cor de destaque aplica-se ao nome, aos links, aos botões, à borda e às barras dos esquemas Faixa superior e Barra inferior. A cor de fundo preenche toda a assinatura. Um texto claro sobre fundo colorido verifica-se no verificador de contraste de cores, e o código de uma cor da identidade da marca converte-se no conversor HEX para RGB. Se o manual de identidade indicar as cores em RGB, o código HEX obtém-se com o conversor RGB para HEX, e as cores de impressão em CMYK convertem-se primeiro para RGB no conversor CMYK para RGB. A cor de destaque do logótipo obtém-se com o extrator de cores de imagem, e os tons que combinam, com o gerador de paletas de cores.

Tipo de letra e tamanho do texto

Pode escolher Arial, Verdana, Tahoma, Trebuchet MS ou Georgia, tipos de letra que a Microsoft inclui no Windows[7]. Se o dispositivo de quem recebe não tiver o tipo de letra escolhido, o programa de e-mail usa o seu próprio tipo de letra sem serifa, ou com serifa no caso da Georgia, porque é assim que o gerador o escreve.

O Tamanho do texto tem três níveis: Pequeno 12 px, Normal 13 px e Grande 14 px. O nome é 2 px maior do que o resto do texto e o aviso legal 2 px menor. O Outlook indica o tamanho do tipo de letra em pontos, e 13 px correspondem a 9,75 pt, o que pode confirmar no conversor de px para pt.

Direção do texto

A opção Direção do texto com Da direita para a esquerda dispõe a assinatura como exige um texto em árabe ou hebraico. O gerador acrescenta então o atributo dir="rtl", suportado pelo Gmail, pelo Outlook e pelo Apple Mail[8]. Os números de telefone, os e-mails e os sites continuam da esquerda para a direita, para que os algarismos não se invertam. O Arial e o Tahoma têm letras árabes[9], e o Verdana, o Georgia e o Trebuchet MS não[10].

Borda da assinatura

Em Borda da assinatura marque os lados onde deve ficar uma borda na cor de destaque: Esquerda, Direita, Topo e Fundo. Um só lado tem 4 px, e marcar os quatro desenha uma borda completa de 2 px.

A secção Estilo de texto mostra uma linha para cada elemento da assinatura: Nome completo, Cargo, Empresa, Contactos, Redes sociais e Aviso legal. A cor escolhe-se no seletor do navegador, ao clicar no quadrado de cor. Quando um texto tem cor própria, aparece ao lado do quadrado o botão Repor a cor predefinida. Os botões menos e mais mudam o tamanho 2 px por clique, e entre eles vê o tamanho do texto em píxeis. Pode baixá-lo ou aumentá-lo no máximo 4 px em relação ao tamanho base.

A secção Espaçamento define a Margem interna da assinatura (8, 16 ou 24 px) e o espaço entre elementos de 2 em 2 px, de 0 a 32 px. Só vê os espaços dos elementos que estão na assinatura e no esquema escolhido:

• Abaixo do nome
• Abaixo do cargo
• Abaixo da linha adicional
• Acima dos contactos
• Acima das redes sociais
• Acima do botão
• Acima do aviso legal

A secção Aviso legal tem um campo para o texto que aparece no fim da assinatura em letra mais pequena, por exemplo um aviso de confidencialidade. O campo começa vazio, e o botão Inserir um aviso de exemplo insere um aviso de confidencialidade pronto, que pode alterar. Um campo vazio não acrescenta nada à assinatura.

A opção Mostrar linha de separação entre os contactos e o aviso legal aparece quando a assinatura tem aviso legal ou dados formais e acrescenta por cima deles uma linha horizontal. O Estilo de linha pode ser contínuo, tracejado ou pontilhado, a espessura de 1, 2 ou 3 px, e a Cor de linha à escolha, com o botão Predefinida para voltar ao cinzento claro #e5e7eb. A linha aparece nos esquemas Standard, Faixa superior, Coluna de etiquetas e Centrada. No esquema Duas colunas, uma linha fina própria separa o aviso legal do resto.

Clique em Copiar assinatura (Gmail / Outlook). O botão copia a assinatura com a formatação, por isso as cores, os links e as imagens mantêm-se depois de colar. Por baixo da pré-visualização aparecem então três passos para colar, os mesmos que abaixo, com um seletor entre Gmail e Outlook. Se alterar alguma coisa na assinatura depois de a copiar, o editor lembra-o de a copiar outra vez.

Gmail no navegador

1. Clique no ícone das definições no canto superior direito e abra a vista com todas as definições.
2. Na secção Assinatura, cole a assinatura na caixa com Ctrl + V, ou Cmd + V num Mac.
3. Guarde as alterações com o botão no fundo da página.

Uma assinatura do Gmail pode ter até 10 000 carateres, e a imagem incluída na assinatura também conta para esse limite[11].

Novo Outlook para Windows e Outlook na Web

1. Selecione Configurações e depois Contas e Assinaturas.
2. Adicione uma nova assinatura, dê-lhe um nome e cole a assinatura na caixa de edição.
3. Selecione Guardar.

No Outlook clássico para Windows, abra uma nova mensagem e, no menu Mensagem, selecione Assinatura e depois Assinaturas[12].

A pré-visualização mostra a assinatura como um navegador a desenha. Os programas de e-mail entendem menos HTML, e cada um à sua maneira, por isso o gerador evita os elementos que eles não mostram. Algumas diferenças dependem, porém, do que escrever:

• Uma imagem guardada no próprio endereço (data:image/png;base64,…) não aparece no Gmail[6]. O código base64 é útil em ficheiros HTML e CSS, como mostra o conversor de imagem para Base64, mas o campo do avatar precisa do endereço de um ficheiro, por isso o editor mostra um aviso quando cola código base64. Com o conversor Base64 para imagem recupera o ficheiro de imagem a partir desse código e depois publica-o no seu site.
• O Gmail não mostra imagens SVG nas contas Google[13], por isso converta antes para PNG um logótipo guardado em SVG, por exemplo com o conversor SVG para PNG.
• O Outlook para Windows não mostra imagens WebP[14], por isso guarde o logótipo e a fotografia em PNG ou JPG, por exemplo com o conversor WebP para PNG.
• O Outlook para Windows bloqueia por predefinição a transferência automática de imagens da Internet[15]. Enquanto quem recebe não a autorizar, vê os nomes dos serviços em vez dos ícones e nenhum avatar.
• O endereço da imagem tem de levar diretamente ao ficheiro. Um link de partilha do Google Drive ou do Dropbox abre uma página de pré-visualização, por isso a imagem não aparece.

O gerador grava os dados e as definições no navegador (localStorage) a cada alteração, em separado para cada versão de idioma da página. Se voltar no mesmo navegador, a assinatura está no último estado gravado. Os dados da assinatura não são enviados para o nosso servidor.

O botão Exportar configuração guarda dados, cores, esquema, espaçamento e estilos de texto num ficheiro .json, e Importar configuração carrega esse ficheiro noutro computador ou no de um colega que só muda os seus próprios dados. A importação verifica cada valor: uma cor que não esteja em HEX e um tipo de letra fora da lista mantêm as definições anteriores à importação.

O botão Repor predefinições, depois de confirmar, esvazia todos os campos e devolve à assinatura o aspeto inicial. Não é possível anular, por isso exporte antes a configuração.

Todos estes botões estão no cartão da pré-visualização, por baixo do botão de copiar. Aí encontra também Copiar código HTML (código simples para um editor HTML) e Transferir em HTML (o ficheiro assinatura-email.html). O seletor por cima da pré-visualização, com um sol (Claro) ou uma lua (Escuro), mostra a assinatura em fundo claro ou escuro.