Generatore gratuito di firma e-mail HTML per Gmail e Outlook

La firma e-mail è il blocco con nome, ruolo, azienda e contatti che il programma di posta aggiunge in fondo a ogni messaggio inviato. Il generatore la costruisce come una tabella HTML con gli stili scritti direttamente su ogni elemento, per questo la firma incollata mantiene colori, spazi e link.

I campi obbligatori sono solo due: Nome completo ed E-mail. Il resto lo aggiungi quando serve a chi riceve: telefono, sito web, indirizzo, un pulsante con link al tuo calendario o i profili social.

La norma internazionale ITU-T E.123 descrive come scrivere i contatti su carta intestata e biglietti da visita. Raccomanda di scrivere il numero con il segno più e il prefisso internazionale, senza parentesi, di mettere l’indirizzo e-mail con la sua etichetta sotto il telefono e di scrivere il sito senza il prefisso http://[1]. Il layout Colonna di etichette segue proprio questo ordine: telefono e, sotto, e-mail e sito, ognuno con l’etichetta in una colonna a parte.

Un campo lasciato vuoto non compare nella firma. I nomi qui sotto sono le etichette dei campi nell’editor, e il testo grigio in ogni campo vuoto mostra un esempio di cosa scrivere.

• Ruolo e Nome azienda stanno sulla stessa riga, separati da un punto.
• Il campo Telefono accetta un numero scritto come preferisci. La firma lo mostra così com’è, mentre il link di chiamata usa solo le cifre e il segno più. Un link tel: non ammette spazi né parole dentro il numero[2]. Lo zero dei prefissi dei numeri fissi italiani resta nel link, perché in Italia fa parte del numero anche per chi chiama dall’estero[3].
• L’indirizzo del campo Sito web compare nella firma come lo scrivi, per esempio www.azienda.it. Se manca https://, il generatore lo aggiunge solo al link.
• Il campo Avatar / logo (URL dell’immagine) accetta l’indirizzo di un’immagine pubblicata su un sito. Dopo averlo incollato scegli la forma (Circolare, Arrotondato, Quadrato) e la dimensione: 40, 56 o 72 px. Un’immagine di almeno 144 px di lato resta nitida sugli schermi ad alta densità.
• La Riga sopra il nome contiene un testo breve in maiuscolo, per esempio il nome dell’azienda o uno slogan.
• L’Etichetta nome è una breve nota in una cornice ovale accanto al nome, per esempio MBA o i pronomi.
• La Riga aggiuntiva contiene una frase su ciò che fai.
• Indirizzo e Dati formali sono campi su più righe: il tasto Invio va a capo anche nella firma. I dati formali, come Partita IVA, codice fiscale o numero REA, compaiono in piccolo sopra l’avviso legale.

Il generatore ha otto layout. Nella sezione Aspetto ognuno compare in una miniatura che mostra la firma con i tuoi dati e colori. Cambiare layout non cancella nessun campo:

• Standard: dati uno sotto l’altro, con telefono, e-mail e sito su una riga con etichette.
• Barra superiore: nome, ruolo e avatar su una barra del colore di accento, gli altri dati sotto.
• Colonna di etichette: telefono, e-mail e sito uno sotto l’altro, con le etichette in una colonna a parte.
• Centrato: tutto è centrato e l’avatar sta sopra il nome.
• Compatto: nome, ruolo, azienda e contatti su una riga, social e avviso legale sotto.
• Due colonne: avatar, nome e ruolo da un lato, contatti, social e pulsanti dall’altro, separati da una linea verticale.
• Minimalista: solo nome, ruolo, azienda, e-mail e telefono, mentre sito, avatar e pulsanti restano fuori.
• Barra inferiore: dati in alto e, sotto, pulsanti e nome dell’azienda su una barra del colore di accento.

Se compili un campo che il layout scelto non mostra, sotto l’anteprima compare un avviso con il nome di quel campo.

Nella sezione Pulsanti imposti due pulsanti. Il primo ha lo sfondo del colore di accento, e il suo testo e il suo indirizzo si scrivono nei campi Testo del pulsante e Link CTA. Il secondo ha il solo bordo e usa i campi Testo del secondo pulsante e Link del secondo pulsante. Ogni pulsante ha bisogno di testo e link. Se uno dei due campi resta vuoto, il pulsante non compare nella firma.

Il link può aprire una pagina, una nuova e-mail (mailto:info@azienda.it) o una chiamata (tel:+390212345678). Non serve iniziare l’indirizzo del sito con https://, perché lo aggiunge il generatore. Gli indirizzi che iniziano con javascript:, data:, vbscript: o file: vengono rifiutati, quindi un pulsante con un link del genere non compare.

L’Arrotondamento pulsanti ha tre opzioni: Nessun arrotondamento, Leggero e Completo. Outlook per Windows non supporta gli angoli arrotondati in CSS[4], quindi lì i pulsanti hanno sempre angoli retti. I layout Compatto e Minimalista non mostrano pulsanti. Lo stesso link, per esempio al calendario degli appuntamenti, può finire su un biglietto da visita come codice del generatore di codici QR.

Nella sezione Social media fai clic sul nome di un servizio sotto Aggiungi profilo e l’editor aggiunge un campo per l’indirizzo del profilo. Puoi scegliere tra 12 servizi: LinkedIn, Instagram, Facebook, TikTok, YouTube, X (Twitter), GitHub, Dribbble, Behance, WhatsApp, Telegram e Pinterest. Nella firma compaiono solo i servizi con un indirizzo, e il pulsante con la crocetta accanto al campo rimuove il profilo. I profili compaiono nella firma nello stesso ordine dell’editor. Uno nuovo si aggiunge in fondo all’elenco, e l’ordine lo cambi trascinando il profilo per la maniglia accanto al campo. Da tastiera, seleziona la maniglia e sposta il profilo con le frecce su e giù.

L’indirizzo completo del profilo non serve. Nei campi Instagram, Facebook, TikTok, YouTube, X, GitHub, Dribbble, Behance, Telegram e Pinterest basta @nomeutente, e il generatore costruisce l’indirizzo del profilo. LinkedIn richiede l’indirizzo, perché i profili di persone e aziende usano percorsi diversi (/in/ e /company/). Nel campo WhatsApp scrivi il tuo numero con il prefisso internazionale: il generatore lo trasforma in un link https://wa.me/ di sole cifre, nel formato descritto dal Centro assistenza WhatsApp[5].

Icone al posto dei nomi

L’opzione Mostra icone al posto dei nomi sostituisce i nomi con icone da 16, 20 o 24 px in tre colori: Colori piattaforma, Scure o Bianche, queste ultime per uno sfondo scuro della firma. Le icone sono immagini PNG ospitate su arteontools.com. Un’icona SVG scritta direttamente nel codice non si vede in Gmail, Outlook e Yahoo Mail[6], e Gmail elimina le immagini salvate in base64[7]. Ogni icona ha il nome del servizio come testo alternativo, quindi se un programma di posta blocca le immagini, chi riceve vede quel nome.

Colori

Il Colore accento lo scegli tra cinque campioni pronti o nel selettore del browser, che si apre con un clic sul quadrato colorato. Puoi anche scrivere un codice HEX nel campo accanto al quadrato, per esempio quello del manuale di immagine coordinata. Il campo accetta il codice con o senza cancelletto, di sei o tre caratteri, per esempio #1d4ed8 o 14c. Il Colore testo e il Colore sfondo funzionano allo stesso modo, ma senza campioni. Il colore di accento va a nome, link, pulsanti, bordo e alle barre dei layout Barra superiore e Barra inferiore. Il colore di sfondo riempie tutta la firma. Un testo chiaro su sfondo colorato si controlla con il verificatore di contrasto colori, e il codice di un colore aziendale si converte con il convertitore HEX in RGB. Se il manuale di immagine coordinata indica i colori in RGB, il codice HEX lo ottieni con il convertitore RGB in HEX, mentre i colori di stampa in CMYK li porti prima in RGB con il convertitore CMYK in RGB. Il colore di accento del logo lo ricavi con l’estrattore di colori da immagine, e le tonalità abbinate, con il generatore di palette di colori.

Carattere e dimensione del testo

Puoi scegliere tra Arial, Verdana, Tahoma, Trebuchet MS e Georgia, caratteri che Microsoft distribuisce con Windows[8]. Se il dispositivo di chi riceve non ha il carattere scelto, il programma di posta usa il proprio carattere senza grazie, o con grazie nel caso di Georgia, perché il generatore lo scrive così.

La Dimensione testo ha tre livelli: Piccolo 12 px, Normale 13 px e Grande 14 px. Il nome è 2 px più grande del resto del testo e l’avviso legale 2 px più piccolo. Outlook indica la dimensione del carattere in punti, e 13 px corrispondono a 9,75 pt, come puoi controllare nel convertitore px in pt.

Direzione del testo

L’opzione Direzione del testo impostata su Da destra a sinistra dispone la firma come richiede un testo in arabo o ebraico. Il generatore aggiunge allora l’attributo dir="rtl", supportato da Gmail, Outlook e Apple Mail[9]. Numeri di telefono, indirizzi e-mail e siti restano da sinistra a destra, così le cifre non si invertono. Arial e Tahoma contengono le lettere arabe[10], Verdana, Georgia e Trebuchet MS no[11].

Bordo della firma

In Bordo della firma spunta i lati su cui deve comparire un bordo nel colore di accento: Sinistro, Destro, Superiore e Inferiore. Un lato singolo è largo 4 px, e selezionando tutti e quattro si ottiene una cornice completa da 2 px.

La sezione Stile testo mostra una riga per ogni elemento della firma: Nome completo, Ruolo, Azienda, Contatti, Social media e Avviso legale. Il colore si sceglie nel selettore del browser con un clic sul quadrato colorato. Quando un testo ha un colore proprio, accanto al quadrato compare il pulsante Ripristina il colore predefinito. I pulsanti meno e più cambiano la dimensione di 2 px a ogni clic, e tra i due vedi la dimensione del testo in pixel. Puoi ridurla o aumentarla al massimo di 4 px rispetto alla dimensione base.

La sezione Spaziatura imposta il Margine interno della firma (8, 16 o 24 px) e la distanza tra gli elementi a passi di 2 px, da 0 a 32 px. Vedi solo le distanze degli elementi presenti nella firma e nel layout scelto:

• Sotto il nome
• Sotto il ruolo
• Sotto la riga aggiuntiva
• Sopra i contatti
• Sopra i social media
• Sopra il pulsante
• Sopra l’avviso legale

La sezione Avviso legale ha un campo per il testo che compare in fondo alla firma con un carattere più piccolo, per esempio una nota di riservatezza. Il campo parte vuoto, e il pulsante Inserisci un avviso di esempio inserisce una nota di riservatezza pronta che puoi modificare. Un campo vuoto non aggiunge nulla alla firma.

L’opzione Mostra linea di separazione tra i contatti e l’avviso legale compare quando la firma ha un avviso legale o dati formali, e aggiunge sopra di essi una linea orizzontale. Lo Stile linea può essere continuo, tratteggiato o punteggiato, lo spessore di 1, 2 o 3 px, e il Colore linea a scelta, con il pulsante Predefinito che riporta al grigio chiaro #e5e7eb. La linea compare nei layout Standard, Barra superiore, Colonna di etichette e Centrato. Nel layout Due colonne una sottile linea propria separa l’avviso legale dal resto.

Fai clic su Copia firma (Gmail / Outlook). Il pulsante copia la firma con la formattazione, quindi dopo averla incollata restano colori, link e immagini. Sotto l’anteprima compaiono allora tre passaggi per incollarla, gli stessi riportati qui sotto, con un selettore tra Gmail e Outlook. Se dopo la copia cambi qualcosa nella firma, l’editor ti ricorda di copiarla di nuovo.

Gmail nel browser

1. In alto a destra fai clic sull’icona delle impostazioni e poi su Visualizza tutte le impostazioni.
2. Nella sezione Firma incolla la firma nel riquadro con Ctrl + V, o Cmd + V su Mac.
3. In fondo alla pagina fai clic su Salva modifiche.

Una firma Gmail può contenere fino a 10 000 caratteri, e anche l’immagine inserita conta per questo limite[12].

Nuovo Outlook per Windows e Outlook sul Web

1. Seleziona Impostazioni, poi Account e Firme.
2. Aggiungi una nuova firma, dalle un nome e incolla la firma nella casella di modifica.
3. Seleziona Salva.

Nel classico Outlook per Windows apri un nuovo messaggio e nel menu Messaggio seleziona Firma e poi Firme[13].

L’anteprima mostra la firma come la disegna un browser. I programmi di posta capiscono meno HTML, e ognuno a modo suo, per questo il generatore evita gli elementi che non mostrano. Alcune differenze dipendono però da ciò che scrivi:

• Un’immagine salvata dentro l’indirizzo stesso (data:image/png;base64,…) non compare in Gmail[7]. Il codice base64 è utile nei file HTML e CSS, come mostra il convertitore da immagine a Base64, ma il campo dell’avatar richiede l’indirizzo di un file, perciò l’editor mostra un avviso quando incolli codice base64. Con il convertitore Base64 in immagine recuperi il file immagine da quel codice e poi lo pubblichi sul tuo sito.
• Gmail non mostra le immagini SVG negli account Google[14], quindi converti prima in PNG un logo salvato in SVG, per esempio con il convertitore SVG in PNG.
• Outlook per Windows non mostra le immagini WebP[15], quindi salva logo e foto in PNG o JPG, per esempio con il convertitore WebP in PNG.
• Outlook per Windows blocca per impostazione predefinita il download automatico delle immagini da Internet[16]. Finché chi riceve non lo consente, vede i nomi dei servizi al posto delle icone e nessun avatar.
• L’indirizzo dell’immagine deve portare direttamente al file. Un link di condivisione di Google Drive o Dropbox apre una pagina di anteprima, quindi l’immagine non si vede.

Il generatore salva dati e impostazioni nel browser (localStorage) a ogni modifica, separatamente per ogni versione linguistica della pagina. Se torni con lo stesso browser, la firma ti aspetta nell’ultimo stato salvato. I dati della firma non vengono inviati al nostro server.

Il pulsante Esporta configurazione salva dati, colori, layout, spaziatura e stili del testo in un file .json, e Importa configurazione carica quel file su un altro computer o per un collega che cambia solo i propri dati. L’importazione controlla ogni valore: un colore non scritto in HEX e un carattere fuori dall’elenco mantengono le impostazioni precedenti all’importazione.

Il pulsante Ripristina predefiniti, dopo la conferma, svuota tutti i campi e riporta la firma all’aspetto iniziale. L’operazione è irreversibile, quindi prima esporta la configurazione.

Tutti questi pulsanti si trovano nella scheda dell’anteprima, sotto il pulsante di copia. Lì trovi anche Copia codice HTML (codice grezzo per un editor HTML) e Scarica in HTML (il file firma-email.html). Il selettore sopra l’anteprima, con il sole (Chiaro) o la luna (Scuro), mostra la firma su sfondo chiaro o scuro.