Logo email signatures without attaching or embedding!

Email Signature Sample

December 24, 2008 / Updated: January 18, 2024 / Lena Shore
Filed under: ,

This article will explain how to make a logo signature in Outlook Express (for Windows) and Mail (for Macintosh using systems before Mountain Lion. If you are running Mountain Lion or newer go here.).

Reasons to do this

  • It looks nice to have your logo in your signature
  • Hosting your logo “on-line” (as opposed to making it part of your email) won’t create an attachment when you send an email to someone. You have less chance of getting hung in their spam filters and they won’t get confused by extra attachments.
  • Emails without embedded logos are smaller and take up less room in someone’s inbox.
  • If you decide to change your logo, you can do it on your end and everyone else’s email with your signature will reflect the change.

You will need:

  • Your logo uploaded to the internet and the path to it.
    EXAMPLE. See how when clicking the sample you only get the logo and nothing else? Note the URL (https://lenashore.com/studiometry/Web-Logo-stamp-2008-tiger.jpg). That is the full path to the image and the link you will need.
  • A basic text program (i.e. Text Edit, Notepad) or HTML program.
  • My sample code. [Download code here]

The end result will look like what you see below. But you will alter it to include your logo and information.

Email Sample

The Instructions

You will need:

  • Your logo. You should save it as a PNG or JPG in the size that you want it to display. Make a note of the size (i.e. 150 pixels high by 300 pixels wide)
  • A program that will read plain text or HTML. (Notepad, BBedit, Dreamweaver, etc.)
  • The URL where you’ve uploaded your logo. You’ll need to upload your logo to a public space, like your website. Once uploaded you can copy the URL to your graphic. (i.e. https://yourcompany.com/images/company-logo.jpg)

Part 1: Create the HTML

  1. [Download the code here]
  2. Unzip the file
  3. Open the email_signature.html file with Notepad or other text or HTML editing software.
  4. Edit to reflect your company information. You can adjust other HTML content as well if you wish.
  5. Replace https://lenashore.com/studiometry/Web-Logo-stamp-2008-tiger.jpg with the path to your own graphic.
  6. Adjust the width and height code to reflect the correct size of your graphic.
  7. Save your file.

Part 2: Install the HTML

Windows Instructions

  1. Microsoft Outlook 2007 – 2012: Great Installation Video
  2. Microsoft Outlook 365: Video
  3. Outlook Express
    1. Open Outlook Express. Go to Tools –> Options –> Signatures (tab)
    2. Create a new signature by selecting “New”
    3. Check the “file” radio button.
    4. Browse to the HTML file you just saved in Part 1.
    5. Select “okay”

Mail – Macintosh Instructions

Mail is a little trickier but, not hard once you understand how to do it.

  1. Open your new HTML file with Safari and save it as a webarchive someplace on your computer.
  2. Open Mail and go to Preferences–>Signatures
  3. Create a new signature by clicking the plus sign in the middle column. (Don’t worry about editing this as we are going to replace this with our new signature.) You can close this window.
  4. Now, go to your home folder –>Library –> Mail –> Signatures (If you don’t see your Library folder, you may have upgraded to Lion or another OS that hides it. Follow this link to learn how to display the Library folder again.
  5. You will notice that any signatures you have in this folder  have crazy looking names like “1CF6A404-88B6-484F-A69E-69897A0C2885.webarchive”
  6. Locate the signature file you just created. If you have multiple signatures, check the date to determine which one you just created.
  7. Copy the crazy name of the signature file.
  8. Find your email_signature.html file and rename it exactly as it appears in step 12.
  9. Replace your the signature file with the newly named email_signature.html file of the same name. It will ask you if you want to replace the file. Tell it yes.

Options

You can use this same method to create a wide variety of styles for your signatures. This is just one example. If you have access to an HTML program you can use that to see what you are doing. Just remember you don’t need the body tags or the header information for a signature.

Happy signing!

Archives

Categories