How to Create HTML Signatures in Gmail/Yahoo and Hotmail

Most of us use web-based email services like Gmail, Yahoo and Hotmail. It’s great that we don’t need to install and configure anything to receive and send emails. However, there is one thing that these services lack. With the exception of Hotmail, they do not support HTML input in their email signature. It’s true that rich text signature provided by these services would be enough for most users. But admit it – HTML brings a whole new world to add a unique look and features to your email signature. What’s more, you can add an HTML signature without being an HTML geek.

Many services help you create HTML signature without any programming knowledge of HTML. You can customize their feature-rich templates to suit your needs. A simple web search for “create HTML signature online” will give you enough options to create free or nominally charged HTML email signatures.

A note about images: When you insert images in your email signature using these tools, make sure that the images are hosted online. Images stored locally on your computer will not work using this method.

If you are going to use a custom image in signature, first upload it to a site like postimage.org and have the full link to image ready.

In this example, i uploaded the logo for appuals to postimage.org and copied the Direct Link which i will be using in the signature.

2016-02-11_125642

Then create a signature, to do this in a easy to use HTML Editor click here (CKEditor). Once the signature has been created, keep the window open. We’ll be referring back to CKEditor throughout this guide.

2016-02-11_125909

Your HTML Signature should  now be ready. Now see the headings below and follow the one for your e-mail.

Steps to Create HTML Signatures in Gmail

You can create a signature in Gmail in the usual way – by accessing email signature option in the settings. However, just to let you know there is a cool feature called Canned Responses that enables you to create as many email signatures as you want. You can choose the signature according to your need when you compose a new email message.

Click on the Gear icon in the upper-right corner of the screen, and then choose Settings.

gmail html signature-1

Under the section titled “General” scroll down until you see the section titled Signature.

Copy the HTML signature you have created in the first step, and paste it into the signature window. Do not copy the HTML code/source. Only copy the output created by CKEditor.

2016-02-11_133309

Once the signature has been created, scroll down and hit Save Changes. This is it.

How to Create HTML Signatures in Yahoo Mail

Yahoo Mail does not have a canned response feature. However, it has an easy to use email signature feature. Follow the steps below to add an email signature to Yahoo Mail.

Click the gear icon on the upper-right corner in your Yahoo inbox, and click Settings.

2016-02-11_133706

Click the Accounts link on the left side of the settings window, and click on your Yahoo email account shown on the right side of the window.

yahoo html signature

Scroll down a little to find the Signature. Click the Append a signature to the emails you send. Copy and paste your HTML signature from CKEditor not the source and click Save.

yahoo html signature-2

Congratulations! You have successfully added your HTML signature to Yahoo Mail.

How to Create HTML Signatures in Hotmail/Outlook.com

Outlook.com has done a favor to anyone who wants to add an HTML signature. With the possibility to add an HTML signature directly, expert users can code their email signature using HTML. Don’t worry if you are a not-so-expert user. You can design your HTML signature with the help of a WYSIWYG editor. Don’t be intimidated by the weird looking acronym! WYSIWYG means “What You See Is What You Get”. In a WYSIWYG editor, you enter the text, pictures and links, and format in whatever way you like without any knowledge of HTML. The WYSIWYG editor will convert it to HTML code, ready for you to enter in your email signature.

To create an HTML signature in Hotmail, follow these easy steps.

Click the gear icon at the top right corner of your screen and click Options.

html signature hotmail

Under the section titled Writing emails, chose Formatting, font and signature.

html signature hotmail-1

Under the Personal signature, on the upper-right corner of the text box, you have three options.  Rich Text, Edit in HTML, and Plain Text. Rich Text, is if you want to create the signature directly in here, Plain Text is without any rich formatting, and Edit in HTML is where you can paste the source for the HTML Signature you created on CKEditor. To copy HTML Signature, choose source on the CKEditor site, and choose Edit in HTML on Hotmail/Outlook, paste the source in the body and then choose Rich text, to see how it looks. You can also make further changes in Rich text, once done, Hit Save.

2016-02-11_130752

ABOUT THE AUTHOR

Kevin Arrows


Kevin Arrows is a highly experienced and knowledgeable technology specialist with over a decade of industry experience. He holds a Microsoft Certified Technology Specialist (MCTS) certification and has a deep passion for staying up-to-date on the latest tech developments. Kevin has written extensively on a wide range of tech-related topics, showcasing his expertise and knowledge in areas such as software development, cybersecurity, and cloud computing. His contributions to the tech field have been widely recognized and respected by his peers, and he is highly regarded for his ability to explain complex technical concepts in a clear and concise manner.