Outlook Signature HTML: How to Create and Install HTML Signatures
HTML signatures in Outlook are harder than they should be. The same code that looks sharp in Gmail collapses in Outlook, fonts change, images become attachments, and layouts fall apart. Here's exactly why that happens and how to write HTML that survives Outlook's rendering engine — plus where to install the file when you're done.
Updated March 2026
You open your HTML file in a browser and it looks exactly right. Two columns, clean fonts, your logo sharp on the left. Then you paste it into Outlook, send a test email, and everything is wrong. The columns have stacked vertically. Your profile photo is a white square. There's a gap the size of a paragraph between your name and your job title. The font has switched to Times New Roman.
This is not random. Outlook on Windows doesn't use a browser to display HTML. It uses Microsoft Word's rendering engine — the same engine that renders Word documents. Word was designed for formatted text documents, not web pages. It supports a narrow subset of HTML and ignores most modern CSS properties without any error or warning.
The frustrating part is that this has been true since Outlook 2007, and Microsoft has made no move to change it. Every version of Outlook on Windows from 2007 through the current 365 desktop app uses Word's engine. You are writing HTML for a 17-year-old renderer, and there is no workaround — only a different way to write the HTML.
This guide covers the HTML rules for Outlook, how to install your signature in each Outlook variant, what common HTML breaks in Outlook and what to use instead, and how NeatStamp's signature editor generates Outlook-safe HTML automatically. If you want to understand the problem and fix it yourself, start with the next section. If you want to skip to installation, jump to the install steps.
What Outlook does to your HTML
When Outlook receives an email with HTML content, it passes that HTML through Word's rendering engine before displaying it. Word reads the HTML, applies what it understands, and ignores or misinterprets everything else. There's no error message. Outlook just displays whatever Word produced, which can look completely different from what you intended.
Word's HTML renderer was originally built for importing HTML documents into Word for editing — not for rendering web-quality email layouts. It handles paragraphs, headings, basic tables, inline formatting, and simple borders. That's roughly where its competence ends.
What Outlook strips or ignores
These CSS properties and HTML features are either ignored entirely or broken in Outlook on Windows (2016, 2019, 2021, and the 365 desktop app):
Properties Outlook ignores or breaks
display: flex / gridLayout collapses to single columnfloat: left / rightElements stack or overlap unpredictablyposition: absolute / relativePositioning ignored entirelyborder-radiusAll corners become sharp right anglesbackground-image (CSS)Images don't render — use img tagsCSS variables (--color)Variables not resolved, property droppedSVG imagesNot rendered at all in any Outlook versionbase64 imagesTreated as file attachmentsmax-width / min-widthUse fixed pixel widths insteadbox-shadowIgnored entirelyCSS animationsNo animation supportWeb fonts (@font-face)Falls back to system fontsWhat Outlook does support
The good news is that a properly built HTML signature — using the techniques below — will look identical in Outlook and in modern browsers. These properties work reliably:
Outlook vs. Gmail vs. Apple Mail
Gmail adds its own constraint on top of Outlook's: it strips the entire <style>block from email HTML. So any CSS you put in a stylesheet or a style block in the head is deleted before the email is displayed. The only CSS that reaches Gmail's renderer is inline CSS — style attributes written directly on each element.
Apple Mail uses WebKit, the same engine as Safari. It has excellent CSS support and handles nearly everything a browser would. It is the least constrained of the major clients.
The practical upshot: if you write HTML that works in Outlook (table-based layout, inline CSS only, no flexbox or modern positioning), it will also work in Gmail and Apple Mail. The Outlook constraints are the binding constraint for everyone.
The rules for Outlook-safe HTML signatures
These are hard requirements, not stylistic preferences. Violate any of them and your signature will break in Outlook.
Rule 1: Use table-based layout only
Every layout element — columns, rows, stacked text — must be built with HTML tables. No divs for layout, no flexbox, no CSS grid, no float. If you want your photo on the left and contact details on the right, that's a one-row table with two cells. Add cellpadding="0" cellspacing="0" border="0" to every table element. These HTML attributes control spacing in Outlook even when CSS is ignored.
Do this
<table cellpadding="0" cellspacing="0" border="0"> <tr> <td>Photo</td> <td>Contact info</td> </tr> </table>
Not this
<div style="display:flex;"> <div>Photo</div> <div>Contact info</div> </div>
Rule 2: Inline CSS on every element
No CSS classes. No stylesheet links. No <style> blocks. Every style property must be written as a style=""attribute directly on the element. Yes, that means setting font-family, font-size, and color on every single paragraph. It's repetitive, but it's the only thing that survives both Gmail and Outlook.
Do this
<p style="margin:0;font-family:Arial,sans-serif;font-size:14px;color:#1a1a1a;">Jane Smith</p>
Not this
<style>.name{font-size:14px;}</style> <p class="name">Jane Smith</p>
Rule 3: Fixed pixel widths on tables and columns
Percentage widths are unreliable in Outlook. Set fixed pixel widths on your outer table and on each column. Use both the HTML attribute and the CSS style — Outlook reads the HTML attribute, other clients prefer CSS. A 500px outer table with a 100px photo column and a 380px text column (accounting for padding) is a standard working layout.
Do this
<table width="500" style="width:500px;"> <td width="100" style="width:100px;">
Not this
<table style="max-width:600px;width:100%;"> <td style="width:20%;">
Rule 4: Explicit width and height attributes on every image
Outlook sometimes ignores CSS dimensions on images. Set both the HTML attributes (width="80" height="80") and the CSS inline style. Redundant, but intentional — Outlook reads the HTML attributes while other clients read the CSS. Without explicit dimensions, images can load at full original size and break your layout.
Do this
<img src="photo.png" width="80" height="80" style="width:80px;height:80px;display:block;" alt="Jane">
Not this
<img src="photo.png" style="width:80px;height:80px;" alt="Jane">
Rule 5: Host images at public HTTPS URLs — never base64
Base64-encoded images embedded directly in HTML are treated as file attachments by Outlook. Your recipients see a paperclip icon and find your logo in their attachment list. Host all signature images — logo, photo, social icons — at public HTTPS URLs and reference them with a standard img src="https://..."tag. Use a reliable host: your own server, a CDN, AWS S3, or Cloudinary. Dropbox and Google Drive sharing links don't serve raw image files reliably.
Rule 6: Web-safe fonts with explicit fallbacks
Outlook doesn't load web fonts. Google Fonts, Adobe Fonts, custom @font-face — none of them work. Outlook falls back to Times New Roman if you don't specify a web-safe alternative. Always include a system font fallback: font-family: 'Inter', Arial, sans-serif. In Outlook, 'Inter' will be ignored and Arial will be used. In Gmail and Apple Mail, 'Inter' loads if available. Web-safe fonts that work everywhere: Arial, Helvetica, Georgia, Trebuchet MS, Verdana.
Rule 7: Set margin:0 on paragraphs, control spacing with padding
Outlook adds default paragraph spacing — a bottom margin — to all p tags. If you use paragraph tags without explicitly setting margin:0, Outlook adds large gaps between text elements. Set style="margin:0 0 4px 0;"on every p tag. Use small bottom margins (4px–8px) for controlled spacing between lines rather than relying on default paragraph margins.
Rule 8: Use bgcolor attribute alongside background-color CSS
For table cells that need a background color, use both the HTML bgcolor attribute and the CSS background-color inline style: <td bgcolor="#f1f5f9" style="background-color:#f1f5f9;">. Outlook's Word engine reliably reads the HTML attribute even when it ignores the CSS equivalent.
A working Outlook-safe HTML signature template
This is a complete, functional two-column signature. Left column: photo. Right column: name, title, contact details, logo. It uses table-based layout, inline CSS only, explicit pixel dimensions on everything, and externally hosted images. It renders correctly in Outlook 2016, 2019, 2021, 365, Gmail, and Apple Mail.
Replace placeholder values with your real details. Or use the NeatStamp editor to generate this structure automatically with your actual photo, logo, and brand colors.
<table cellpadding="0" cellspacing="0" border="0"
width="500" style="width:500px;font-family:Arial,Helvetica,sans-serif;">
<tr>
<!-- Left column: profile photo -->
<td width="90" style="width:90px;padding-right:16px;vertical-align:top;">
<img
src="https://yourcdn.com/photo.png"
width="80"
height="80"
alt="Jane Smith"
style="display:block;width:80px;height:80px;"
/>
</td>
<!-- Right column: contact info -->
<td style="vertical-align:top;border-left:2px solid #e2e8f0;
padding-left:16px;">
<!-- Name -->
<p style="margin:0 0 2px 0;font-size:15px;font-weight:bold;
color:#0f172a;">Jane Smith</p>
<!-- Title -->
<p style="margin:0 0 8px 0;font-size:13px;color:#64748b;">
Senior Designer · Acme Inc
</p>
<!-- Phone -->
<p style="margin:0 0 3px 0;font-size:13px;color:#475569;">
<a href="tel:+15551234567"
style="color:#475569;text-decoration:none;">
+1 555 123 4567
</a>
</p>
<!-- Email -->
<p style="margin:0 0 3px 0;font-size:13px;color:#475569;">
<a href="mailto:[email protected]"
style="color:#2563eb;text-decoration:none;">
[email protected]
</a>
</p>
<!-- Website -->
<p style="margin:0 0 10px 0;font-size:13px;">
<a href="https://acmeinc.com"
style="color:#2563eb;text-decoration:none;">
acmeinc.com
</a>
</p>
<!-- Company logo -->
<p style="margin:0;">
<a href="https://acmeinc.com">
<img
src="https://yourcdn.com/logo.png"
width="110"
height="36"
alt="Acme Inc"
style="display:block;width:110px;height:36px;"
/>
</a>
</p>
</td>
</tr>
</table>cellpadding/cellspacing/border on tableHTML attributes that control table spacing in Outlook. CSS equivalents are often ignored by Word's renderer. Always include all three, set to 0.
width='500' AND style='width:500px;'Both the HTML attribute and the CSS inline style. Outlook reads the attribute, modern clients prefer the CSS. Using both covers every scenario.
vertical-align:top on tdWithout this, table cells default to middle alignment. When columns have different heights, middle alignment creates visual gaps at the top. Top alignment keeps content anchored correctly.
border-left dividerA simple border-left on the right cell creates the vertical divider between columns. More reliable than a separate thin-column cell with a background color.
style on every a tagOutlook overrides link colors with its default blue unless you set color inline on the a tag itself. Always set color and text-decoration on every anchor.
tel: link on phone numberMakes the number tappable on mobile. On desktop it may open a dialer app or do nothing — either way, include it. It's a one-line change that benefits every mobile recipient.
Manual approach vs using NeatStamp
Writing HTML signatures by hand is doable if you're comfortable with HTML and willing to test carefully. It typically takes 1–3 hours to write a clean two-column signature from scratch, plus another hour of testing across clients. If you need to maintain and update it over time — new headshot, new job title, updated branding — those manual edits accumulate.
The manual approach
Write the HTML following the rules above. Test by emailing yourself and checking in Outlook (desktop), Gmail (browser), and your phone's mail app. The most common issues to debug: image dimensions, cellpadding/cellspacing missing from a nested table, a paragraph tag without margin:0, or a web font without a fallback. The HTML email signature guide has a full CSS support table showing which properties work in each client.
Use Litmus or Email on Acid if you need to test across many Outlook versions without access to each one. Both services render your HTML across 90+ clients. Email on Acid offers single-test purchases — useful if this is a one-time project.
NeatStamp's approach
NeatStamp generates table-based HTML with inline CSS automatically. You fill in your details and choose a template — the editor produces the correct Outlook-safe HTML without you writing a line of code. Specifically:
- →500px fixed-width table layout — no flexbox or grid anywhere in the output
- →Inline CSS on every element — no style blocks, no classes
- →Both HTML attributes and CSS styles for widths and background colors
- →PNG icons for social links — no SVG
- →Photo crop tool exports a PNG already cropped to shape (circle or square) — no border-radius needed
- →Images hosted on NeatStamp's CDN at stable HTTPS URLs — no base64
- →Web-safe font stacks with Arial/Helvetica fallbacks
- →margin:0 on all paragraphs, spacing controlled via padding
The output passes the 11-point Outlook Compatibility Check automatically (more on that below). If you want to see the HTML it generates, the editor has a code export button that shows you the full Outlook-compatible HTML ready to copy.
How to install your HTML signature in Outlook
The installation method depends on which version of Outlook you're using. Classic Outlook (the traditional desktop app), New Outlook (the 2024 redesign), and Outlook Web App (OWA) each have different paths.
Classic Outlook (2016, 2019, 2021, 365 desktop)
Classic Outlook stores signatures as files in a specific Windows folder. You can drop your HTML file directly into that folder. See the full Outlook email signature installation guide for screenshots of each step.
Open the signatures folder
Press Win + R, type %APPDATA%\Microsoft\Signatures, press Enter. This opens the folder where Outlook stores signature files. If the folder doesn't exist, create it.
Save your HTML file here
Save your signature as yourname.htm (not .html — Outlook looks for .htm files). The filename becomes the signature's display name in Outlook's settings.
Create a matching _files folder
For Outlook to recognize the signature, create a folder named yourname_files in the same Signatures directory. This folder can be empty — it just needs to exist for Outlook to register the signature correctly.
Assign the signature in Outlook
In Outlook, go to File → Options → Mail → Signatures. You'll see your new signature in the list. Select it and assign it to your email account as the default for new emails and/or replies.
Test by composing a new email
Open a new compose window — your signature should appear automatically. Send a test email to yourself and check it in a fresh email client window (not the compose preview, which isn't a reliable rendering check).
The %APPDATA% path in full
On most Windows installations: C:\Users\YourName\AppData\Roaming\Microsoft\Signatures. The AppData folder is hidden by default — using %APPDATA% in the Run dialog bypasses the need to navigate to it manually. If you're on a managed corporate computer, the IT team may have set a different AppData path. Check with your IT department if the folder doesn't appear where expected.
New Outlook (2024 redesign)
New Outlook uses a completely different architecture from classic Outlook. It doesn't read the Signatures folder. Signatures are stored in the cloud and managed through the app's settings UI. See the Outlook 365 signature guide for version-specific details.
Open your HTML in a browser
Open your signature HTML file in Chrome or Edge. The browser renders it as it will appear in email. Select all the rendered content (Ctrl+A) and copy it (Ctrl+C).
Go to New Outlook's signature settings
In New Outlook, click the gear icon (Settings) → Accounts → Signatures → New signature. Give it a name.
Paste the rendered signature
Click inside the signature editor and paste (Ctrl+V). The visual signature content pastes in — not the HTML code, but the rendered output. Some formatting survives the paste; some doesn't, depending on New Outlook's version.
Set as default and save
Choose the signature as default for new messages and/or replies under the dropdown. Click Save.
New Outlook HTML limitations
New Outlook's signature editor does not accept raw HTML paste directly in most versions. The copy-from-browser workaround preserves basic formatting but may lose some styling. For guaranteed HTML fidelity in New Outlook, the most reliable approach is a server-side signature solution via Exchange or Microsoft 365 admin — or using a team signature management tool.
Outlook Web App (OWA)
OWA (Outlook.com and the Office 365 web interface at outlook.office365.com) uses a browser engine to render HTML — so it supports more CSS than desktop Outlook. Installation:
- Click the gear icon → View all Outlook settings.
- Go to Mail → Compose and reply.
- In the Email signature section, click the signature editor area.
- Open your HTML in a browser, select all, copy, paste into the OWA editor.
- Alternatively, if your OWA version has a source view button (</>), use it to paste your HTML directly.
- Save. Send a test email to verify.
OWA's editor can strip some HTML on paste, particularly complex nested tables. If your layout breaks in OWA, simplify the nesting or use the NeatStamp editor's OWA-specific export option.
HTML that commonly breaks in Outlook — and what to use instead
These are the mistakes that show up in almost every first-attempt Outlook signature. Each one has a specific fix.
| Broken HTML | What happens in Outlook | Fix |
|---|---|---|
| border-radius: 50% | Sharp square corners — ignored entirely | Pre-crop the image to a circle shape as a PNG file. No CSS needed. |
| display: flex | Columns collapse to a single vertical stack | Use HTML table with two td elements for the two columns. |
| max-width: 600px | Ignored — table expands to full width | Use width='500' HTML attribute + style='width:500px;' on the table. |
| background-image: url(...) | Background image doesn't render | Use an img tag instead. For backgrounds on email sections, use VML (complex but supported). |
| SVG images | Broken image icon or blank space | Export the icon as a PNG. Keep file size under 20KB. |
| base64 img src | Image appears as email attachment, paperclip icon on every email | Host image at a public HTTPS URL and use that URL in the src attribute. |
| position: absolute | Element disappears or overlaps other content | Remove absolutely positioned elements. Use table cell padding for spacing. |
| float: left/right | Elements stack or overlap unpredictably | Use table columns for multi-column layout. |
| --primary-color: #2563eb | Variable not resolved, property dropped | Use literal color values everywhere. No CSS custom properties. |
| p (no margin:0) | Large gaps between text elements | Add style='margin:0 0 4px 0;' to every p tag. |
| border: 1px solid #ccc (shorthand) | Border may not render in some Outlook versions | Use individual border properties: border-left:1px solid #ccc; (not the shorthand). |
Dark mode and Outlook
Outlook 2021 and 365 (Windows and Mac) apply an automatic dark mode inversion to email content. Light backgrounds flip to dark, dark text flips to light. This can make logos invisible and break carefully chosen color schemes. The dark mode compatible signature guide covers how to prevent unwanted inversions using color-scheme meta tags and strategic use of light backgrounds.
NeatStamp's Outlook Compatibility Tester
NeatStamp runs an 11-point compatibility check automatically when you export a signature. Each check corresponds to a specific Outlook rendering issue. If any check fails, you get a specific description of the problem and how to fix it before you install.
Table-based layout
No flexbox, grid, float, or position detected in the signature HTML
Inline CSS only
No <style> blocks, no CSS classes, no external stylesheet links
Fixed pixel widths
Outer table and all columns have explicit pixel width attributes
Image HTML attributes
Every img tag has both width= and height= HTML attributes
No border-radius
No border-radius property anywhere in the inline CSS
No SVG images
All image src attributes reference PNG or JPEG files, not SVG
No base64 images
No data: URLs in any img src — all images use HTTPS URLs
No CSS variables
No var(--property) references in any inline style
No position/float
No position:absolute, position:relative, or float properties
Web-safe font fallbacks
Every font-family declaration includes Arial, Helvetica, or another system font fallback
HTTPS image URLs
All image URLs begin with https:// and point to public hosts
Signatures built with NeatStamp pass all 11 checks by default — the HTML generator follows these rules in its output. The tester is most useful if you've customized the generated HTML manually or if you're pasting in HTML from another source to check it. It's available on the Outlook-compatible signature page and in the editor export panel.
What about mobile?
Outlook-safe HTML (table-based, 500px wide) renders reasonably well on most mobile email clients. A 500px table will scale down on smaller screens — the layout stays intact but text and images get smaller. For most signatures this is acceptable. For a signature that needs to look deliberately designed on mobile, you'd need media queries — but Outlook ignores those, so any mobile-specific adjustments will only apply to non-Outlook clients.
The practical approach: keep your signature simple enough that it reads clearly at 500px wide and at 60–70% of that on mobile. Avoid small text (under 12px), avoid cramming too many elements in, and make sure phone and email links use tel: and mailto:links so they're tappable. The mobile-friendly signature guide goes into more depth on optimizing for smaller screens without breaking Outlook.
Ready to generate Outlook-safe HTML?
NeatStamp's editor generates table-based, inline-CSS signatures that pass the Outlook Compatibility Tester automatically. You fill in your details, pick a template, and the correct HTML comes out — no manual table writing required.
Export options include a downloadable .htm file ready to drop into your Outlook Signatures folder, copy-to-clipboard for OWA and New Outlook, and a full HTML source view. Works for individual signatures and for team rollouts.
Related guides
Frequently asked questions
Why does my HTML signature look broken in Outlook?
Outlook on Windows uses Microsoft Word's HTML rendering engine, not a browser. Word was built to handle formatted documents, not web HTML. It ignores CSS flexbox, CSS grid, border-radius, CSS variables, background-image, position:absolute, float, and SVG entirely. When Outlook encounters these properties it silently drops them, which causes layouts to collapse. The fix is to build your signature using HTML tables for layout and inline CSS only — the same approach that worked in browsers in 2003.
Can I use CSS classes in my Outlook HTML signature?
No. Gmail strips <style> blocks from email HTML entirely, which removes any CSS classes you define. Outlook partially reads <style> blocks but applies them inconsistently across versions. The only reliable approach is to write every style property as an inline style attribute directly on the HTML element. That means no class attributes, no stylesheet links, no <style> blocks — just style='...' on each tag.
What width should my Outlook HTML signature be?
500px to 600px. Most email clients display a reading pane at least 600px wide, and most mobile screens handle 500px comfortably. NeatStamp generates signatures at 500px — narrow enough to work on small screens, wide enough to display two columns comfortably. Set the width as a fixed pixel value on your outer table element using both the HTML width attribute and the inline style: width='500' style='width:500px;'.
Where do I install the HTML signature file in classic Outlook?
The signature folder for classic Outlook (2016, 2019, 2021, and the 365 desktop app) is at %APPDATA%\Microsoft\Signatures on Windows. Open that folder, create a new .htm file with your signature HTML, and also create a matching folder named yourfile_files for any locally referenced assets. Then go to File → Options → Mail → Signatures in Outlook to assign that signature to your account.
How do I install an HTML signature in New Outlook?
New Outlook (the 2024+ redesign) uses a different path. Go to Settings → Accounts → Signatures. New Outlook has a built-in rich text editor — it doesn't support pasting raw HTML directly. The workaround is to paste your rendered signature (rendered as HTML in a browser, then copy-paste the visual output) into the signature box. Some formatting survives, some doesn't. For full HTML control in New Outlook, the most reliable method is using a signature management tool that injects HTML via Exchange rules.
Does Outlook support border-radius in HTML signatures?
No. Outlook's Word rendering engine completely ignores border-radius. Round profile photos will display as squares. Rounded button corners will display as sharp right angles. The workaround for a round profile photo is to export the photo as a PNG that's already been cropped to a circle shape before it's placed in the signature. NeatStamp's photo crop tool does this automatically — the PNG you get is already circular, so it looks round in every email client including Outlook.
Why do images in my Outlook signature show as attachments?
Two causes. First: you've embedded images as base64 strings in the HTML. Outlook treats base64-embedded images as file attachments, adding a paperclip icon to every email and displaying images as attached files rather than inline. Fix: host all images at public HTTPS URLs and reference them with a standard img src tag. Second cause: you used Outlook's Insert Picture function to add images. That also embeds them. Use HTML img tags with hosted URLs instead.
Can I use SVG icons in my Outlook HTML signature?
No. Outlook on Windows has zero support for SVG. SVG images either display as broken image icons or don't render at all. Use PNG icons instead — they work in every email client including all Outlook versions. Keep icon files under 20KB by optimizing them before hosting. NeatStamp uses PNG social icons and avoids SVG in all generated signatures for exactly this reason.
What is the Outlook Compatibility Tester and how does it work?
NeatStamp's Outlook Compatibility Tester is an 11-point check that runs automatically when you export a signature. It checks for: table-based layout (no divs or flexbox), inline CSS only (no style blocks or classes), pixel widths on tables and columns, explicit width and height attributes on images, no border-radius, no SVG files, no base64 images, no CSS variables, no position:absolute or float, web-safe font fallbacks, and images hosted at HTTPS URLs. Any issues are flagged with specific fixes before you install.
How do I install an HTML signature in Outlook Web App (OWA)?
In OWA (Outlook.com and the Office 365 web interface), go to Settings (gear icon) → View all Outlook settings → Mail → Compose and reply → Email signature. OWA uses a browser-based renderer, so it supports more CSS than desktop Outlook. However, the OWA signature editor doesn't accept raw HTML paste directly in all versions. The reliable method: compose a new email in OWA, switch to HTML source view if available, paste your signature HTML, copy the rendered output, then paste that into the signature editor.