Logo email signatures without attaching or embedding!
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.
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
- [Download the code here]
- Unzip the file
- Open the email_signature.html file with Notepad or other text or HTML editing software.
- Edit to reflect your company information. You can adjust other HTML content as well if you wish.
- Replace https://lenashore.com/studiometry/Web-Logo-stamp-2008-tiger.jpg with the path to your own graphic.
- Adjust the width and height code to reflect the correct size of your graphic.
- Save your file.
Part 2: Install the HTML
Windows Instructions
- Microsoft Outlook 2007 – 2012: Great Installation Video
- Microsoft Outlook 365: Video
- Outlook Express
- Open Outlook Express. Go to Tools –> Options –> Signatures (tab)
- Create a new signature by selecting “New”
- Check the “file” radio button.
- Browse to the HTML file you just saved in Part 1.
- Select “okay”
Mail – Macintosh Instructions
Mail is a little trickier but, not hard once you understand how to do it.
- Open your new HTML file with Safari and save it as a webarchive someplace on your computer.
- Open Mail and go to Preferences–>Signatures
- 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.
- 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.
- You will notice that any signatures you have in this folder have crazy looking names like “1CF6A404-88B6-484F-A69E-69897A0C2885.webarchive”
- Locate the signature file you just created. If you have multiple signatures, check the date to determine which one you just created.
- Copy the crazy name of the signature file.
- Find your email_signature.html file and rename it exactly as it appears in step 12.
- 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!
Have been trying to figure this out forever and these instructions for Apple Mail did the trick! Thanks a million!
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??
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. (:
Images in email signatures are useless.. In 90% of current email clients and web clients images are blocked by default due to security.
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)
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.
Is there anyway to configure this for Mac outlook 2011? I cant seem to figure this out. Thanks for you time and answers.
Does this help?
http://www.bluecoastweb.com/sandbox/blog/creating_complex_html_email_signatures_in_microsoft_outlook_2011_for_mac/
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!
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?
I think you are right. But, you can follow this link I found and see if it helps: http://www.bluecoastweb.com/sandbox/blog/creating_complex_html_email_signatures_in_microsoft_outlook_2011_for_mac/
thank you so much worked perfectly with the link you provided 🙂
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.
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.
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
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.
(:
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. (;
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
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.
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.
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
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.
(:
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
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?
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.
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
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.
(:
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!
YAY! (:
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)
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.
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?
Lena, do you know how to do this for Outlook 2007? Very different from Outlook Express.
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.
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)
Jan10 – you can look at this article for Outlook Express. It should be a similar process. Then you try taking the same HTML code from this post and using it in Outlook 2010. All that being said, i did find an article on creating a signature in Outlook 2010 here:
http://www.nirmaltv.com/2009/07/17/how-to-add-a-signature-in-outlook-2010/
@Dorothy…
You need to goto Users>computername>library>mail>Signatures
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
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?
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.
@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:
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?
@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/
🙂
Siva – can you post or email your code to me? I’ll take a look. :cheerful:
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…