How to Create an HTML Email Signature

Is Your Email Signature Displaying Properly in Your Customer’s Mail App?

Have you ever sent an email, confident your professional signature is making a great impression, only to find out it’s not displaying correctly for your recipients? Perhaps it’s showing up as a separate attachment, or maybe the images are broken. This common frustration often stems from using image-based email signatures, which, unfortunately, don’t always behave as expected across different email clients.

Why Choose an HTML Email Signature Over an Image?

While a simple image might seem like an easy way to create a visually appealing signature, it comes with a significant drawback: images often send as attachments and don’t display inline. This means your carefully crafted logo or professional headshot might end up as a separate file your customer has to download, rather than being an integrated part of your message.

This is where HTML email signatures shine. HTML (HyperText Markup Language) allows for far more flexibility and ensures your signature displays consistently and professionally. Here are just a few of the many benefits:

• Inline Display: HTML signatures display directly within the email body, making your communication look polished and professional.
• Interactive Links: Unlike static images, HTML allows you to embed clickable links for your email address, phone number, and website. This makes it incredibly easy for recipients to connect with you directly.
• Social Media Integration: Want to drive traffic to your social profiles? You can embed icons for your social media networks and link them directly to each individual page, encouraging engagement.
• Consistency: With an HTML signature, you can ensure a uniform look and feel across all your company’s outgoing emails, reinforcing your brand identity.

How to Create Your HTML Email Signature

Creating an HTML email signature involves a few key steps, primarily centered around preparing your images and then crafting the code.

Step 1: Prepare Your Images

Before you dive into the code, ensure any images you want to use in your signature (like your company logo or a headshot) are sized correctly. We recommend not using an image wider than 250px to ensure it displays well on various devices and screens.

The next crucial step is to upload these images online so they have a stable URL that your email client can reference. The best place to host these images is on the server your website is already hosted on. You can often upload them via FTP to a dedicated directory (e.g., your-website.com/email-signature-images/). While you could use a WordPress media uploader, it often generates long and less-than-ideal URLs.

Your best bet is to reach out to your website developer and ask them to place these images on your server for you. Need help resizing your images? We can do that too!

Step 2: Craft Your HTML

Once your images are online and you have their URLs, you can start building your HTML signature. Here’s a basic example and a breakdown of what each part does:

HTML

<img src="https://your-website.com/signature-image.jpg" alt="My Logo" style="max-width:250px;"><br>
<strong>Your Name</strong><br>
<em>Position</em><br>
Your Company <br>
<a href="tel:555-555-5555">555-555-5555</a><br>
<a href="https://www.mywebsite.com">www.mywebsite.com</a><br>
<a href="https://www.linkedin.com/yourprofile" target="_blank"><img src="https://your-website.com/linkedin-icon.png" alt="LinkedIn" style="width:24px;height:24px;border:0;"></a>

Let’s break down this example:

<img src="https://your-website.com/signature-image.jpg" alt="My Logo" style="max-width:250px;"><br>

This is where your image goes. Replace https://your-website.com/signature-image.jpg with the actual URL of your image. Make sure to include alt="My Logo" (alt text). This description will display if your customer’s email settings do not automatically show inline images, ensuring they still understand what the image represents. The style="max-width:250px;" helps ensure the image doesn’t stretch beyond your desired size. <br> creates a line break.

<strong>Your Name</strong><br>

Use <strong> to make your name bold and give it some formatting! <br> breaks to the next line.

<em>Position</em><br>

Your job title in italics. Again, <br> for a line break.

Your Company <br>

Simply your company name.

<a href="tel:555-555-5555">555-555-5555</a><br>

Your phone number in a nice clickable format! When someone clicks this, it will prompt their device to make a call.

<a href="https://www.mywebsite.com">www.mywebsite.com</a><br>

Your website in a nice clickable format.

<a href="https://www.linkedin.com/yourprofile" target="_blank"><img src="https://your-website.com/linkedin-icon.png" alt="LinkedIn" style="width:24px;height:24px;border:0;"></a>

An example of how to include a social media icon. Replace the href with your actual social media profile URL and src with the URL of your social media icon image. The target="_blank" ensures the link opens in a new tab.

How to Install Your HTML Email Signature

Once you have your HTML code, the installation process varies slightly depending on your email client. Here are step-by-step instructions for some of the most popular ones:

1. Apple Mail

1. Open Mail and go to Mail > Settings (or Preferences on older macOS versions).
2. Click on Signatures.
3. Select the email account you want to associate the signature with.
4. Click the + button to create a new signature.
5. Uncheck “Always match my default message font.” This is crucial for HTML.
6. Paste your HTML code into the signature editor. (You might need to copy your HTML code from a web browser or a text editor that renders HTML, then paste it into the signature editor.) It might not look perfect here, but it should render correctly when sent.
7. Close the settings window.

2. Microsoft Outlook (Windows)

1. Open Outlook and go to File > Options > Mail > Signatures….
2. Click New to create a new signature, give it a name, and click OK.
3. In the “Edit signature” box, paste your HTML code. Outlook’s editor will interpret the HTML.
4. Choose the email account(s) you want to use this signature for under “Choose default signature” for new messages and replies/forwards.
5. Click OK.

3. Mozilla Thunderbird

1. Open Thunderbird and go to Tools > Account Settings (or Thunderbird -> Account Settings on a Mac).
2. Select the email account you want to add the signature to.
3. Under Signature Text, check the “Use HTML” box.
4. Enter your HTML signature into the Signature box.
5. Save your settings.

4. Gmail

1. Open Gmail in your web browser.
2. Click the gear icon (Settings) in the top right corner and select “See all settings.”
3. Scroll down to the “Signature” section.
4. Click “Create new” to add a new signature. Give it a name.
5. In the signature editing box, you’ll need to paste your HTML code. Gmail’s editor is quite robust and should interpret the HTML directly. You might want to temporarily open your HTML file in a web browser, copy the rendered content, and then paste that into the Gmail signature box.
6. Scroll to the bottom and click “Save Changes.”

5. Yahoo Mail

1. Open Yahoo Mail in your web browser.
2. Click the gear icon (Settings) in the top right corner and select “More Settings.”
3. Click on “Writing email.”
4. Locate the “Signature” section.
5. Toggle the signature switch to “On” for the desired email address.
6. Paste your HTML code into the signature box. Like Gmail, you might need to copy the rendered HTML from a browser or a text editor to ensure it pastes correctly.
7. Your changes should save automatically.

Keep Your Signature Consistent Throughout Your Company

Once you’ve done the hard work of creating and installing your HTML email signature, the next step is to ensure consistency. To maintain a professional and unified brand image, make sure all of your employees are following the exact same model. You’ve done the hard work – all you need to do now is send them the HTML for their own signatures, and point them over to this blog post for easy installation instructions!

Questions, We Are Website Developers Who Answer the Phone!

At Iceberg Web Design, we have helped many of our customers design and translate their email signatures into HTML code. One of the benefits of having hosting and maintenance service with Iceberg, is that help is just a phone call away. (Yes, we do reply to email as well, if that’s your thing!) Reach out at 763-350-8762 or contact us online – we’d love to help improve your digital footprint – both on the web and in your emails!