How to Add an HTML Email Signature in Gmail and Outlook

A useful email signature answers three questions: who sent this, what do they do, and how can I reach them? Start with those details. A small, readable signature is easier to maintain than a banner containing every service your company offers.

Use VCL's email signature generator to create the formatted block, then install it in your email app. The important handoff is copying the rendered signature into the app's signature editor. Pasting raw HTML such as <table> into an ordinary editing box can leave visible code in the message.

The steps below follow Google and Microsoft documentation checked on 23 October 2026. The example is generated HTML; it has not been verified by sending through authenticated Gmail or Outlook accounts. Finish with the test-message checks below for the clients you actually use.

Make one signature you can reproduce

Here is an example for Fieldnote, a fictional shared brief for design teams. Nadia Chen and the contact details are illustrative; replace them before installing anything.

Enter these values and choose Create signature. You should see a name, a role/company line, and two contact links alongside a green rule. Try Top accent if a horizontal rule suits your sign-off better. After editing any field, create the signature again to refresh the result.

Open the generator's HTML source panel to inspect the result, or download the HTML file to keep a copy. We checked this example's rendered output in a browser; use the received-message checks below to verify it in your email apps.

The current generator uses text and links, with no logo upload, remote images or tracking pixels. Its table layout has a maximum width of 440 pixels. That gives you a simple starting point, but the receiving email app still controls how the final message appears.

Copy and paste the rendered signature

Choose Copy signature after generating. The button places both formatted HTML and plain text on the clipboard. Paste normally into the destination editor; a “paste as plain text” command intentionally removes formatting.

If the browser cannot copy the formatted version:

1. Download the HTML file from the generator.
2. Open the downloaded file in a browser.
3. Select and copy the visible signature.
4. Paste it into your email app's signature editor.

The HTML source panel serves editors that explicitly accept source code. Keep the downloaded file as your editable-workflow reference, but make future name or contact changes in the generator and create a fresh result.

Install it in Gmail on a computer

Open Gmail's Settings → See all settings. Under General, find Signature and create or select the signature you want to use. Paste the formatted block into its editing box.

Choose the signature defaults for new mail and replies as needed, then use Save Changes at the bottom of the settings page. If you send from several addresses, check the selected sender as well. Google's Gmail signature instructions cover defaults and the “Send mail as” address selector.

Open a new compose window after saving. Check that the signature appears for the intended sender, and inspect the email and website links before sending your test. A saved signature can exist without being selected as the default.

Install it in Outlook

Microsoft documents different settings for the new and classic Windows apps. Choose the path that matches your version; the following settings come from its Outlook signature guide.

Paste the formatted result into the editing box. Choose when it should appear: new messages, replies/forwards, or only when you insert it manually. Save the change; classic Outlook uses OK to finish its setup.

In classic Outlook, the message you opened to create the signature does not automatically gain the new default. Start another message or insert the signature manually. Verify the chosen account before testing, especially when personal and company mail share one app.

If your web interface instead shows Mail → Compose and reply, Microsoft also documents that alternate settings path. Use the signature editor available in your version.

Add a logo only if it helps

The generated example works without images. If a logo is useful, make one with the logo creator, prepare a small PNG, and insert it using the email app's own image control after pasting the signature. Keep your name and contact information as text so recipients can still read and select it.

For Gmail, Google lists image upload, Drive and public image-URL options. A URL must point to an image recipients can access; a private file preview is insufficient. Its signature troubleshooting guide explains the options and recommends an image around 70–100 pixels high by 300–400 pixels wide. Treat those as display guidance and preserve the logo's proportions.

When you host an image yourself, open its exact URL in a signed-out browser before using it. Also test the received email with external images blocked. Your contact details should remain understandable even when the logo is absent.

For a separate “Email us about a demo” link on your website, the mailto link generator can include a suggested subject or message. That creates a compose link; clicking it still depends on the recipient's configured email app.

Test the received message, including a reply

Send a test to an inbox you can inspect, then reply to it. Check the received message as well as the composer:

If the paste becomes raw code, repeat the rendered-copy step. If Gmail will not format the text, Google recommends checking that Plain text mode is off in the compose menu. If Gmail hides the signature below three dots, expand the trimmed content before assuming it disappeared. Both cases are covered in Google's troubleshooting instructions.

Email apps may alter fonts, spacing and colors. When a problem appears only in a particular app, simplify the signature and repeat the same send-and-receive test. Keep a short plain-text version for contexts where formatting is unavailable. Update the generator inputs and your installed signatures together when your contact details change.

Once you have the example working, create a signature with your own details and repeat the same checks for each account you send from.