Would you like to create your brand-new HTML signature? The one that will make all your recipients say "MA-GNI-FIQUE" while they twirl their mustaches with their fingertips as they read your emails? Well, you're in the right place! With our complete guide, learn how to create your own HTML signature, either by coding it like a hacker or using email signature tools specifically designed to simplify the task for you.
Whether you're using Outlook, Gmail, or Apple Mail, learn how to create and then insert your HTML signature in just a few clicks!
What is an HTML signature?
An HTML signature is a piece of HTML code inserted into your email application's signature space, which displays as a visual format once your email is sent to your recipient. Since it’s created in code, you can include pretty much anything you like, provided you have some basic coding knowledge. Your name, company name, logo, profile picture, additional images – you can integrate a wealth of elements to create a signature that’s even more engaging and professional.
Here’s an example of what the code for a basic HTML signature might look like:
Does HTML ring a bell?
HTML sounds familiar but you’re not really sure what it is? Let’s start from the basics:
HTML (HyperText Markup Language) is a markup language used to structure content on the web. In the context of email signatures, HTML allows you to format text, add images or logos, and create links to web pages or social media profiles. It’s that simple, right?
To edit or create an HTML signature, we suggest using a text editor, like Notepad++ on Windows, TextEdit on iOS, or Gedit on Linux. And if you want to go pro, you can also use Visual Studio Code or Sublime Text.
The benefits of a custom HTML signature
But first, you might reasonably wonder, what’s the point of a custom HTML signature? Well, it offers many advantages, such as:
Enhance your professional identity: With an HTML signature, you can precisely and elegantly present your contact information. Your name, job title, your company’s contact details, and its logo can shine brightly.
Make navigation easier: By adding hyperlinks to your signature, you can direct your recipients to the links that interest you. It’s a great opportunity to showcase your awesome website, your massive social media community, or any other content you think is relevant.
Make your emails more attractive: By integrating graphics and playing with fonts and colors, you can give a more aesthetic dimension to the emails you send.
Create an additional communication channel: Did you know that your signature can serve to convey additional information? It can become a full-fledged marketing tool. For instance, by adding a banner like a company update or a promotional offer, you can create a brand-new marketing touchpoint with your recipients.
Creating your own HTML signature
So, you’ve decided to roll up your sleeves and create your own email signature? Here are the steps you should follow.
Choose the information you want to include
What would you like to include from the following information?
Your full name
Your title or position
Your company’s name
Your contact details (phone number, extension, email address)
Your company logo
Links to your professional social media (LinkedIn, Twitter, etc.)
A link to your company’s website
A promotional banner or a slogan
Create your HTML code
Then, just integrate the elements that interest you into your HTML code editor. Here, it’s ideal to have some basic HTML knowledge. Otherwise, you can copy this sample code and modify it to your liking:
This would give you a signature like:
Choosing an HTML Signature Generator
Or, even easier: you can use an email signature generator.
Here are some popular options:
Hubspot: Free, easy to use, compatible with various platforms.
Signature Maker: Very user-friendly.
Si.gnatu.re: Free, offers a high level of customization.
Gimm.io: Offers a wide range of free templates.
Each generator has its own advantages. Take the time to explore different options to find the one that best suits your needs.
How to use an email signature generator
It’s not very complicated. Each signature generator has its own process, but they are mostly designed to be very visual and easy to use. Just use the designer provided by the tools, fill in the various fields, and copy the generated HTML code into your email app’s signature section!
Creating an HTML Signature for Outlook
How to insert your HTML signature in Outlook (desktop application)?
Have you created your brand-new Outlook signature? To insert your HTML signature in Outlook, first, make sure your signature is ready in HTML format. Then, launch your Outlook application and follow these steps:
Open the HTML file of the signature you’ve created;
Select and copy all the displayed content (Ctrl+C or Cmd+C);
Click on the "File" tab located at the top left, then select "Options" from the drop-down menu;
Once the options window is open, click on "Mail" in the left panel, then scroll down to the "Signatures" section, and click the "Signature" button;
Click "New" (for "new signature");
Give it a nice name;
Then paste (Ctrl+V or Cmd+V) your previously copied signature into the editor;
Save the changes;
And finally, select this signature as the default signature.
Another way to integrate a more complex HTML signature is to directly import the HTML file into the Outlook signatures folder. To do this, go to:
%APPDATA%\Microsoft\Signatures (on PC)
Or:
~/Library/Group Containers/UBF8T346G9.Office/Outlook/Outlook 15 Profiles/Main Profile/Signatures/ (on iOS)
and copy your HTML file there. When you go to the signature creation section, your work will appear among the available options.
How to insert your HTML signature in Outlook (web version)?
Are you more of a person who sends emails from the web interface of Outlook or Outlook 365? No problem! Here are the steps to follow to set up your new HTML signature:
Open the HTML file of the signature you’ve created;
Select and copy all the displayed content (Ctrl+C or Cmd+C);
Go to Outlook.com or Office 365 and sign in with your credentials;
Click on the gear icon at the top right to open the Settings menu;
In the "Mail" section, you will find the "Compose and Reply" option;
In this section, you will find the email signature editor (if needed, you can also search for "email signature" in the search field);
Paste (Ctrl+V or Cmd+V) your previously copied signature into the editor;
Then, check the boxes below the editor to automatically add your signature to emails sent;
Click "Save" (at the bottom).
How to integrate your HTML signature into your Gmail account?
To integrate your HTML signature into Gmail, you must first have your HTML code ready.
Log in to your Gmail account and click on the settings icon (the gear) located at the top right.
Choose "See all settings."
In the "General" tab, scroll down to the "Signature" section.
Click on "+ Create", set a name for your signature, and click "Create."
In the text box on the right, paste (Ctrl+V or Cmd+V) your previously copied signature into the editor;
Once done, look below the editor in the "Default signature values" section, and select your signature for new emails and for replies/forwards;
Then, scroll to the bottom and click "Save Changes."
N.B. Gmail does not support HTML content directly in the signature, so make sure you’ve copied your HTML signature in its visual form before pasting it into the editor.
How to customize your signature on Apple Mail?
To customize your signature on Apple Mail, the first step is to save your HTML signature on your device.
Then, open Apple Mail and click "Mail," then "Preferences";
Go to the "Signatures" tab on the right;
Select the email account for which you want to integrate your signature;
Click the small "+" (at the bottom) to create a new signature and give it a name;
Then, paste the signature you created into the editor on the right;
Then, close the window by clicking the "x";
To ensure the signature is correctly taken into account, it is recommended to close the application (by selecting "Mail > Quit Mail" or pressing "CMD + Q") and restart it.
How to create an HTML signature in Thunderbird?
Again, to integrate a signature in Thunderbird, start by saving your HTML signature on your computer or by copying the visual of your signature to your clipboard (Ctrl+C or Cmd+C).
Then, launch the Thunderbird application;
Click on the menu icon (three horizontal lines) at the top right and choose "Account Settings";
In the left panel, choose the account to which you want to attach your brand-new signature;
Here, you have two options. 1 - You can directly copy your HTML code into the "Signature Text" editor by checking the "Use HTML" box, or 2 - You can select the HTML file of your image by checking "Attach signature from a file" and choosing your file.
Modify and customize your HTML signature
How to modify your HTML signature?
Once your signature is created, you will have the freedom to modify it whenever you wish. And to do so, it’s not that complicated. Just go back to the same editor you used to create the initial signature, modify it, and then save it all.
Customize the style of your HTML signature
If you’re feeling creative, you can totally create an HTML signature that reflects you through HTML and CSS codes. This is where the beauty of having some basic coding knowledge comes in! It’s your chance to give your communications a unique touch.
That said, don't forget that simplicity and clarity are essential. A too-busy style can distract your recipients from the main content of your email and harm the readability of your signature. Make sure to choose relatively harmonious colors with an easy-to-read font and images that are not too large (or too heavy in terms of file size).
Here’s how to proceed:
Colors: Choose your colors using their hexadecimal code. Define one color for your text, one for your background, and one for your links, and make sure everything is legible. A small tip: ask a friend/colleague/spouse for their opinion. And if their eyes start to dry out and turn red after seeing your signature, maybe it’s time to rethink the colors.
Font: Here, choosing the right font is key. Choose a font that you like (of course), but that will also be easily readable. It’s a cliché now, but we’ll never repeat it enough: Comic Sans MS, no! Then, define the font size for the various elements. If you want to highlight certain elements, you can also use bold or italics.
Images: Add an image or logo and define its size and alignment. Make sure you’re using the right image format to ensure good quality.
Will your signature be used for professional emails?
Will your signature be used to send professional emails? Here are some tips to ensure it’s suitable for business communications:
Information to include in your signature
To be effective, your professional email signature should contain the following information:
Your professional phone number;
Your email address;
Your physical address;
A link to your company’s website and/or links to your social media.
You can also add:
A photo of yourself or one that corresponds to the brand’s identity;
The company’s logo;
And why not, a promotional banner.
The style of your signature
To have a truly professional look, your signature should ideally meet the following 5 criteria:
Be readable: through the choice of font, colors. This is essential if you want to transmit the information to your recipients effectively;
Be both colorful AND sober. Here, it’s a real balancing act. It’s not easy to create a signature that’s both punchy while maintaining a professional look. The key to finding the right balance is: "experimentation";
Be well-organized: so that the flow of information is smooth, logical, and the overall layout is not cramped. To be pleasant to read, your signature must "breathe";
Be visual: by adding icons, images. We know that colors and images tend to attract the eye more, so use this to your advantage. It’s also a way to avoid using too much text, cleaning up the overall design;
Be in the right format: your email signature format should be around 400 pixels x 150 pixels. The advantage of this size is that it is easily visible and adapts to most devices.
Once your signature is ready, don’t hesitate to ask people around you for feedback. We’re not all future Mondrians, and no matter how confident you are in your design skills, asking for a second opinion is never too much.
Finally, are you not interested in creating your own HTML signature?
Well, perhaps your company would be interested in Letsignit’s email signature management solution. This tool allows you to generate
With our tool, you only need to create your signature from one of the available templates or use the integrated designer to create a signature that reflects your company, and the rest is automated! No more need to manually integrate your signature via the Outlook editor and revisit it every time you want to make a change. You only need to make the visual modifications, and the technical integration is handled by the tool.
We don’t force anyone, but our solution exists and is here to help. Just so you know! :)
Guillaume is the Content Factory Manager at Letsignit! With words, he creates various types of content (textual, video, and in the most extreme cases, telepathic) to increase Letsignit's visibility on the web. Legend has it that at the age of 3, Guillaume built his first multichannel web marketing strategy using a dictionary, a baby bottle, and a bit of Chinese ink. We don't know if this is true, but at least, that's the story...
About Letsignit
Letsignit is an email signature management solution that allows organizations to transform their employees' email signatures into a powerful 1-1 engagement media for their brands and campaigns.
Your employees already represent your brand. Every day, across every interaction.
.svg){kind=small}
