SignatureFox
How to Create an HTML Email Signature
An HTML email signature gives your messages a polished, professional look across all email clients. You'll learn to build one from scratch or customize an existing template so your contact info, logo, and social links appear exactly as intended. By the end, you'll have a working signature ready to install.
Before You Start
- ●A text editor (Notepad, VS Code, or Sublime Text)
- ●Your contact details: name, title, phone, email, website
- ●Logo or headshot file (optional but recommended)
- ●Access to your email client's signature settings
Step-by-Step Instructions
Start with basic HTML structure
Open your text editor and create a new file. Begin with the HTML foundation: <html><body>, then add a table element inside. Use a table for layout because email clients render tables reliably, while divs and CSS often break. Save your file as signature.html.
Tip: Tables are the gold standard for email—they work everywhere, from Gmail to Outlook to Apple Mail.
Add your contact information in table cells
Create table rows and cells for your name, title, phone number, email address, and website. Format each piece of info on its own line or in separate columns. Use inline CSS (style attributes) to control font size, color, and spacing—avoid external stylesheets since email clients ignore them.
Tip: Keep font size between 11px and 14px for readability. Stick to web-safe fonts like Arial, Verdana, or Georgia.
Embed your logo or headshot as base64
Instead of linking to an external image file (which often breaks), convert your logo or photo to base64 encoding using an online converter. Then paste the encoded string directly into an <img> tag inside your HTML using the data:image/png;base64, prefix. This ensures your image always displays, no matter where the email is opened.
Tip: Keep images under 100KB and 200x200 pixels—large files slow down email loading and may trigger spam filters.
Add social media and call-to-action links
Insert hyperlinks to your LinkedIn, Twitter, website, or appointment scheduling page. Use anchor tags with inline styling to control color and remove the underline if desired. Make sure links are clickable and mobile-friendly—use full URLs starting with https://.
Tip: Use a neutral gray or your brand color for links. Test every link in your final signature to catch typos.
Test and install in your email client
Open your signature.html file in a web browser to preview it. Copy all the HTML code, then go to your email client's settings (Settings > Signatures in Gmail, File > Options > Mail > Signatures in Outlook). Paste the code into the signature editor and send a test email to yourself. Check how it appears on desktop, mobile, and different email clients.
Tip: Send test emails to Gmail, Yahoo, and a colleague using Outlook to catch rendering issues before your signature goes live.
Common Problems and Fixes
Images appear as broken links or don't show up at all
External image URLs often fail in email. Convert your images to base64 encoding and embed them directly in the HTML code. This guarantees your logo or headshot displays in every email client.
Spacing, colors, or fonts look different in Outlook vs. Gmail
Email clients handle CSS differently. Use inline styles (style="") instead of <style> tags, and avoid advanced CSS like flexbox or grid. Stick to simple properties: color, font-size, margin, padding, and border. Test across multiple clients.
Signature text is too large or too small on mobile
Set font size in pixels rather than percentages. Use 12px–14px for body text and 16px–18px for your name. Test on an iPhone and Android device. If needed, add mobile-specific styling by testing viewport settings, though most email clients ignore this.
💡 Pro Tip
Use a consistent background color that contrasts with your text (white or light gray work best). Avoid dark backgrounds or busy patterns—they reduce readability and may trigger spam filters. A clean, minimal design conveys professionalism and ensures your signature doesn't distract from your message.
Why This Matters
Building an HTML signature by hand takes time and technical knowledge, and one small mistake can break it across clients. SignatureFox eliminates the guesswork—choose from six professional templates, upload your logo and photo, and get production-ready HTML in seconds.
Frequently Asked Questions
Skip the HTML—generate your signature in 60 seconds
One-time $9.99. No subscription. Delivered to your inbox instantly.
Create My Signature — $9.99🔒 Secure checkout via Stripe · Instant delivery