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!
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:
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.
But first, you might reasonably wonder, what’s the point of a custom HTML signature? Well, it offers many advantages, such as:
So, you’ve decided to roll up your sleeves and create your own email signature? Here are the steps you should follow.
What would you like to include from the following information?
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:
Or, even easier: you can use an email signature generator.
Here are some popular options:
Each generator has its own advantages. Take the time to explore different options to find the one that best suits your needs.
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!
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:
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.
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:
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.
To customize your signature on Apple Mail, the first step is to save your HTML signature on your device.
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).
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.
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:
Will your signature be used to send professional emails? Here are some tips to ensure it’s suitable for business communications:
To be effective, your professional email signature should contain the following information:
You can also add:
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.
For more information and examples, feel free to check out our dedicated article on professional email signatures.
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! :)
We just wish you a good time drafting your professional emails!
To help you create HTML email signatures, here are some useful additional resources:
Mozilla Developer Network (MDN) Web Docs
HTML Basics: A comprehensive guide to the basics of HTML.
CSS Basics: Learn the basics of CSS to style your HTML signature.
W3Schools
HTML Tutorial: An interactive tutorial to learn HTML.
CSS Tutorial: An interactive tutorial to learn CSS.
CSS-Tricks
A Complete Guide to Flexbox: For arranging elements of your signature with flexbox.
A Complete Guide to CSS Grid: For using CSS Grid in your signatures.
Visual Studio Code: A powerful and free code editor with useful extensions for HTML and CSS.
Sublime Text: Another popular code editor.
Atom: An open-source code editor with many features.
W3C Markup Validation Service: To validate your HTML code.
Email on Acid: Test how your email signatures display on different email clients.
Litmus: Another service to test your emails and signatures on various clients and devices.
Email Design Guide (Campaign Monitor): A comprehensive guide on email design, including signatures.
Email Design Best Practices (Litmus): A guide to the best practices for email design.
Yes, with the 'Campaigns' offer, it is possible to track the number of clicks on the email signatures of all your employees in the 'Statistics' area of the platform.
You can then access a detailed or global view of the number of clicks on the email signatures of each employee. You can use the search option to target a specific signature or a given period. Finally, you have the possibility to export all statistics to an Excel document.
If you launch campaigns with banners inserted in your email signatures, you can also access their performance via this same space.
With Letsignit, you can easily add social network icons in your collaborators' email signatures and link to your company pages. Also, our "attributes" feature allows you to manage personalized URLs for each of your collaborators such as their individual LinkedIn profile.
And that's not all: you can add links to an appointment-setting application, allow your customers to leave reviews easily, and integrate our 'Chat on Teams' widget to let anyone start a discussion via Microsoft Teams chat.
It’s up to you! As an administrator of the Letsignit platform, you choose whether or not to grant modification rights to your employees. These permissions are managed on an attribute-by-attribute basis, which means that you can decide to allow the employee to change their phone number, but not the address of your premises, for example.
This feature applies to all attributes in your directory, including custom attributes created on Letsignit. When your employees change one or more attributes, your directory is obviously not affected.
It often happens that employees make their email signature their own: custom format, bad fonts, colors inconsistent with the brand standards... all of this has an impact on your brand!
A consistent visual identity is considered authentic and outperforms a perceived weak one by 20%. And, your customers are 2.4 times more likely to buy your products.
With Letsignit, take back control over your brand identity by standardizing all your email signatures. Our tool has many features that allow you to customize your signatures by department, by audience or by subsidiary. Not to mention the possibility of carrying out campaigns within your email signatures thanks to our Campaign offer.
What is the user experience like for our employees?
In both cases:
In short, they have autonomy in their email signature, but you keep control on the field, signatures, and banners they can edit or use.
With our "multi-signature" feature, your employees can benefit from multiple email signatures. No technical manipulation is required. Thanks to our Add-in for Outlook or the desktop app, they can change their email signatures as they wish with just a few clicks.
Regarding the creation of email signatures, you can make several variations such as:
Everything has been thought of to go further in the personalization process based on the recipient of your emails.
If sending emails has an impact, non-optimized email signatures also have an impact. An unsuitable format or an image that is too heavy considerably increases the size of your signatures... and therefore, your emails.
As a responsible economic actor, we contribute to reducing our CO2 emissions and those of our customers in several ways:
As we are increasingly involved in sustainability initiatives, our priority in 2023 is to develop even more green IT functionality.
If sending emails has an impact, non-optimized email signatures also have an impact. An unsuitable format or an image that is too heavy considerably increases the size of your signatures... and therefore, your emails.
As a responsible economic actor, we contribute to reducing our CO2 emissions and those of our customers in several ways:
As we are increasingly involved in sustainability initiatives, our priority in 2023 is to develop even more green IT functionality.
Please rotate your device
The website experience works best in portrait orientation
