How to Create an HTML Email Signature

Make a professional-looking sign-off on any platform

What to Know

  • Add a signature in Gmail: Select the gear icon and go to See all settings > General. In the signature area, select Create new.
  • Add a signature in Yahoo: Go to Settings > More Settings > Writing email and turn on the Signature toggle switch.
  • In Outlook: Select the gear icon and go to View all Outlook settings > Compose and reply. Paste your info in the Email signature field.

Gmail, Outlook, and Yahoo Mail each let you add a customized signature with formatted text, images, and links to every email you send. This article explains how to do it. The instructions specifically apply to Gmail, Yahoo, and Outlook, but should generally work with most other email services that accept rich text signatures.

How to Add a Signature with Mail-Signatures.com

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

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

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

  2. In the upper-left corner, select your email platform. Choose from Outlook, Outlook 365, Thunderbird, Gmail, Exchange Server, or Exchange Online.

    If you use Yahoo Mail, choose the Gmail option. The HTML code generated for Gmail should also work within Yahoo Mail.

    Email platform options in Signatures Generator
  3. Select a signature template. Mail-Signatures.com offers dozens of template options. Use the arrows to browse the available options. Click a template to select it. When you select a template, the signature details options displayed in the lower-left corner of the screen change. For example, some templates include Disclaimer Text areas, while other templates omit this section.

    Signature templates
  4. Customize your email signature details. Select each of the sections displayed in the lower-left corner 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.

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

    Personal Data
  5. 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, upload the image to Google Drive or Flickr, for example, and make the file available to anyone.

    The Graphics section
  6. When you're finished filling in and customizing fields, choose Apply your signature.

    The "Apply your signature" button
  7. Review and follow any preliminary instructions on the screen, and then select Copy signature to the clipboard.

    The "Copy signature to the clipboard" button

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

  8. 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.

How to Add an HTML Signature in Gmail

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

  1. Select the gear icon in the upper-right corner of Gmail, then choose See all settings.

    The "See All Settings" button in Gmail
  2. Select the General tab, then scroll down to the Signature area.

    The General tab in Gmail settings
  3. If you don't have a Gmail signature set up, choose Create new, and then name the signature. Then, paste your HTML email signature into the Signature field, and edit as desired.

    The Create New Signature button
  4. Scroll down to the bottom of the screen and select Save Changes.

    The Save Changes button in Gmail

How to Add an HTML Signature in Yahoo Mail

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

  1. Select the Settings icon just below the icon and word Home, in the upper-right corner of Yahoo Mail.

    The Settings gear in Yahoo Mail
  2. Select More Settings near the bottom of the options that display.

    More Settings in Yahoo Mail
  3. Choose Writing email from the menu that displays on the left side of the screen.

    The "Writing Email" heading in Yahoo Mail settings
  4. Enable the Signature slider.

    The Signature slider in Yahoo Mail
  5. Paste your HTML email signature into the Signature field, and edit as desired.

How to Add an HTML Signature in Outlook

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

  1. Select the gear icon in the upper-right corner of Outlook Mail.

    The Settings gear in Outlook
  2. Select View all Outlook settings at the bottom of the options that display.

    "View all Outlook settings"
  3. Choose Compose and reply.

    The Compose and Reply heading in Outlook settings
  4. Paste your HTML email signature into the Email signature field, and edit as desired.

  5. Select the Automatically include my signature on new messages that I compose check box and the Automatically include my signature on messages I forward or reply to check box to add your signature to messages.

    The "include signature" options in Outlook settings
  6. Select Save.

Format
mla apa chicago
Your Citation
Wolber, Andy. "How to Create an HTML Email Signature." ThoughtCo, Nov. 18, 2021, thoughtco.com/create-html-email-signature-4685858. Wolber, Andy. (2021, November 18). How to Create an HTML Email Signature. Retrieved from https://www.thoughtco.com/create-html-email-signature-4685858 Wolber, Andy. "How to Create an HTML Email Signature." ThoughtCo. https://www.thoughtco.com/create-html-email-signature-4685858 (accessed April 19, 2024).