Come impostare la Firma Email HTML: una guida completa

Ci siamo. Hai trovato finalmente il logo giusto per dare un’immagine memorabile alla tua azienda. Tutto è pronto: brochure, cataloghi aziendali, sito web, biglietti da visita e carta intestata. Eppure manca ancora un piccolo dettaglio che potrebbe fare la differenza. Ebbene sì! Molto probabilmente ti sarai dimenticato della firma email in formato html.

Firma Email HTML: a cosa serve prima di tutto?

Se la tua agenzia, il tuo consulente in comunicazione o web designer tentano a tutti i costi di rifilarti questa benedetta firma html per la tua mail, sappi che non si tratta affatto di una fregatura!

Noi di Graffette proponiamo SEMPRE ai nostri clienti che lanciano nuovi progetti questo prodotto e sai perché? Perché completa il brand identity kit della tua azienda!

Mi piace considerare la firma html per la mail una versione digitale del biglietto da visita. È uno strumento aggiuntivo per presentarti con professionalità ai tuoi stakeholder che può fare la differenza. Al suo interno infatti possono essere posizionate informazioni di contatto utili, ma soprattutto i link al tuo sito web e ai canali social attivi!

firma email html
La firma HTML di Michele di Graffette

Come creare una firma email professionale

Ti è mai capitato di vedere le firme mail come allegato al messaggio stesso? A me spesso e la cosa mi crea sempre molto turbamento! Un’immagine non è la soluzione! Molti client di posta infatti visualizzano il file come allegato e non incorporato nel testo. Inoltre non è possibile né copiare il testo né inserire più di un link.

Bene, abbiamo già capito come NON creare una firma di qualità.

Esistono online diversi tool per creare con semplicità la tua firma personalizzata. Te ne elenco qualcuno qui sotto:

  • Mail-signatures.com : strumento free, che mette a disposizione diversi template preconfigurati e un’interfaccia dove sostituire i dati demo con i tuoi e aggiungere il tuo logo;
  • MySignature.io : interfaccia molto più moderna e usabile. Permette l’inserimento di campi custom oltre a quelli precostituiti, ma dovrai pagare la versione premium per rimuovere il loro branding dal piede della firma generata;
  • Hubspot : il celebre brand specializzato in CRM e marketing automation, mette a disposizione un comodo e semplicissimo strumento per la creazione di firme HTML. Niente di fantascientifico, ma funziona piuttosto bene.

Se riscontri problemi nell’utilizzo di questi tool o vuoi segnalarne qualcuno di molto più performante non farti scrupoli e lasciaci un commento in coda all’articolo!

OSSERVAZIONE: Occhio solo ad una cosa. Utilizzando questi strumenti, potresti riscontrare alcuni problemi nell’utilizzo delle immagini. Tutte le icone dei social, telefono, mail e i loghi sono file in formato jpg o png e devono necessariamente essere hostate su qualche server. Queste avranno una URL proprio come una pagina web, che al 99% non proverrà dal tuo dominio. Questo può generare due problemi:

1. Il sito di provenienza viene dismesso o vengono eliminati i file dal server. Risultato > da un giorno all’altro ti ritroverai con immagini corrotte

2. Il dominio di provenienza dei file non corrisponde a quello da cui spedirai le mail e la probabilità di essere contrassegnato come spammer diventa maggiore.

Esempi di firma email e suggerimenti

Se padroneggi già abbastanza bene l’HTML e il CSS, invece, potresti pensare di creare a mano la tua firma personalizzata, magari partendo dal codice generato da uno dei tool che ho elencato sopra.

Dovrai tenere a mente solo alcune cose:

  • Le firme HTML non supportano framework esterni come Bootstrap o Foundation
  • Potrai usare solo le tabelle come markup
  • Per evitare problemi di compatibilità dovresti inserire tutto il CSS inline e non in un foglio di stile esterno o nell’head della pagina

Ti mostro un semplicissimo esempio: questo è il markup della firma che ho realizzato per l’account info@graffette.net

<!DOCTYPE HTML PUBLIC>
<HTML><HEAD><TITLE>Firma Email - Graffette | Grafica a fette</TITLE>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</HEAD>
<BODY style="FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif">
<table style="border-top:20px solid #00677B; WIDTH: 400px; FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif" cellpadding="10" cellspacing="0">
    <tbody>
        <tr>
            <th style="border-left:20px solid #00677B; padding-top:15px;border-right:20px solid #00677B; FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif; WIDTH: 400px;vertical-align: middle; text-align: center;" rowspan="" valign="middle" align="center">
                <a href="https://www.graffette.net" target="_blank"><img alt="Logo Graffette" width="200" border="0" align="center" style="border:0; height:auto; width:200px"  src="https://wwwgraffettenet484767.r.worldssl.net/wp-content/uploads/2019/02/logo-graffette.png"></a>                          
            </th>
        </tr>

        <tr>
            <td style="border-right:20px solid #F05B61; border-left:20px solid #F05B61; FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif; vertical-align: top; text-align:center;" valign="top">
                <span><strong><a href="mailto:info@graffette.net"  style="color: #333333; text-decoration: none;">info@graffette.net</a></strong></span><br> 
                <span style="FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif;">Via Matteotti 12 - Reggiolo 42046 (RE)<span><br></span></span>
                <span style="FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif; line-height: 20px; color: #333333;">Tel. <strong>0522 1590271</strong></span><br>
                <span><strong><a href="https://www.graffette.net" target="_blank"  style="color: #333333; text-decoration: none;">www.graffette.net</a></strong></span> 
            </td>
        </tr>
        <tr>
            <th style="FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif; width:400; padding-top:20px;padding-bottom:20px; text-align: center; border-left:20px solid #F05B61; border-right:20px solid #F05B61; border-bottom:20px solid #F05B61;" colspan="2" align="center">
                <span><a href="https://www.facebook.com/graffette.agency/" target="_blank"><img border="0" width="20" alt="Facebook icon" style="border:0; height:20px; width:20px; padding-right: 55px;" src="https://wwwgraffettenet484767.r.worldssl.net/wp-content/uploads/2019/02/icona-facebook.png"></a></span>
                <span><a href="https://www.instagram.com/graffette.agency/" target="_blank"><img border="0" width="20" alt="Instagram icon" style="border:0; height:20px; width:20px" src="https://wwwgraffettenet484767.r.worldssl.net/wp-content/uploads/2019/02/icona-instagram.png"></a></span>
                <span><a href="https://www.linkedin.com/" target="_blank"><img border="0" width="20" alt="Instagram icon" style="padding-left: 55px;border:0; height:20px; width:20px" src="https://wwwgraffettenet484767.r.worldssl.net/wp-content/uploads/2019/02/icona-linkedin.png"></a></span>
            </th>
        </tr>

</tbody>
</table>
    
<table style="WIDTH: 400px; FONT-SIZE: 10pt; FONT-FAMILY: Trebuchet MS,Arial,sans-serif;" cellpadding="20" cellspacing="0">
    <tbody>
        <tr>
            <td width="350px" style="font-size:7px; font-family:Trebuchet MS,Arial,sans-serif; color:#959595; line-height:10px; padding-bottom:10px; vertical-align:top; text-align:justify;" colspan="" valign="top">
               Informativa sulla Privacy D.Lgs 196/2003 <br>

               Le informazioni contenute nella comunicazione che precede possono essere riservate e sono, comunque, destinate esclusivamente alla persona o all'ente sopraindicati.<br>

               La diffusione, distribuzione e/o copiatura del documento trasmesso da parte di qualsiasi soggetto diverso dal destinatario è proibita. La sicurezza e la correttezza dei messaggi di posta elettronica non possono essere garantite. Se avete ricevuto questo messaggio per errore, Vi preghiamo di contattarci immediatamente. Grazie.<br>

               Rispetta l'ambiente: prima di stampare la mail assicurati che sia davvero necessario!
        </td>
	   </tr>
    </tbody>
</table>
 
    
    
</BODY>
</HTML>

Il risultato si presenterà graficamente così:

Vuoi salire a bordo?

Iscriviti alla nostra newsletter!
Esempio firma email html

Quali client e dispositivi supportano la firma HTML?

DispositivoClientCompatibilità
AndroidGmail / Mail
iOSMail
MacMail
MacThunderbird
MacOutlook
WindowsThunderbird
WindowsOutlook

Notato niente di strano?

Eh già, hai capito bene: le App più diffuse per android come quelle native di molti brand noti e quella di Gmail non supportano ancora il markup HTML nelle firme. Dovrai quindi usare la tua splendida firma soltanto quando invierai le mail dal tuo computer desktop!

Pare però che utilizzando Maildroid si possa aggiungere del linguaggio HTML anche su Android. Io non l’ho ancora provata, ma credo che lo farò presto.

Come inserire la firma email sui vari client

Bene, abbiamo visto insieme a cosa serve una firma HTML per le tue email, così come poterla creare online con dei tool gratuiti o addirittura comporla a mano.

Ora però cerchiamo di capire come impostare la firma email sui tuoi dispositivi e/o client di posta.

Impostare la firma email su Thunderbird

Anche tu hai deciso di affidarti al fantastico client di posta di casa Mozilla? Ottima scelta. Lo trovo davvero ben costruito, professionale e soprattutto: open source!

Tempo richiesto: 5 minuti.

Per impostare la firma su Thunderbird non dovrai far altro che:

  1. Click con il destro su account

    Dalla schermata principale cliccare con il destro sull’account per il quale vuoi adottare un firma HTMLClick destro su impostazioni account thunderbird

  2. Impostazioni

    Cliccare poi su Impostazioni e individuare sulla destra il campo Testo per firma

  3. Spunta HTML

    Ora accertati di spuntare la checkbox “Utilizza HTML

  4. Copia il codice HTML

    Apri con un editor testuale (bloc notes o text edit) il file della tua firma, seleziona tutto il codice, copia e torna su Thunderbird

  5. Incolla

    Posizionati nel campo testo per firma e incolla!Incolla firma html thunderbird

  6. Fine!

    Ci siamo!

Impostare la firma email su Outlook

Nella versione 2016 è necessario seguire questi passaggi:

  1. Crea un nuovo messaggio di posta
  2. Nella barra degli strumenti seleziona “Firma
  3. Se non hai ancora firme salvate clicca su “Nuovo” e attribuisci un nome che non verrà visualizzato dai tuoi destinatari
  4. Ora apri in una scheda del tuo browser il file della tua firma (ad esempio lamiastupendafirma.html), clicca su un elemento qualsiasi della pagina, seleziona tutto con CTRL + A (o CMD + A) e copia con CTRL + C (o CMD + C)
  5. Torna su Outlook, posizionati sull’editor e incolla dopo aver cliccato con il tasto destro (ricordando di mantenere le opzioni di formattazione originarie).
  6. Fatto! Che te ne pare?
Come incollare firma html su outlook 2016

Impostare la firma email su Apple Mail (Mac)

Se utilizzi Mac OS e sfrutti la sua app nativa Mail segui questi semplici passaggi:

  1. Nel menu in alto a sinistra clicca su Mail > Preferenze
  2. Dal pannello seleziona la penultima voce a destra Firme
  3. Posizionati su tutte le firme e clicca il piccolo pulsante + in basso
  4. Ora apri il tuo file html con il tuo browser preferito ?, seleziona tutto con CMD + A , copia con CMD + C

    Correzione del 11/02/2020: mi sono reso conto lavorando con un cliente che Safari tende a dare problemi quando si incolla il codice HTML nell’editor. Ti consiglio vivamente di usare Google Chrome e non un browser qualsiasi.
  5. Torna su Mail, deseleziona la spunta “Usa sempre il mio font di default”, e incolla con CMD + V
  6. Esci dal pannello e.. fatto! Sei pronto a mandare le mail con la tua magnifica firma HTML!
Aggiungere firma su apple mail

Impostare la firma email su Gmail (Desktop)

Se come milioni di utenti hai una casella postale gratuita di Google, oppure come noi Graffette ti sei affidato al servizio professionale di GSuite, dovrai seguire questi semplici step:

  1. Dalla schermata iniziale clicca sull’ingranaggio in alto a destra da desktop ⚙️
  2. Dalla scheda “Generali” recati in fondo alla pagina e individua il pannello Firma.
  3. Ora apri in un’altra scheda del tuo browser il file della tua firma (ad esempio lamiastupendafirma.html), clicca su un elemento qualsiasi della pagina, seleziona tutto con CTRL + A (o CMD + A) e copia con CTRL + C (o CMD + C)
  4. Torna sulla scheda dove hai aperto Gmail, posizionati sull’editor e incolla con CTRL + V (o CMD + V)
  5. Fatto!
Aggiungi firma su Gmail

Impostare la firma email su Iphone

Sei un felice possessore di iPhone? Benissimo, allora non ti resta che sostituire quella terribile scritta “Inviato da iPhone” in coda a tutte le tue mail che invii mentre sei in treno, per strada o dal parrucchiere!

  1. Apri il menu del tuo iPhone e seleziona Impostazioni
  2. Ora tappa la voce Mail
  3. Scrolla in fondo alla schermata e seleziona Firma
  4. Ora tappa su “Inviato da iPhone”, seleziona tutto e… cancella!
  5. Adesso apri il file html con il browser del tuo smartphone, tieni premuto su un qualsiasi elemento; con pazienza trascina i selettori all’inizio e alla fine della tua firma e copia.
  6. Torna alle settings, tieni premuto sul campo ormai vuoto e incolla!
Michele
Michele

Sono un Web & UX Designer, laureato in Comunicazione Digitale e Creatività d'Impresa. Adoro lavorare in squadra e sono molto meticoloso. In Graffette mi occupo di tutto quello che riguarda il web design, lo sviluppo frontend e la web analytics. Che aspetti a contattarmi?

23 commenti su “Come impostare la Firma Email HTML: una guida completa”

  1. Ciao Michele, grazie a questo tuo post sto riuscendo a creare una firma in html, seppure le mie conoscenze siano veramente basiche! Grazie davvero!!
    Però vedendo il codice che fa riferimento ai link, nello specifico quello denominato src, mi è venuto un dubbio. Dove bisogna caricare le icone? Al momento le ho salvate su pc, ma la firma non è per me, quindi come dovrei fare?
    Ti ringrazio infinitamente se riesci a trovare un momento di rispondermi.
    Grazie ancore per il post fatto molto molto bene! 🙂
    Un caro saluto, Cristina

    Rispondi
    • Ciao Cristina! Troppo gentile. Sono contento tu lo abbia trovato utile!

      Comunque sia, qualora tu non disponessi di un tuo spazio web (o del tuo amico/cliente), ti consiglio di utilizzare Google Drive! È un po’ ingegnoso riuscire a ricavare un URL pubblico però è possibile e mi è già capitato di usarlo con un cliente.

      Ti consiglio di far creare lui/lei una cartella chiamata “firma html”, fargli caricare i file al suo interno e seguire questo tutorial per ottenere un link visibile pubblicamente. L’ho provato e funziona correttamente ?

      Il tuo src finale dovrà avere quindi un aspetto simile a questo:

      src="http://drive.google.com/uc?export=view&id=codiceincomprensibile"

    • Ciao Michele, grazie mille per avermi risposto! Mi hai chiarito il significato di quel src e non c’è stato bisogno di usare Google Drive (mi dispiace averti fatto macchinare!) La firma è venuta proprio come la volevamo e il merito è soprattutto il tuo esempio in html. GRAZIE!

  2. Ciao Michele, sono arrivato al tuo articolo avendo appunto bisogno di inserire l’immagine come firma sotto al testo della firma.
    Ho consultato anche l’articolo per inserire l’immagine della firma su Drive non avendo uno spazio sul web, ma senza il risultato sperato, mi compare solo il codice html e non capisco il perché.
    Riesci a risolvere il mio problema?

    Rispondi
    • Ciao Christian, hai fatto bene a scrivermi. Potresti incollarmi la URL finale che ottieni come risultato così cerco di capire dove sta il problema?

    • Mmm… sai che io visualizzo correttamente il vostro logo se provo ad aprire il link da te fornito?

      Prova ad usare direttamente la URL che si genera successivamente al redirect operato da Google.

      Comunque sia, neanche a farlo apposta, ieri abbiamo pubblicato un articolo che spiega esattamente come fare: https://www.graffette.net/link-diretto-immagine-google-drive/

      Nel caso dovessi riscontrare problemi non esitare ad usare lo spazio web alternativo a Drive. È senz’altro più semplice!

    • Grazie Michele per la risposta, anche io visualizzo l’immagine.
      Il problema è come applicare questa stringa di testo sulla firma di mail di apple.

    • Dunque, se segui questo passaggio dovresti creare un file .html in cui incollare ad esempio questo codice.

      Dopodiché lo dovresti aprire con Chrome, copiare tutto con CMD+A e CMD+C, andare nella sezione firme delle preferenze di Apple Mail e incollare con CMD+V (deselezionando prima la spunta sul font predefinito). Tecnicamente dovrebbe funzionare!

    • Christian puoi creare tranquillamente il file con blocco note o textedit, incollargli il codice che ti ho fornito prima e assegnargli manualmente un nome e l’estensione .html (esempio ‘firma.html’) 😉

  3. Ciao,
    sto seguendo la tua guida per il client Outlook: ho creato un file html con la mia firma non in formato tabellare ma a div: il div, diciamo contenitore, ha un colore di sfondo e seguendo le tue istruzioni, non viene riportato il colore sfondo. Sono obbligato ad usare le tabelle? Invece utilizzando il tuo esempio html, vedo tutto correttamente.
    Però ho un problema con Outlook installato sul mac: facendo Modifica –> Incolla formattazione non incolla nulla, usando Modifica –> Incolla e mantieni lo stile ovviamente copia solo il testo escludendo la formattazione (colori, font, …).
    Potresti cortesemente aiutarmi?
    Grazie mille

    Rispondi
    • Ciao Alberto,
      Tutto chiaro. Sì, ahimè è praticamente obbligatorio usare i tag delle tabelle html per evitare problemi di compatibilità tra i vari client. Devi immaginarti Outlook un po’ come un browser dei primi anni 2000 in quanto a interpretazione di HTML ?

      Per quanto riguarda invece l’altro problema ti consiglio, invece di cliccare su modifica e incolla, di aprire il tuo file HTML su chrome, selezionare tutto con CMD+A, copiare con CMD+C e, una volta posizionato sull’editor della firma Outlook, cancellare il contenuto pre-esistente e incollare con CMD+V.

      Fammi sapere se risolvi!

  4. Ciao Michele,
    innanzitutto grazie per la tua disponibilità.
    Ho anche io il problema della firma da inserire in HTML su Windows live mail; L ho creata io con un file di word ma il logo nella firma viene caricato con una x e non appare; ho usato un logo con estensione png; vorrei provare con blocco note ma non l’ho mai fatto e non so come caricare l’immagine…

    Rispondi
  5. Buongiorno, non riesco a impostare la firma in digitale sulle mie mail di aruba .
    Intendo in html.
    Realizzo la firma su dei siti specifici ma poi non riesco su aruba ad impostarla.
    Grazie

    Rispondi
  6. Ciao, spero di non sbagliarmi ma secondo me questo tutorial spiega solo come creare una firma professionale in html da zero.

    Ma se io ho già creato la mia firma in Illustrator e il cliente me l’ha approvata, come faccio ad inserirla per esempio su gmail così com’è da JPG approvato dal cliente?

    La risposta potrebbe essere “Importa il JPG dentro ed è fatta”. In realtà no, perché quel JPG contiene più link al suo interno (telefono, mail, profilo linkedin, sito web), pertanto è necessario creare un html di questa firma e su questo non ho problemi.
    Ma poi come faccio ad inserire questo html su gmail?

    Grazie se riuscirai ad aiutarmi, spero di essermi spiegata bene.

    Rispondi
    • Ciao Giuditta! È vero, l’articolo si riferisce alla creazione di firme email HTML. Il tuo ragionamento è corretto: si parte da un mockup, poi si traduce in HTML e infine lo si implementa sul proprio client. Se non hai problemi con la scrittura in HTML, quello che ti serve è illustrato esattamente qui. Ho capito bene la tua richiesta?

  7. Mmm, secondo me no.

    Io ho già una firma approvata e il relativo file in HTML della stessa firma.

    Come faccio ad impostarlo come firma su Gmail?

    Grazie mille

    Rispondi
  8. Ciao Michele,
    ho sftuttato il sito Hubspot per creare la mial in formato html.
    Nessuno problema creo la firma e la utilizzo.
    Mi trovo in questa situazione però, siccome sono il Responsabile IT della mia azienda, utilizziamo Office365 con Outlook ovviamente installato per inviare le nostre mail. L’azienda mi chiede ovviamente di parametrizzare una fima uguale per tutti e questo non è un problema, poiché mi eredito i dati da Azure con gli opportuni tag e formatto la mail utilizzando il modulo generato da Hubspot. Il problema che mi viene sollevato è il seguente, siccome utilizzo una regola di Exchange per inviare la mail, quando invio la mail non viene visualizzata la firma da me creata, come se la creassi con lo strumento di firma di Outlook ma venendo generata da una regola la vede solamente il destinatario io non la vedo neanche dopo che l’ho inviata.

    Rispondi
    • mmm… non credo di aver capito perfettamente. Tramite la regolina Exchange che hai impostato invii dei messaggi automatizzati che restano identici? Se sì, perché non scrivi il contenuto del messaggio in HTML, comprensivo di firma? Non ho capito se la firma la vede solo il destinatario ma non tu o se proprio non riesci ad incorporarla nel messaggio.

  9. Ciao, utilizzo mail Aruba, ho fatto fare logo vettoriale per la firma. Ho provato a inserirlo, ma è enorme e non c’è la possibilità di ridurlo. Insomma, sono anni che utilizzo Aruba, ma non sono mai riuscito a risolvere il problema dell’inserimento del logo nella firma. Lo so, sono preistorico e mi vergogno. Mi potete dare assistenza? Grazie mille.

    Rispondi
    • Ciao Giovanni! Dunque, il fatto che tu utilizzi Aruba non c’entra molto, quindi tranquillo. I loghi vettoriali non possono essere incorporati nelle firme HTML (per intenderci i formati .ai, .svg, .pdf, .eps, ecc), ma necessitano di essere convertiti prima in PNG, GIF o JPG. Mi potresti dire esattamente come hai inserito l’immagine nella tua firma?

      Se hai usato un editor testuale e passi nella modalità di scrittura HTML dovresti vedere qualcosa del tipo

      <img src="https://iltuologo.formato">
      

      .
      Ti basterà aggiungere questo tag alla tua immagine:

      <img src="https://iltuologo.formato" width="150">
      

      . Chiaramente il 150 l’ho inserito come segnaposto. Fai qualche tentativo e trova la dimensione che ti soddisfa di più!

Lascia un commento