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 and have the full link to image ready.

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


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.


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.


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.


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/ 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.


Kevin Arrows
Kevin is a dynamic and self-motivated information technology professional, with a Thorough knowledge of all facets pertaining to network infrastructure design, implementation and administration. Superior record of delivering simultaneous large-scale mission critical projects on time and under budget.
Back to top button

Expert Tip

How to Create HTML Signatures in Gmail/Yahoo and Hotmail

If the issue is with your Computer or a Laptop you should try using Restoro which can scan the repositories and replace corrupt and missing files. This works in most cases, where the issue is originated due to a system corruption. You can download Restoro by clicking the Download button below.

Download Now

I'm not interested