How to Create an HTML Email Signature

Make a professional-looking sign-off on any platform

Screenshot of an HTML signature (right) with HTML code (left)

Gmail, Outlook, and Yahoo Mail each let you add a customized signature to every email you send. Each service lets you add and format text, images, and links within a signature box found in settings. You can create a simple email signature for each of these services relatively quickly.

To add an HTML signature, you need to create your HTML signature outside of the email services, since none of these offer the ability to edit HTML within the signature fields. If you know HTML well, open your favorite HTML editor, type up some code, then copy it into the signature field for Gmail, Outlook, or Yahoo Mail.

Many people find it easier to use an email HTML signature generator service. For example, Mail-Signatures.com lets you select the mail provider you use, and then type custom content into fields. Here’s how to use this service.

  1. Open a web browser on your computer and go to https://www.mail-signatures.com/signature-generator/.

  2. In the upper left area, select your email platform: Outlook, Outlook 365, Thunderbird, Gmail, Exchange Server, or Exchange Online. If you use Yahoo Mail, choose the Gmail option, since the HTML code generated for Gmail should also work within Yahoo Mail.

    Screenshot of Mail-signatures.com
  3. Next, select a signature template. As of April 2019, Mail-Signatures.com offers 21 template options. Use the arrows to browse the available options. Click on a template to select it. When you click on a template, you may notice the signature details options displayed in the lower left portion of the screen change. For example, some of the templates include “Disclaimer Text” areas, while other templates omit this section.

    Screenshot of Mail-signatures.com, focus on Signature templates
  4. Customize your email signature details. Select each of the sections displayed in the lower left portion of the screen and enter your email signature data. If you don’t wish to include a field, delete the sample data in the field. Repeat the process for Personal Data, Company Data, Disclaimer Text, Style, and Social Media Links.

    Screenshot of Mail-Signatures.com with Personal Data fields open (Name, title, email, phone numbers)

    What to include in your email signature?

    You may want to include additional contact methods in your email signature, such as one or more phone numbers, or links to social media networks, such as Facebook, Instagram, or Twitter. You also might want to include a street address or website link. Usually you can omit your email address, since anyone who received your email already has this information. You can likely omit your fax number, unless you work in a field that still relies on faxes.

  5. Next, if you want to include a custom photo or logo, select the Graphics option. You’ll need a public link (URL) if you want to include a custom image in your signature. (To get a public link, you might upload your image to Google Drive or Flickr, for example, and make the file available to anyone.)

    Screenshot of Mail-Signatures.com with Graphics field, with link to Photo URL displayed in lower left
  6. When finished filling in and customizing fields, choose Apply your signature.

    Screenshot, with Apply your signature featured
  7. Review and follow any preliminary instructions on the screen, then select Copy signature to the clipboard.

    Screenshot of Mail-Signatures screen, showing highlighted

    Need to customize your HTML signature code?

    Should you want to review or customize your HTML signature code further, you may also paste the code you just copied into an HTML editor. For example, open a new browser tab on your computer, go to https://html5-editor.net/, and paste the copied code into the display box on the right side of the screen. The source HTML code for your signature will display on the left side of the screen. You may make additional edits either in the code or in the display box.



  8. Next, continue the instructions for your email provider below to locate the signature field and paste (Ctrl-V) your new HTML signature into the web version of your mail service.

Gmail

If you use Gmail, you can add an HTML signature from a browser on your computer.

  1. Open Chrome and go to https://mail.google.com. Sign in to your Gmail account, if prompted.

  2. Select the sprocket-like icon in the upper-right area of Gmail, then choose Settings.

    Screenshot of Gmail, with Gear > Setting option shown.
  3. Select the General tab, then scroll down to the Signature area.

    Screenshot of Gmail > Settings > General > Signature area displayed.
  4. Paste your HTML email signature into the Signature field, and edit as desired.

  5. Scroll down to the bottom of the screen and select Save Changes. (For more details, see Adding a Signature in Gmail.)

    Screenshot of Gmail with Save Changes option in General tab displayed.

Yahoo

If you use Yahoo! Mail, you can add an HTML signature from a browser on your computer.

  1. Open your browser and go to https://mail.yahoo.com. Sign in to your Yahoo! Mail account, if prompted.

  2. Select the sprocket-like icon on just below the icon and word Home, in the upper-right area of Yahoo! Mail.

    Screenshot of Yahoo Mail, with Gear setting in upper right highlighted
  3. Select More Settings, near the bottom of the options that display.

    Screenshot of Yahoo Mail, with More Setting link displayed
  4. Choose Writing email from the menu that displays on the left side of the screen.

    Screenshot of Yahoo Mail, with Writing email section highlighted, and Signature enabled
  5. Enable the Signature slider.

  6. Paste your HTML email signature into the Signature field, and edit as desired. (For more details, see Learn How to Integrate HTML Into Your Yahoo Mail Signature.)

Outlook

If you use Outlook on the web, you can add an HTML signature from a browser on your computer.

  1. Open your browser and go to https://outlook.live.com. Sign in to your Outlook account, if prompted.

  2. Select the sprocket-like icon in the upper-right area of Outlook Mail.

    Screenshot of Outlook on the web, with Settings in the upper right highlighted
  3. Select View all Outlook settings, at the bottom of the options that display.

    Screenshot of Outlook web view, after Gear in upper-right selected, shows settings.
  4. Choose Compose and reply from the menu that displays.

    Screenshot of Outlook
  5. Paste your HTML email signature into the Email signature field, and edit as desired.

  6. Check the box for both “Automatically include my signature on new messages that I compose” and “Automatically include my signature on messages I forward or reply to” to add your signature to messages.

    Screenshot of Outlook with HTML signature pasted in and checkboxes marked to automatically include signature on messages and replies
  7. Select Save in the upper right-area of the settings screen. (For more details, see Using Rich HTML in an Outlook 365 and Outlook.com Signature.)