Professional Email Signatures for Gmail & Outlook: Design + HTML Code

Your email signature is more than just a name tag — it’s your digital business card. Every time you send an email to a client, partner, or colleague, your signature leaves a lasting impression. A well-designed signature not only shows professionalism but also promotes your brand and contact details effectively.

In this guide, we’ll walk you through designing and implementing professional email signatures, complete with visual elements and HTML code that works in both Gmail and Microsoft Outlook.

✏️ Why Are Email Signatures Important?

Email signatures:

Make your emails look polished and professional
Display key contact information in a structured format
Promote your website, social media, and business identity
Improve trust and credibility with clients

🎨 How to Design an Email Signature

You can create your email signature using tools like:

Photoshop or other graphic design software
Paint (for basic layout and icons)
HTML editors like Dreamweaver (for coded versions)
Rich text editors like Gmail’s signature editor

🔧 Elements to Include:

Your full name (in bold or heading)
Job title or position
Instant messaging handle or other contact ID (optional)
Phone number
Company logo (linked to your website)
Social media icons (Facebook, Twitter, LinkedIn, etc.)
Subtle dividing line for visual separation

🧑‍💻 Sample HTML Signature Code

Here’s a basic HTML snippet you can customize for your signature:

<div style="width:100%; border-top:1px solid #ccc; padding:13px;">
  <h2 style="margin:0;">Nick Mintzias</h2>
  <h3 style="margin:0;">President</h3>
  <h4 style="margin:0;">AIM: NickCashU</h4>
  <h4 style="margin:0;">Phone: 224.676.0897</h4>

  <a href="https://yourwebsite.com">
    <img src="https://yourwebsite.com/logo.png" width="261" height="105" alt="Company Logo" style="margin:10px 0;" />
  </a>

  <h3 style="margin:6px 0;">Follow Us:</h3>
  <a href="https://facebook.com/yourpage">
    <img src="https://yourwebsite.com/facebook-icon.png" width="25" height="25" alt="Facebook" />
  </a>
  <a href="https://twitter.com/yourprofile" style="margin-left:12px;">
    <img src="https://yourwebsite.com/twitter-icon.png" width="25" height="25" alt="Twitter" />
  </a>
</div>

⚠️ Don’t Forget:

Replace placeholder links and image URLs with your actual data
Host your images online if using HTML mode in Outlook

📧 How to Add the Signature

🟢 In Gmail:

Go to Settings > See all settings
Scroll to the “Signature” section
Click Create New
Use the rich text editor to add text, links, and upload images
Paste the HTML if you’re using an HTML signature via extensions or apps

🔵 In Microsoft Outlook:

Go to File > Options > Mail > Signatures
Create a new signature
Paste the HTML code in the signature editor (make sure it’s in HTML mode)
Adjust formatting if needed

💬 Final Tips

Keep your design clean and mobile-friendly
Use web-safe fonts and proper spacing
Test your signature by sending emails to yourself or teammates before using it widely

If you have questions about customizing your email signature or need help troubleshooting, feel free to reach us we have special email designers and developers. We’re happy to help you look sharp in every email you send!

How to Design and Implement Professional Email Signatures for Gmail & Outlook

✏️ Why Are Email Signatures Important?