How to Create an Attractive HTML Email Signature For Mail on Mac OS X Sierra 10.12

Mac Mail on osX Sierra 10.12

Apple released Mac OS X Sierra (Version 10.12) on Sep 20th, 2016. The latest version of the Mac operating system has some great new features like the intro of Siri and Universal Clipboard. Mail didn’t change much but getting a HTML email signature installed in Mail on Sierra have changed a little from El Capitan. For instructions on creating and installing an HTML email signature on OS X El Capitan or earlier Mac operating systems, click on link: Continue reading for instructions on installing an HTML email signature in Mail on OS X Sierra

Before we start, you need the following to set up a HTML email signature in Mail:

  • A Mac computer with Mail running on Mac OS X 10.12.X Sierra.
  • A text editing software to read and edit the HTML codes. I recommend using TextEdit since it is preloaded on Mac computer.
  • A HTML file coded with your desired email signature design. Use MYDESIGNPAD’s HTML email signature design service if you want us to create a great looking signature design for you.
  • A web server for hosting images being used in your design.
  • (We offer free images hosting if you use our HTML email signature design service)

  • Know how to upload the images to your web server and get image links.

STEP 1: Create Placeholder Signature

  • Open
  • On the main menu, go to Mail>Preferences…>Signatures

Yosemite Mac Mail Preferences

  • Click the + icon located on the bottom of the 2nd column to add new placeholder signature and give it a name that you like. I am naming my signature: MDP-iMac

Yosemite Macmail Preferences Signature Setup1

STEP 2: Assign Signature to Desired Email Account

  • Drag the placeholder signature into the desired email account on the 1st column


  • With the desired email account highlighted on the 1st column, select the placeholder signature from the Choose Signature drop-down menu.


STEP 3: Check Settings for Composing

  • Go to Mail>Preferences…>Composing
  • Make sure Rich Text is selected for “Message Format”


STEP 4: Check Settings for Viewing

  • go to Mail>Preferences…>Viewing
  • Make sure Load remote content in messages is checked


STEP 5: Quit

Make sure you do this in order for the HTML email signature to work properly.

  • You may press Command+Q to quit or click on Mail>Quit Mail

STEP 6: Copy The HTML Email Signature Code With

  • Right-click on your finalized HTML email signature file or hold down the control key to reveal pop-up menu. A HTML file will be emailed to you if you use MYDESIGNPAD’s Email Signature Service
  • Click on “Open With” and select
  • Once the file is open, you will see the HTML code. Select all (Command+A) and Copy (Command+C)
  • If you see your HTML email signature design instead of the HTML code, follow STEP 6B to setup to display HTML code and come back to STEP 6
  • After you copy all the HTML code, you may close the file by clicking on the red dot on the upper-right hand corner of the window (Command+W)


STEP 6B: Set to Display HTML Files as HTML Code

Skip this step if you were able to see the HTML code in STEP 6.

  • Open ~/Applications>

TextEdit app

  • On the main menu, go to TextEdit>Preferences…>Open and Save
  • Check Display HTML files as HTML code instead of formatted text


STEP 7: Locate Placeholder Signature

  • Click on your desktop to reveal Finder.
  • On the main menu, go to Finder>Go>Library (press and hold the option key to reveal Library on the drop-down menu)


  • If not using iCloud, go to ~/Library/Mail/V4/MailData/Signatures/
  • If using iCloud Drive, go to ~/Library/Mobile/Documents/com~apple~mail/Data/V4/MailData/Signatures/
  • Turn on List view and click on Date Modified to display the latest files on top
  • The placeholder signature you just created is the file ending with .mailsignature with the most recent modified date


STEP 8: Open and Update Placeholder Signature

  • Open placeholder signature file with (hold down the option key and click on file to reveal pop-up menu. Click on “Open With” and select TextEdit)


  • Select and delete everything under the Mime Version… line
  • Press Command+P to paste your HTML email signature code that you have copied earlier into the file. (Your HTML file is emailed to you if you are using our Email Signature Service)


STEP 9: Lock Updated Signature File

Very important step to follow in order for signature to work.
Skip this step if you are using iCloud.

  • Click on the downward triangle located on the top right of the opened file


  • On the pop-up menu, check Locked
  • Quit TextEdit

Lock file

STEP 10: Restart Mail

  • Open Mail back up
  • Click on the Compose new message button to open a new message window
  • Your new HTML email signature should appear automatically
  • If your HTML email signature doesn’t show up, make sure the correct email account is selected on the From drop-down menu below the Subject line
  • Make sure the correct HTML email signature is selected in the Signature drop-down menu as well if you have more than one signature installed


Installation Completed

Congratulations! That is it! Hope you got it working as it should. Go on with Mail as usual. Happy email writing. Contact me or leave a note if you have any questions or comments. If you want a creative and visually appealing HTML email signature and would like to have MYDESIGNPAD create one for you, please click on link for more info:

Follow responses through the RSS 2.0 feed | November 14th, 2016 | 2,498 views


  1. March 6th, 2017

    Message body font size change to 16pt automatically after I add html signature. View from Outlook the size is also 16pt. Does anybody run into this issue? Or I miss something?

  2. March 11th, 2017

    Tim Cai says:

    Never heard of this before. Did you assign font size to all your texts in your HTML signature?

Leave a comment * Required fields.


  • "Sure someone else could have created a greater logo redesign for EME Lighting but I was sold on Tim’s diligence & reliability plus I love our new logo! It is fresh, symbolic of who we are while staying in line with our brand intention."

    - Bill Lee
    CEO of EME Lighting
  • "Tim is a trustworthy and effective designer. He redesigned the entire visual identity system for my company & I am extremely pleased with it. As the CEO of a company with over 3000 employees, I would recommend Timmy to anyone looking to have some serious design work done."

    - Tony Ou
    CEO of Senqiu Lighting
  • "Tim effectively designed my website and newsletter. What impressed me the most was his ability to create the images, style and design I was looking for. I highly recommend him if you are looking for someone reliable, flexible and talented."

    - Christine M.
    Owner of Acupuncturebody
  • "Tim has a great personality that makes him a pleasure to work with. He is focused, hard working & always has an attention to details. He has great curiosity and constantly strives to learn & develop himself taking his work to the next level"

    - Slava S.
    Director of Creative Services at STV
  • "Tim conceptualized original ideas & executed the design brilliantly. He always made sure the highest technical & design standards were met. I could always count on him to translate the client vision into reality."

    - Linda G.
    VP Biz Dev. at Real Estate Arts
  • "Tim is a highly talented designer. He has excellent technology skills, amazing dedication & terrific interpersonal abilities."

    - Michael S.
    AD at Real Estate Arts
  • "Timmy is a very talented designer, he is passionate and reliable, his work is always creative & on time. He’s a good person with lots of energy, which makes him a pleasure to work with."

    - Jess L.
    AD at Sudler & Hennessey
  • "Timmy got a great system for helping you figure out what you want, need & putting those ideas down into a tangible product. He has done 3 sites for me already & anyone I have recommended him to has called me back to thank me."

    - Vahram S.
    Owner of Brooklyn Body