DEV Community

Cover image for What I Learned Building an Email Signature Tool That Works in Every Client
Web Utility labs
Web Utility labs

Posted on

What I Learned Building an Email Signature Tool That Works in Every Client

Hey everyone ✍️

I got irritated of wasting time on bad-looking email signatures, especially since they never looked the same across different email programs. Who has time for that?

So, I built my own email signature generator. I wanted it to be free, easy, and without any BS sign-ups.

Why Make Another One?

I looked around, and there a lot of these things exist. But most aren't great. Seriously! You usually run into issues like:

  • They force you to make an account for no reason.
  • They add watermarks unless you pay up.
  • They make awful HTML code that messes up your signature's look, mainly in Outlook.
  • They keep your personal info on their servers.
  • They charge money for basic stuff.

I wanted something simple, quick, and private. A tool that just works.

What's Different Here?

It All Happens in Your Browser

This thing runs right in your browser, so there are no servers or databases. That means nothing is stored. Your info stays on your computer. What you type doesn't leave.

It Works Where It Counts

I spent time testing this with Gmail, Outlook, Apple Mail, etc. The code uses old-school HTML tables that work pretty much everywhere. It's the only way to be sure your signature looks right.

See It As You Build It

You see your signature change as you type. No surprises when you paste it into your email. That avoids the back-and-forth.

Pick a Style

You can choose from four options:

  • Modern Left - A classic layout. Got a picture on the left? This style is for you.
  • Banner Wide - A wide spot for your company name at the top. Simple but great.
  • Business Card - Style for the cards we know.
  • Stacked Minimal - Everything's centered and clean.

Cool, Helpful Features

Auto QR Code

It makes a QR code from your contact info automatically. People can scan it and save your details instantly. Great for events or sharing info.

Social Media Links

Add icons for LinkedIn, Twitter, GitHub, etc. They look good and don't mess things up.

Contact File Export

It makes a contact file people can add to their address book. Works on any device.

Stay Legal

It has pre-made disclaimer templates for the UK, EU, and India. If you do business there, you probably need one.

Dark Mode Preview

See how your signature looks in dark mode. Lots of people use it, so it's important to check.

How to Use It

  1. Choose a template.
  2. Type in your info—name, title, company, contact details.
  3. Add a photo or logo (optional).
  4. Change colors and fonts to match your brand.
  5. Copy and paste (using Copy as Rich HTML works best).

How to Add It to Gmail

  1. Copy it as Rich HTML.
  2. Go to Gmail Settings → See all settings → Signature.
  3. Paste it in (Ctrl+V).
  4. Save changes.

How to Add It to Outlook

  1. Copy it as Rich HTML.
  2. Go to Settings → Compose & reply → Email signature.
  3. Paste and save.

Tech Details

For programmers:

  • It's all HTML, CSS, and JavaScript.
  • It doesn't need external tools (except the QR code).
  • It uses a canvas to resize images.
  • It saves your info in your browser.
  • It works on phones and tablets.

The HTML code is clean and follows email signature rules. No complicated CSS that breaks in old Outlook versions.

Privacy

Privacy was important to me, so this tool:

  • Doesn't track you.
  • Keeps your data private.
  • Doesn't connect to other servers.
  • Works offline after loading it once.
  • Doesn't use cookies or collect analytics.

Your signature info is only saved on your computer. If you clear your browser data, it's gone. Simple.

What's Not Included (And Why)

  • No fancy text editor: Email programs don't always handle it well. HTML gives more control
  • No moving images: They often don't work.
  • No cloud storage: Privacy first.
  • No paid stuff: It's really free, not a limited version.

Does It Work?

I've used it for months, and it works great in:

  • Gmail (computers and phones)
  • Outlook (computers, online, and phones)
  • Apple Mail
  • Thunderbird
  • Yahoo Mail

Even my grandma's ancient email program shows these signatures fine.

Bottom Line

Building this was fun. It fixed a problem for me, and I hope it helps you too.

Email signatures shouldn't be hard, and you shouldn't have to give your data to some rando company.

The best tools are often the simple ones that do the job.

Questions or problems? The tool is always improving. Let me know if you find bugs or have ideas!

Give It a Try!

The tool is ready to go. No sign-ups or downloads. Just visit the site and start making your signature: https://www.webutilitylabs.com/p/free-email-signature-generator-2025.html

It only takes a few minutes to make a good signature. That's way better than spending an hour fighting with HTML.

Top comments (0)