How do I add a HTML email signature to Outlook & Gmail

Outlook

A) New Outlook for Windows (the one that looks like Outlook on the web)

1. Open Outlook → click the gear (⚙️) in the top right → Mail → Compose and reply.

2. Click + New signature and give it a name.

3. Open your signature.html in a web browser (Chrome/Edge).

4. Drag to select the rendered signature only (not the whole page background), then Copy (Ctrl/Cmd+C).

5. Back in Outlook’s signature editor, Paste (Ctrl/Cmd+V).

6. Choose it as the default for New messages/Replies if you like, then Save.

7. Compose a new email to test.

Why this works: Outlook’s web editor doesn’t accept raw HTML, but it preserves formatting when you paste the rendered HTML.

B) Outlook on the web (OWA – Outlook.com / Office 365 in a browser)

1. Go to Outlook on the web → Settings (⚙️) → Mail → Compose and reply.

2. Open your signature.html in a browser and copy the rendered signature (as above).

3. Paste into the signature box.

4. Set as default → Save → test.

C) Outlook for Windows (Classic desktop)

You have two options:

Fast copy–paste (works well for most people)

1. In Outlook, go to File → Options → Mail → Signatures…

2. Click New to create a signature.

3. Open your signature.html in a browser, select just the rendered signature, Copy.

4. Paste into the Outlook signature editor.

5. Set as default → OK → test.

D) Outlook for Mac (new or classic)

1. Outlook → Settings → Signatures (or Preferences → Signatures on older versions).

2. Click + to add a signature and name it.

3. Open your signature.html in a browser → select the rendered signature → Copy.

4. Paste into the signature editor.

5. Assign it to the account and set as default if you like → Save → test.

Gmail (Web)

Gmail doesn’t accept raw HTML uploads, but it preserves pasted rendered HTML perfectly.

1. Open Gmail in a browser → Settings (⚙️) → See all settings → General tab.

2. Scroll to Signature → click Create new and name it.

3. Open your signature.html in a browser and select only the rendered signature → Copy.

4. Paste into the Gmail signature editor.

5. Under “Signature defaults,” choose it for New emails and optionally On reply/forward.

6. Click Save changes at the bottom.

7. Compose a new email to test.

Gmail app (iOS/Android): the mobile app uses the server-side signature by default. Make sure Mobile Signature is off in the app settings (or replicate a simplified version there if you prefer).

Important notes & troubleshooting

• Fonts: Desktop Outlook for Windows ignores web fonts; it will use the Helvetica/Arial fallback—expected behavior. Gmail, Outlook on the web, iOS Mail, and Apple Mail will use your embedded font.

• Images: Your icons/logos are hosted. Some recipients might have “block external images” enabled; they’ll see placeholders until they allow images. This is normal.

• Pasting the right area: Open your HTML in a browser and copy just the signature block, not the entire page background—this avoids unwanted extra margins.

• Plain Text mode: Ensure you’re composing in HTML/ Rich Text. Plain-text mode strips formatting.

• Default selection: In Outlook/Gmail, set your signature as the default for New messages and Replies/forwards if desired.

• Testing: Email yourself and view on desktop + mobile. If anything looks off, tell me what client/device and I’ll tweak spacing or sizes.