How to create HTML email signatures

---

---

On WordToHTML.net, there are several ways to create an HTML email signature as well:

1. Create your email signature with Email Signature Generator on WordToHTML.net.
2. Design your email signature from scratch by entering all text manually in the Visual Editor.
3. Create an HTML email signature by using our built-in templates.
4. You can paste a signature HTML into our HTML Editor created on any other website that offers to create signatures, then modify it (change text, add a photo or logo, etc).
5. Use our AI Writer to generate a sample HTML signature code.

How to design an HTML email signature manually from scratch

We recommend creating a signature in a table. For example, if you want to create a signature with your photo on the left side and all other contact details on the right side, you can start by creating a table with two columns and one row:

Then place your cursor in the left cell of that table and upload or paste your photo. We recommend either uploading a small photo or resizing it when uploading:

If your photo is big, our site will automatically show you a modal dialogue to resize it. We recommend resizing the photo to be around 100-200 pixels wide or tall.

Below you can see the resized image file, which is a small file of 6.6 KiB (kilobytes), 154×154 pixels. Depending on your photo input size, you need to resize it with a slider on the left side until you visually see a small photo that you want to see in your signature. Then click the blue Insert Resized Image button.

After that, you will see your photo in the left table cell:

If you see a big photo in the Visual Editor, just click on it and resize it to a small size as shown in the screenshot above (we recommend 100-200 pixels width/height).

We recommend setting the table width to 500px (+-100px) by placing the cursor in any table cell and then clicking the Table styling icon:

Then enter a table width like 500px and click OK:

You can centre the photo by clicking on it, then selecting Display to Break Text, and then clicking the centre icon. Also, you can make the photo table cell smaller by dragging a horizontal line in the middle to the left side as shown in the screenshot below.

Optionally, if you want to have a rounded photo, you can use our Image Editor. Click on the photo and then click the Image icon:

Then go to the Adjust section and pick Ellipse Crop, and then click the Save button:

Then you have to select PNG format otherwise, you will see a black background added to your image, and click the Save button:

Then you should see a rounded photo in the Visual Editor:

Then enter all your contact details and style as you like in the right cell. Tip: by default, if you press the Enter key, the Visual Editor will create a new paragraph of text that has line padding, but if you hold Shift and press Enter, then it will enter a break line, which does not add much space between the lines.

You can test your signature by sending it to your email client or by previewing it in a browser tab etc.

Optionally, you can add icons with links to your social profiles or any sites you want:

Once you’re happy with your signature, you can save it online on WordToHTML or copy it to the clipboard and paste it into your email client.

For example, in Gmail, go to Settings and find the Signature in the General section, then create a new signature or edit the existing one.

Then paste HTML from WordToHTML.net into the signature text field like shown below, select this signature “for new emails” and click the Save Changes button at the bottom of the Settings page.

If all went fine when creating a new email in Gmail, you will see your signature as shown below:

 

How to create an HTML email signature from a built-in template

All you have to do is click an icon to select the HTML template from the toolbar:

Then select your signature template:

Once you have selected the template, you can edit the content in the Visual Editor:

Replace the placeholder picture with your own in JPG or PNG format. We do not recommend embedding images or using SVG format because some email clients do not support it.

If you want to add more icons to your signature (like the social media links), we recommend you use icons from the Icons site, or you can download PNG icons from the Icon Finder and upload them to our website.

Once you have created your signature, you can then copy and paste it into your email application:

---

You can use our AI Writer tool to generate a signature template for you, but you have to be more specific with the AI prompt to get the results you need.

For example, an AI prompt like this:

Create a CEO HTML signature by using a table with a logo on the left side and my information on the right side. Please use CSS only as inline styles.

This should generate a similar HTML signature. To set your logo, please click the image placeholder and click the Replace icon. Then either select the already uploaded logo or upload one and select it.

We recommend disabling the full-page mode to see and copy only the main HTML:

Once you update the logo image, the signature will look like below. Update the signature info as you need, then copy it to the clipboard and paste it in any email client you want.

---

Frequently Asked Questions about HTML Email Signatures

What is the best image format for an email signature?

JPG or PNG are the safest choices for email signature photos and logos. SVG is not recommended because many email clients (including Outlook) don’t render it reliably, and it can break the signature layout entirely. PNG is best when you need a transparent background, such as a logo without a white box around it.

What size should an email signature image be?

For a profile photo or headshot, 100–200 pixels wide or tall is ideal. Larger images slow down email loading and can look oversized in the recipient’s inbox. Keep the file size small too — aim for under 10–15 KB per image so the signature loads quickly across all devices and email clients.

What width should an HTML email signature table be?

500px (give or take 100px) is a safe standard width. This fits comfortably within most email client preview panes and reading panels without forcing horizontal scrolling, while still leaving enough room for a photo or logo alongside contact details.

Should I use inline CSS for an HTML email signature?

Yes. Email clients strip out or ignore `<style>` blocks and external stylesheets, so all styling needs to be written as inline CSS directly on each HTML element. This is also why building signatures with tables (rather than modern CSS layout methods like flexbox or grid) is still the most reliable approach for email compatibility.

How do I add an HTML signature to Gmail?

Copy your finished signature HTML to the clipboard, then in Gmail go to Settings → See all settings → General → Signature, create or edit a signature, and paste it into the signature field. Select it as your default signature for new emails (and replies/forwards if you want), then click Save Changes at the bottom of the page.

Can I create an HTML email signature without coding?

Yes. You don’t need to write HTML manually — you can use a visual drag-and-drop editor, start from a built-in signature template, or use an AI Writer tool that generates the HTML code for you from a text description (for example, “create a CEO signature with a logo on the left and contact info on the right”). All three methods produce ready-to-use HTML you can copy and paste into your email client.

Why does my photo look too big in the signature editor?

Most uploaded photos come straight from a phone or camera at a much higher resolution than needed for an email signature. Use the built-in image resize tool to scale it down to roughly 100–200 pixels before inserting it, rather than uploading at full size and shrinking it visually — that keeps the file size small and the signature loading fast.

How do I make a circular (rounded) photo in my signature?

Use our crop image editor with an ellipse/circle crop tool while uploading your photo.