Logo email signatures without attaching or embedding!

December 24, 2008 / Updated: December 24, 2008 / Lena Shore

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

Outlook Express – Windows Instructions

  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.
  5. Replace https://lenashore.com/studiometry/Web-Logo-stamp-2008-tiger.jpg with the path to your own graphic.
  6. Save your file.
  7. Open Outlook Express. Go to Tools –> Options –> Signatures (tab)
  8. Create a new signature by selecting “New”
  9. Check the “file” radio button.
  10. Browse to the file you just saved.
  11. Select “okay”

Outlook 2007 – 2010 – Windows Instructions

  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.
  5. Replace https://lenashore.com/studiometry/Web-Logo-stamp-2008-tiger.jpg with the path to your own graphic.
  6. Save your file.
  7. Great Installation Video

Mail – Macintosh Instructions

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

  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.
  5. Replace https://lenashore.com/studiometry/Web-Logo-stamp-2008-tiger.jpg with the path to your own graphic.
  6. Save your file.
  7. Open your revised signature file with Safari and save it as a webarchive someplace on your computer.
  8. Open Mail and go to Preferences–>Signatures
  9. 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.
  10. 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.
  11. You will notice that any signatures you have in this folder  have crazy looking names like “1CF6A404-88B6-484F-A69E-69897A0C2885.webarchive”
  12. Locate the signature file you just created. If you have multiple signatures, check the date to determine which one you just created.
  13. Copy the crazy name of the signature file.
  14. Find your email_signature.html file and rename it exactly as it appears in step 12.
  15. 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!

Posted in ,

Lena Shore

Lena is a full-time freelancer and nerd that specializes in web development, graphic design, and illustration. She enjoys building things, learning new things, pursuing creative endeavors, and giving free advice.

45 Comments

  1. Sally L on April 12, 2013 at 12:52 pm

    Have been trying to figure this out forever and these instructions for Apple Mail did the trick! Thanks a million!

  2. Verity on February 14, 2013 at 12:35 pm

    Nice thanks for the info.

    I have also managed to use HTML and CSS for a signature – overkill perhaps.
    One of the downsides of your method is if the recipient does not have internet access eg when viewing the email offline?

    I used {font-family} is css to try to get either a pc font or a mac sans-serif font. but then some PCs don’t use the font I do so it still gets changed in forwards and replies

    SO, I was wondering is it possible to embed a font into an email (without using Exchange Server)? That must be the neatest non-jpeg based solution??

    • Lena Shore on February 15, 2013 at 10:26 am

      Yes. One of the downsides would if they did not have internet access the image would be empty/missing.

      When you use “font-family” you can make a list of choices. The recipient’s computer will try the first one, then the second, and so on. So, you could have something like this: font-family: “Frutiger”, “Helvetica Narrow”, Helvetica, Arial, San-Serif; In that case it would try to use Frutiger first, Helvetica Narrow second, and so on.

      I am not aware of a way to embed a font into your signature. On first glance it seems like a good way to get a virus and wouldn’t be supported. You might give it a google and see what you come up with. (:

  3. mike on February 11, 2013 at 1:58 pm

    Images in email signatures are useless.. In 90% of current email clients and web clients images are blocked by default due to security.

  4. Tim Pearson on January 19, 2013 at 7:34 pm

    Hi, wonder if you can help….
    I just set up a signature, not by html but inserting a graphic from file…
    when I send the mail it looks fine, but receivers of the email get the logo twice
    any ideas?
    Thx in advance….
    (ps. tried several different graphics just to test and they all get duplicated in the receivers email)

    • Lena Shore on January 21, 2013 at 9:49 am

      Interesting. Can you email me two things? One an email with the signature and also the attachment of your HTML so I can review it.

  5. Raul on December 4, 2012 at 1:23 am

    Is there anyway to configure this for Mac outlook 2011? I cant seem to figure this out. Thanks for you time and answers.

  6. Deb on November 6, 2012 at 1:02 pm

    Hi Lena,
    Hope you don’t mind me reaching out. I have been trying to figure out how to incorporate an icon into my email signature using HTML. I understand the concept of using a path to the image and I have the link for it. Now…as far as executing 🙂

    Everytime I try to put HTML into my email signature …I just get the HTML code back. I even just tried cutting and pasting your HTML code to see if I could get that to work, and no luck. I can’t seem to attached a file as my email signature.

    I use both Outlook 2010 and OWA. What am I doing wrong? Any help would be MUCH appreciated!! Thanks in advance.

    p.s. Great site!

  7. David on September 26, 2012 at 2:41 pm

    Hi Lena,

    Thanks so much, can you advice how to create this with Mac Outlook 2011?
    Can I just create the html code in lets say dreamweaver and then copy and paste it to the signature in Outlook?

  8. E Top on September 11, 2012 at 11:40 pm

    Hi Lena,

    I am running OS 10.8.1 and found the following anomalies. The signature files are located in Users->Home-> Library-> Mail-> V2-> MailData-> Signatures. They also do not end with .webarchive mine end with .mailsignature
    Consequently, the renamed .webarchive files do not work. I even tried to to rename the webarchive file I made to end with .mailsignature That did not work either.
    Any assistance would be appreciated.

    • Lena Shore on September 12, 2012 at 10:28 am

      Hi E!

      Yes. You are correct. I am working on an update to this article or perhaps a new article outlining the “old” way and the new way. It should happen within the next two weeks. There is a bit of a trick to it, but not too bad.

  9. Aiden Dickinson on September 6, 2012 at 11:37 am

    Hi Lena
    I hope you don’t mind me emailing.
    You came up in the google search whilst trying to solve my issue with an email signature in outlook express.
    I followed your steps. I made a .jpg pic and hosted it on our ebay frooition image host site but it doesn’t show when i create a new email although the text below does.
    Logo is at http://my.frooition.com/090130/images/EbayLOGO2.jpg

    It says “One or more of the pictures in this message could not be found”

    Any ideas?

    Thanks for your help

    Aiden

    • Lena Shore on September 7, 2012 at 8:39 am

      Hi Aiden!

      I don’t mind at all. It sounds like one of two problems. Either there is a setting in Outlook that blocks images (you might check your preferences) or maybe when you saved the HTML it had a space or something. Can you double-check your code to make sure the URL is exact?

      Also, did you restart Outlook? Does it work the same when you just bring up a blank message? Meaning – there isn’t anything else in the message that it thinks could be missing.

      (:

  10. Lena Shore on August 9, 2012 at 7:41 am

    Mindel,

    I’m am quite sure the problem is the PC, not you. If it shows up at all (in any mail browser) the programming part is sound. There are lots of settings on PCs to block images and the default is often set that way. I imagine after they get you in their address book or adjust their settings the image will show up.

    Unfortunately, some people will never fix their settings and you can’t control that. Those people are living a life of no pictures in their email. We should feel sorry for them. (;

  11. Mindel Kassorla on August 9, 2012 at 3:43 am

    Hi Lena,

    I’m having another issue – when i send my emails with the signature, for some people it does not show up. For example: when i send an email from my mac at my office to my gmail account and I check it in my gmail account on my mac at the office, i see it. On my PC at home however, i do not see it. I also don’t see it in windows mail on my PC at home. I know that other clients cannot see it as well because when they send replies to my office email, and the signature shows up below in the quoted text, there is no logo…. Do you think this is just a setting on other computers, or am I doing something wrong? I want to ensure that all my clients will see the logo.

    Thanks so much for your help and your time,
    Mindel

  12. Mindel Kassorla on August 6, 2012 at 8:37 am

    thanks, i finally got it.

    do you know how to make this work on Gmail with a PC?
    i have an image signature in gmail, but sometimes i think it shows up as an attachment for people.

    • Lena Shore on August 6, 2012 at 9:28 am

      Last I looked at the gmail settings it seems like it required me to use a URL anyway. You might try to rebuild it and test it. I’m not really sure.

  13. Mindel Kassorla on August 5, 2012 at 4:43 am

    hi lena

    you can ignore my previous question – when i restarted mail it worked.
    but i have a different problem – the picture doesn’t show up.
    when i followed the beginning of your instructions for mac, i did not understand what you meant in step 5. in my text-edit program, i do not see a web address for your picture, i see your actual picture, so i could not replace the code, i just placed my picture in place of yours by dragging it from the webpage it is on. clearly that did not work because my picture doesn’t show up in the email.
    can you help me fix this?
    this is my picture:
    http://www.bengasner.com/wp-content/uploads/2012/07/ben-apple.jpg
    how do i get it into the signature?

    thanks
    MK

    • Lena Shore on August 5, 2012 at 8:11 am

      Hi Mindel!

      Most likely, you didn’t get the full path of the image. You need to be able to see the signature’s HTML code, not just how it looks on the surface. Once you do that, I bet it will make sense. You should be able to open your signature using a text editor of some sort to view the code.

      (:

  14. Mindel Kassorla on August 5, 2012 at 4:18 am

    hi lena

    i did your mac instructions.
    i got all the way to the end – the signature appears in my library and its under the correct name, and when i double click on it i get a webpage displaying my signature exactly as i want it. BUT in my mail, the signature doesn’t show up correctly. its just the way it was before i did the replace.
    can you help?

    Thanks!
    MK

  15. Eric Lindesvärd on July 14, 2012 at 7:17 pm

    Hi Lena!

    Thanks for sharing this. I got it to work earlier on another Mac, but now I can’t get it to run properly. I have a Macbook Pro and OS X Lion. In my Library/Mail folder: V2/Maildata/Signatures. When I replace the file with the crazy name it get’s empty. Can’t understand why.

    The code seems to work:

    +46 706 32 86 51
    lindesvard.se
    twitter.com/limetreesword</p

    Have any idea on why?

    • Lena Shore on November 19, 2012 at 11:46 am

      Hey Eric – I’m so sorry it’s taken me so long to reply. Your comment got stuck in my pending area and I only just saw it. The empty file is caused by not locking the file. I made new instructions for Lion here. Look in the “Lock your new signature file” section.

  16. albertus on January 14, 2012 at 7:07 pm

    I tried and I tried and I really tried hard! BUT i can’t get it to work 🙁
    It looks that I have problems in using a text editor with opening your code. Changing name is ok, but as soon As I replace your graphic with my link the text editor changes the document in an rtfd documents which I can’t open with safari app. So do you have any tricks for me how I can edit your code and replace your image with mine?

    thanks, albertus

    • Lena Shore on January 14, 2012 at 9:40 pm

      Hi Albertus!

      If you are on a Macintosh, you can use TextEdit or SimpleText and save as plain text. If you are on a Window’s machine you can use notepad.

      (:

  17. jan10 on March 10, 2011 at 10:29 am

    thank you so much Lena for your help after sending you an email with the proper URL where my code was stored! You solved my problem in no-time!

  18. jan10 on March 10, 2011 at 8:27 am

    thank you for this quick reply,

    unfortunately adding the empty lines do not work, this is what I have right now:

    body {
    margin-top: 0 px;
    margin-left: 73 px;
    font-family: Times, serif;
    }
    img {
    padding: 0px;
    margin-top: 0px;
    margin-left: -73px;
    }

     

     

    Do you think it is ok like this?

    (It seems like apple mail won’t allow me to reply to a message and keep my own signature rules, somehow the original mails hmtl is taking over. I use Mac OS 10.6.6)

  19. jan10 on March 10, 2011 at 6:25 am

    Dear Lena,
    Is it possible to make a banner in an email and then when you start writing have the text begin at a specific width from the left side of the email window in a specific font?
    I wrote something for this but because I specified the margin-left in the body, when people want to reply to a message that has been written like this they are also forced to begin their text at this point and use the same font. Putting things in a table and giving a style to this table also didn’t work out fine.

    • Lena on March 10, 2011 at 7:56 am

      It sounds like you are doing the right things. I would probably make a couple of empty spaces above and below the signature with no formatting at all so your recipients reply they won’t be “stuck” inside what you formatted. Does that help?

  20. Chris on September 28, 2010 at 10:10 pm

    Lena, do you know how to do this for Outlook 2007? Very different from Outlook Express.

    • Lena on September 29, 2010 at 11:36 am

      Chris – I need to get Outlook so I can write a good tutorial on this. It’s been too long and I can’t remember the exact steps. But, Outlook uses templates. So, you would create a template that would include the HTML code. Then you apply a template to your email. Somewhere in the preferences you can tell it to always use a particular template as the default.

      • jan10 on April 6, 2011 at 7:08 am

        Hi Lena, I’m also looking for the way to put an hmtl signature in outlook but then for outlook 2010.
        When doing this in the Mail programme from Apple you us the archive file and replace it in the signatures folder. Would this work with outlook when you go to outlook/documents and settings and then signatures (if there is a folder like this? haven’t had the change to find a pc with outlook 2010 yet but will do this within a couple of hours)

  21. Marcus Stringer on November 30, 2009 at 5:01 pm

    @Dorothy…
    You need to goto Users>computername>library>mail>Signatures

  22. Dorothy on November 18, 2009 at 12:20 pm

    When I go to the Mail folder on my hard drive there is no Signature folder within. So I’m stuck on Step 10 for your Mac instructions.

    Can you help?

    Thanks, Dorothy

    • Lena on November 18, 2009 at 12:54 pm

      Are you sure you successfully created a new default signature as in step 9? It’s possible if you have no signatures there may not be a folder for them yet. Perhaps it didn’t take when you created it? What version of OSX are you using?

  23. Harro on February 5, 2009 at 4:46 pm

    Thanks. It just pointed me in the right direction. Necessary because our logo (embedded as a file) caused messages to got stuck in spam filters.

  24. Lena on February 5, 2009 at 2:38 pm

    @David

    Thanks for the kudos.

    I bet you are using Internet Explorer to view the html. I have no problems viewing the image in other browsers – but was able to replicate your problem when I tried it in IE. If you look at the source code and copy/paste the path in a new window it shows up. I suspect it is because it is not a full HTML page with body tags, etc. I think other browsers make allowances for that, but not IE.

    Just open the file in notepad or other text editor and continue as normal. When it is used in a mail program, it should display just fine. :biggrin:

  25. David on February 5, 2009 at 12:53 pm

    Lena, love your site and thanks for this tip.

    Unfortunately, when I simply double click your email_signature.html file, I get an page that shows your signature, but no logo. Any ideas?

  26. Lena on January 4, 2009 at 7:10 am

    @Siva: I took a look at your code. Thanks for the email.

    I probably buried this bit of information too far down in my post, but it is important. You need to strip out the HEAD and META content of your signature. You just want the code for the signature and nothing extra. Since you aren’t using the BODY tag, you should strip that too.

    If you’ll look at my code, you’ll see there is not “extra” information. You don’t want to create a full HTML page. Just a little snippet for your signature.

    Delete lines 1-15 (this is where you extra code is) and the closing tags on line 97. Line 21 has a rogue closing FONT tag.

    You might want to run the code that is left through a HTML validator to catch anything else. It won’t understand why you don’t have body tags – but it will be helpful to find other problems. W3 has a good one here: http://validator.w3.org/

    🙂

  27. Lena on January 3, 2009 at 10:03 am

    Siva – can you post or email your code to me? I’ll take a look. :cheerful:

  28. Siva on January 3, 2009 at 5:29 am

    I am using windows XP. I have configured Outlook express version 6 signature using the above stated method. I have a logo in our website. Even though the mails from which I send from Out look express shows an attachment in REDIFFMAIL, GMAIL etc… Pls help…

Leave a Comment

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Archives