How To Create A Free Email Signature Template (2021 UPDATE)

Whether you are an individual or business, an awesome and clickable Email Signature can leave a lasting impression at the end of your email. It just like one business card that will make you stand out in the crowd. We will make the html Signature without any signature template generator.

Don’t overthink it, you don’t need to have any HTML coding skills before creating it, you just need to follow our step by step guide to finish creating your own signature template. And then we will learning how to set up (or change) the Email Signature into your Gmail, Outlook, Office 365, Yahoo, Thunderbird, Mac Mail, Hotmail or just add signature to your web mail only. Finally, we will try some free email signature generators for somebody who want to whip up his(her) own email signature in very short time.

1. Get Our Free Signature Templates

Our web UX/UI Designer had designed some free Email Signature Examples for you, they are simple but professional, and they fit any type of business or individual. All our templates are royalty free for use in both personal and commercial projects, you should modify these free templates to fit into your project, you can download them below.

if you don’t want to edit it yourself, you can get a pay support from a web designer on fiverr.com(a freelance services marketplace).

2. Create A Email Signature Template From Scratch

In this section, we will talk about the first one, its final look as shown in the below picture. Before we get started, we need install an essential text editor on our PC(or Mac) to edit the Signature HTML code. I strongly recommend Notepad++ (an open source editor on Windows) and Sublime Text (both available on OS X and Windows). Of course you can choose other one you feel well, such as UltraEdit, TextMate(OS X), Coda2(OS X).

For clarity, We mark the place where we need to be modified or replaced from No. 1 to No. 7, both in the final email signature template picture and the html code picture, there is a One-to-One correspondence between them. You can ignore the other parts of the signature template html code except these marked.

Pro Tip: Please edit the signature html code follow the steps listed below, remember to save the file after editing them. If you have any questions, you can comment at the end of this post.

<br>
<br>
<div class="todolib-signature">
    <br>
    <table style="font-family: 'Helvetica Neue', Helvetica, Arial,sans-serif;" border="0" cellpadding="0" cellspacing="0" width="470">
        <tbody>
            <tr>
                <td width="120"><img src="https://todolib.com/wp-content/uploads/2017/05/logo.png" style="border-radius: 50%; border: solid 2px #d3d3d1;" alt="logo" height="80" width="80"></td>
                <td style="border-left: solid 4px #898989;padding-left:25px;" width="450">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tbody>
                            <tr>
                                <td style="font-size:12px; color:#8bc34a; font-weight:bold;text-transform:uppercase;">David K. Williams <span style="font-size:14px;color:#4b5662; text-transform:lowercase;">Marketing manager</span></td>
                            </tr>
                            <tr>
                                <td style="font-size:12px; color:#697582; padding-top:6px;line-height:1;"><span style="color:#8bc34a;font-weight: 600;text-transform:uppercase;">c</span> Todolib, Inc.</td>
                            </tr>
                            <tr>
                                <td style="font-size:12px; color:#697582; line-height:1;"><span style="color:#8bc34a;font-weight: 600;text-transform:uppercase;">a</span> 7890 Fairmont Avenue Armstrong, todolib.123456</td>
                            </tr>
                            <tr>
                                <td style="font-size:12px; line-height:1;"><span style="color:#8bc34a;font-weight: 600;text-transform:uppercase;">t</span> <a href="tel:4561237890" style="color:#697582;text-decoration:none;">(456) 123-7890</a> | <span style="color:#8bc34a;font-weight: 600;text-transform:uppercase;font-size:14px;">p</span><a href="tel:1234567890" style="color:#697582;text-decoration:none;"> 1234567890</a></td>
                            </tr>
                            <tr>
                                <td style="font-size:12px; color:#697582; line-height:1;"><span style="color:#8bc34a;    font-weight: 600;text-transform:uppercase;">e</span> <a href="mailto:email@todolib.com" style="color:#697582; text-decoration:none;">email@todolib.com</a> | <span style="color:#8bc34a;font-weight: 600;text-transform:uppercase;">w</span> <a href="https://todolib.com" style="color:#697582; text-decoration:none;">todolib.com</a></td>
                            </tr>
                            <tr>
                                <td style="padding-top:15px; text-align:left;" width="100%">
                                    <a href="https://www.facebook.com/todolibcom/" style="padding-right: 5px;"><img alt="facebook" src="https://todolib.com/wp-content/uploads/2017/05/facebook.png" style="border-radius: 50%;padding: 2px;background-color: #8bc34a;" height="16" width="16"></a>
                                    <a href="https://twitter.com/todolibcom" style="padding-right: 5px;"><img alt="twitter" src="https://todolib.com/wp-content/uploads/2017/05/twitter.png" style="border-radius: 50%;padding: 2px;background-color: #8bc34a;" height="16" width="16"></a>
                                    <a href="https://https://plus.google.com/" style="padding-right: 5px;"><img alt="google+" src="https://todolib.com/wp-content/uploads/2017/05/google.png" style="border-radius: 50%;padding: 2px;background-color: #8bc34a;" height="16" width="16"></a>
                                    <a href="https://www.pinterest.com/" style="padding-right: 5px;"><img alt="pinterest" src="https://todolib.com/wp-content/uploads/2017/05/pinterest.png" style="border-radius: 50%;padding: 2px;background-color: #8bc34a;" height="16" width="16"></a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

1. In Picture One, we use a clearly contrasting color to underline the signature logo link(http://todolib.com/wp-content/uploads/2017/05/logo.png) which marked as NO.1(➀). You should replace the logo image with your own, the logo image must be perfectly square (height:width=1:1), meaning that the photo itself is square, for example: 800px:800px, otherwise the layout of the Email Signature will be disrupted. You have to host your logo image somewhere publically available, such as imgur, dropbox, flickr, Google Photos, imgbb or some other free image hostings you like.

The images URL must end with .jpg or .png( e.g. http://example.com/logoImage.jpg, http://example.com/logoImage.png), don’t use URLs like this(http://example.com/str0dgz5kb), it will make Email Signature not work. If you logo image URL is “https://i.imgur.com/logoimage.png“, just replace the signature template default logo URL with it in the html code. The final code should be like this “<img src=”https://i.imgur.com/logoimage.png” style=”border-radius: 50%; border: solid 2px #d3d3d1;” alt=”logo” height=”80″ width=”80″> “.

2. In Picture Two, you need to replace the signature name and title(which had been underlined and marked as NO.2(➁)) with you own. For example, your name is “Tom” and title is “CEO“, the only work you need to do is chang “David K. Williams” to “Tom” and change “Marketing manager” to “CEO“, that’s all.

3. In Picture Three, we only need to replace the signature template default company name “Todolib, Inc.”(which had been underlined and marked as NO.3(➂)) with “your company name“.

4. In Picture Four, we need to replace the signature template default address “7890 Fairmont Avenue Armstrong, todolib.123456“(which had been underlined and marked as NO.4(➃)) with “your address” .

5. In Picture Five, we need to change two things(which had been underlined and marked as NO.5(➄)), the telephone number and the phone number. For example, if you telephone number is (123)123123, you should change “href=”tel:4561237890″” to “href=”tel:123123123″” and change “(456) 123-7890” to “(123)123123“. The “href=”tel:123123123″” will make the telephone number clickable to call when your Windows(or OS X) has skype installed or you open the Email Signature in your phone directly. The phone number is the same as above.

6. In Picture Six, we should replace the signature template default email address and web site URL (which had been underlined and marked as NO.6(➅))with your own. For example, if your mail address is tom@yourmail.com and web URL is website.com, you need to change “mailto:email@todolib.com” to “mailto:tom@yourmail.com” and change “email@todolib.com” to “tom@yourmail.com“. Likewise, we will change “https://todolib.com” to “http://website.com” and change “todolib.com” to “website.com“.

7. In Picture Seven, we need to change social media links and social media icons(which had been underlined and marked as NO.6(➆)) to your own. For example, if your facebook link is “https://facebook.com/youfacebookname“, you should change the signature template default facebook social media link “https://facebook.com/todolib” to “https://facebook.com/youfacebookname“, the other social media links are the same as facebook.

In summary, we only need to modify these who were underlined and marked, and without having to care about other parts of the template html code. If you follow the steps one by one, Congratulations! you now have a good looking and professional email signature.

3.1 How To Add Or Change An Email Signature In Gmail(Inbox)?

1. First of all, you should open the email signature html file with your web browser, I recommend Chrome and Safari, just double click on the html file!

2. Right-click to choose [Select All] or use shortcut Ctrl+A( Mac: ⌘Command-A ), then choose [Copy] or use shortcut Ctrl+C(Mac:⌘Command-C) to copy the highlighted email signature.

3. Clicking on the Settings Gear Icon [⚙] at the upper right of your Gmail, select [Settings] from the dropdown menu and go to it.

4. Go to [General tab], scroll down to the “Signature” section, make sure the checkbox is selected under “Signature” section. Place your cursor inside the text box, then Right-click choose [Paste] or use shortcut Ctrl+V(Mac: ⌘Command-V ) to paste the signature into the text box.

5. Scroll down to the end of the Settings page, click [Save Changes] to save the signature. Your signature will now appear at the bottom of email when you compose a message.

6. Other: If you are using Google inbox, go to the main menu [☰] In the top left, then scroll down to the left side of the inbox and choose [⚙ Settings ].

7. Right-click [⚙ Settings ], Select Signature when you see the setting menu pop up, make sure the signature setting is switched to On.

8. Place your cursor inside the text box, then Right-click choose [Paste] or use shortcut Ctrl+V(Mac: ⌘Command-V ) to paste the email signature into the text box, click [DONE] to save the signature.

3.2 How To Add Or Change An Email Signature In Outlook(Hotmail)?

1. Opening the signature html file with your web browser(such as Chrome, Firefox, Safari, IE).

2. Right-click to choose [Select All] or use shortcut Ctrl+A( Mac: ⌘Command-A ), then choose [Copy] or use shortcut Ctrl+C(Mac:⌘Command-C) to copy the highlighted signature.

3. Click on the Settings Gear Icon [⚙] at the upper right of your Outlook(hotmail), select [Options] from the dropdown menu and go to it.

4. scroll down to the “Layout” menu in the [Options] page, click on it and choose [Email signature] section (or select [Shortcuts -> Add an email signature] ).

5. Place your cursor inside the text box, then Right-click choose [Paste] or use shortcut Ctrl+V(Mac: ⌘Command-V ) to paste the email signature into the text box.

6. click [Save] to save the signature, you will see the signature when you compose a new message.

3.3 How To Add Or Change Signature In Yahoo Mail?

1.Open your Yahoo mail, Click on the Settings Gear Icon [⚙] ,select [Settings] from the dropdown menu.
2. Click [Accounts] from left of Settings panel.
3. Click Yahoo account that you are currently using.
4. Scroll down, select [Append a signature to the emails you send].
5. Copy the email signature and Paste it into the Signature field.
6. Click Save button to save the signature.

3.4 How To Add Or Change An Email Signature In Mac Mail?

1. Open the mac mail and then choose [Mail] -> [Preferences].

2. Click [Viewing] panel, make sure the “load remote content in messages” section is selected.

3. Click [Composing] panel, select “Rich text” from [Message Format].

4. Click the plus [+] icon to create a new Apple Mail signature placeholder(Signature #1).

5. Select an account in the left column, and click the Choose Signature pop-up menu to choose the signature you had created In the previous step, then quit you Apple Mail.

6. In your OSX finder, choose [Go] –> [Go to folder]

7. Type in the file path “~/Library/Mail/V3/MailData/Signatures/” in Mac OS X EL Capitan 10.11, “~/Library/Mail/V4/MailData/Signatures/” in macOS sierra 10.12, “~/Library/Mail/V5/MailData/Signatures/” in macOS High Sierra 10.13 and “~/Library/Mail/V6/MailData/Signatures/” in macOS High Sierra 10.13.4, you should be inside the [Signatures] folder now.

8. In the [Signatures] folder, open “xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.mailsignature” file and your email signature html file(xxxx.html) with text editor(I recommend Sublime Text) at the same time.

9. Replace the placeholder with your own html signature, use shortcut [⌘Command-A] to select the signature html source code.

10. Use shortcut [Mac:⌘Command-C] to copy them, then delete everything below the “Mime-Version: 1.0” line.

11. Use shortcut [Mac: ⌘Command-V] to paste the html source code into it.

12. Right-click “xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.mailsignature” to choose [Get info].

13.  click [General] panel [▸] to check the Locked button.

14. Open Mac Mail again, due to security reasons, you won’t be able to see the images in the Signature Preferences Pane, but when you create a new message, everything looks as it should.

3.5 How to add or change an email signature in Microsoft Outlook 2016 for Mac?

Important Tip: 

1. In Outlook for Mac 2016 15.22+, Microsoft replaces the Webkit with Word Rendering Engine to render emails, we can’t add email signature as usual, if you still want that, you may need visit [here] to get help. We use Microsoft Outlook 2016 for Mac 15.14 on this post.

2. If you get message “Outlook can’t upgrade your database” when first launching Outlook app, I recommending visiting [upgrade outlook database] to fix this problem.

1. Open the Microsoft Outlook, choose [Outlook] -> [Preferences].

2. Under Email, click [Signatures].

3. Click Add [+] icon to create a new signature.

4. Opening the email signature html file with your web browser, copy the email signature, and then Paste your signature into signatures box.

5. Under [Choose default signature], select the email Account for which you’ll set a default signature.

6. Open a new message, you will see it there.

3.6 How to install or change an email signature in Thunderbird?

1. Open the Thunderbird, click on the menu [Tools] and select [Account Settings] from the dropdown menu.

2. Click on your email account name e.g. signaure@todolib.com and then you can see the [Signature text] box under the account section.

3. Open the signature html file and Right-click to choose [Show Page Source].

4. Use shortcut Ctrl+A( Mac: ⌘Command-A ) to select the html source code, finally, right-click to choose [Copy] or use shortcut Ctrl+C(Mac:⌘Command-C) to copy them.

5. Place your cursor inside the [Signature text] box, Right-click choose [Paste] or use shortcut Ctrl+V(Mac: ⌘Command-V ) to paste the html source code into it.

6. click [OK] to save the signature, you will see the signature when you compose a new message.

4. Get a free online email signature generator

If you just want to get a simple email signature and create it in minutes, there is a lazy way to finish that. You can search a lot of signature generator sites by using Google, many of them are free, but for some other sites, you need to pay extra fees for full features.

I recommend four Generators: [exclaimer, hubspot, htmlsig,  mail-signatures]. In the Signature Generator Page, enter your personal and corporate information which you would like to appear in signature, some of them are providing multiple templates that have different layouts, fonts, colors, custom logo, you can choose the one you like to customize your signature. if you finished filling out the form required above to populate your signature, simple click ” Create Signature” to generate an email signature.

5. Get a Premium professional email signature

Want a unique personalised and customized email signature? or convert your PSD, SKETCH, AI, JPG, PNG into a working responsive html signature? Fortunately, I think the freelance services marketplace can meet you, there are a lot of professional web designers can help you do this job. You will get the best and lowest-cost choice for your needs, so GET IN TOUCH now…

Note: This post Updated 03-01-2021