Build a professional HTML email signature with photo, logo, socials and a CTA.
What a good HTML signature is made of, and the tradeoffs behind the choices this generator makes.
An email signature is a block of text (and often an image or two) that your email client automatically appends to the end of every message you send: typically your name, job title, company and a way to reach you. It saves you retyping your contact details on every email and gives recipients a consistent, professional way to identify and contact you.
A plain-text signature is just characters — no logo, no color, no clickable buttons. An HTML signature is built from real markup, so it can include your photo, a company logo, colored text, and clickable links and buttons. Because most email clients strip modern CSS (Grid, Flexbox, external stylesheets, JavaScript), a signature that needs to look right everywhere is built the old way: nested tables with every style written inline on the element itself — which is exactly what this generator outputs.
A logo reinforces your brand on every single email you send — often far more emails than any marketing campaign reaches. Keep it small (a few dozen pixels tall) so it doesn't dominate the signature, use a PNG with a transparent background where possible, and make sure it's still legible at a small size before you finalize it.
Most signatures are read on a phone, not composed on one. A mobile-friendly signature stays narrow (avoid wide side-by-side layouts that force horizontal scrolling), uses a reasonably large font for small screens, and keeps the photo and logo modest in size so the whole thing doesn't dominate a short reply. This generator's templates are built narrow by default rather than relying on responsive CSS, which many mobile mail apps don't apply to signatures anyway.
Outlook for Windows (desktop) doesn't render HTML email with a browser engine — it uses Microsoft Word's rendering engine instead, which has always supported a narrower slice of CSS. Rounded or circular image corners, some spacing techniques, and certain font fallbacks can render differently there than in Gmail, Apple Mail or a browser. This is a known, long-standing quirk of Outlook Desktop specifically — Outlook on the web and New Outlook use a normal web rendering engine and don't have this limitation.
An image can be embedded directly in the HTML as Base64 text, or referenced by a URL that the email client fetches when the message is opened. Base64 keeps everything in one self-contained block, but several webmail signature editors — including Gmail's — strip embedded Base64 images when you paste a signature in, silently breaking your photo or logo. Hosting the image at a stable URL (what this generator does by default) is the more reliable choice for something you'll reuse for months; an optional Base64 toggle is available if you specifically need a self-contained file.
Before relying on a new signature, send yourself a test email and open it from at least one desktop client and one phone. Check that the photo and logo actually load, that every link goes to the right place, and that the layout doesn't overflow or wrap awkwardly on a narrow screen. If you use Outlook Desktop, check it specifically — its rendering differs enough from other clients that it's worth its own look.
Fewer, well-chosen elements read as more professional than a crowded one: your name and title, one or two ways to reach you, and at most a couple of social links or a single call-to-action button. Stick to one or two accent colors and a web-safe font, and leave meaningful whitespace rather than filling every line.
A signature CTA works best for one specific, low-friction ask: book a meeting, view a portfolio, join a webinar. Adding more than one competing CTA dilutes all of them. Keep the button text short and the destination link tested — a broken CTA link undermines the professional impression the rest of the signature creates.
Confidentiality or legal disclaimers are common in regulated industries (legal, finance, healthcare) or for company-wide policy reasons — check with your employer's IT or legal team rather than guessing. If you do add one, keep it short and in a smaller, muted font beneath a visual divider, so it doesn't compete with your actual contact details for attention.
Copy your signature above, then follow the steps for your email client below.
If your photo or logo doesn't appear after pasting, use Copy Signature (not Copy HTML) — Gmail's editor can strip Base64-embedded images, and this tool hosts them at a normal HTTPS URL to avoid that.
Outlook Desktop uses Microsoft Word's rendering engine: rounded or circular photo corners are not supported here and will show as a plain rectangle, even though every other client renders the shape correctly.
Apple Mail on macOS can reformat some pasted HTML. If the layout looks off after pasting, use Download HTML and drag the file into the signature editor instead.
cPanel Webmail typically runs Roundcube or Horde under the hood — follow whichever set of steps matches what you see after logging in.
A signature typed by hand in a mail client is usually plain text. Here you fill in a form, choose one of ten templates and watch the result in a live preview, then copy it into your mail settings. The output is nested tables with inline styles and no scripts, stylesheets, Flexbox or Grid. You never type raw HTML, so every field is escaped and links are limited to web, email and phone addresses.
Example input
Full name: "Jordan Rivera"
Job title: "Product Manager"
Company: "Acme Inc."
Email: "jordan@acme.com"
Phone: "+1 555 010 0100"