How to Create an Email Signature with a Logo

The short answer

To create an email signature with a logo, start with a clean master logo file. Export a small raster copy, usually a PNG, sized for the signature. Add that image to the signature editor in your email client, or to an HTML signature you build yourself. Type your name, title and contact details as live text beside the logo. Then send test messages to check how the signature looks in different apps, on phones, in dark mode and with images turned off.

Some terms used in this guide: a vector logo is artwork made of mathematical paths. Paths are lines and curves defined by anchor points, so the logo scales to any size without losing quality. Common vector formats include SVG, AI, EPS and PDF. A raster image is made of a fixed grid of pixels. PNG and JPG are raster formats. A logo should be designed and kept as vector artwork. Email signatures are an output where a raster export is usually the safer delivery format, because many email apps do not display SVG files reliably.

Before you start

• Permission: Confirm you are allowed to use the logo in email. Having a logo file is not proof of permission. Brand guidelines may set the approved versions, colors and minimum sizes.
• The correct master file: Get the official vector source. A file ending in .svg, .ai, .eps or .pdf may still contain an embedded raster image instead of real paths. Open it in a vector editor and check for selectable paths before you treat it as vector artwork.
• The right logo version: A wide signature line usually suits a compact mark or a horizontal lockup better than a tall stacked version. A lockup is a fixed arrangement of the symbol and the wordmark.
• Your signature tool: Choose whether you will use the built-in signature editor of your email client or a custom HTML signature. Built-in editors cost nothing. Free online signature generators also exist. A custom HTML signature gives the most control over layout.

Step 1: Prepare the vector artwork

• Work on a copy of the master file, never the original.
• Convert live type in the logo to outlines, also called converting text to paths. This prevents font substitution if the export machine does not have the brand font installed. Keep an unconverted copy in case the wording needs editing later.
• Remove hidden layers, stray anchor points, empty groups and unused artwork outside the logo.
• Check that thin strokes and small details stay legible at small sizes. If the guidelines provide a simplified small-size version of the logo, use that one.
• Fit the artboard or export area to the logo bounds, with a small, even margin. This keeps the image from carrying invisible padding that throws off alignment in the signature.

Step 2: Export an email-ready image

Decide how wide the logo should appear in the signature. Then export a PNG at a larger pixel size than that display width, commonly twice as large. You will later set the display width in the HTML or the editor. The extra pixels keep the logo sharp on high-density screens. Keep the file small, because large images slow loading and can be flagged or clipped by some services. No confirmed size limits were available for this guide, so check the current documentation of the email platform you use.

Export choice | When to use it | Watch for

PNG with transparency | Logos on a plain background or with irregular shapes | Dark logo artwork can disappear on dark-mode backgrounds

PNG with a solid background | When dark mode makes a transparent logo hard to see | The background box should match or suit the signature area

JPG | Photographic or gradient-heavy marks | No transparency, and compression can blur edges on flat logos

SVG | Generally avoid for signatures | Many email clients do not render it reliably

Dark mode deserves a deliberate decision. Some email apps invert or darken backgrounds, but they leave images unchanged. A dark logo on a transparent background may then sit on a near-black background and become unreadable. Fixes include adding a thin light outline or glow around the artwork, using a version that works on both light and dark backgrounds, or exporting the logo on a light background shape.

Step 3: Handle typography in the signature

• Keep your name, title, phone number and other details as live text, not as part of the logo image. Live text is readable when images are blocked, works with screen readers and can be selected and copied.
• Use a font stack, which is a list of fallback fonts, made up of widely installed fonts. Most recipients will not have your brand typeface installed, and email apps will substitute a fallback font.
• Match the brand colors and weight hierarchy with standard fonts rather than trying to embed custom fonts.
• Keep the signature compact. A logo, a few lines of text and perhaps a short legal line are usually enough.

Step 4: Add the logo to your signature

In a built-in signature editor, open the signature settings and insert the logo with the image tool. Some editors upload the file, and others ask for a hosted image. Type your details next to or below the logo. Menu names and image options differ between email clients and versions, and they change over time. This guide does not give exact menu paths, so follow the current help pages for your client.

An image can reach the recipient in two ways:
Embedded image: attached to each message. It may display without the recipient allowing images, but some apps show it as a separate attachment.
Hosted image: loaded from a web server when the message is opened. It avoids the attachment problem, but it may stay hidden until the recipient chooses to show images.
In both cases, add alt text so something meaningful appears when the image does not load. Alt text is a short text description attached to the image, such as the company name.

For a custom signature, simple table-based HTML with inline styles tends to survive email apps better than modern page layout techniques. The placeholders below must be replaced with your own values. Set the display width to the size you chose in Step 2, not the exported pixel size.

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding-right:12px; vertical-align:top;">
      <img src="LOGO_IMAGE_SOURCE" width="DISPLAY_WIDTH" alt="Company Name" style="display:block; border:0;">
    </td>
    <td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333; vertical-align:top;">
      <strong>Your Name</strong><br>
      Job Title, Company Name<br>
      Phone number
    </td>
  </tr>
</table>

Step 5: Test and confirm the result

The signature is ready when it passes these checks:

• Send test messages to accounts in several email clients, and open them on desktop and on a phone.
• The logo appears at the intended size and looks sharp, not blurry or pixelated, on a high-density screen.
• The logo does not show up as an unexpected attachment.
• With images blocked, the alt text appears and the contact details are still readable.
• In dark mode, the logo stays visible and the text keeps enough contrast.
• The signature keeps its layout when you reply to and forward a message.
• Text renders in an acceptable fallback font, and nothing important exists only inside the image.

Gaps to check yourself

The source material for this guide had no confirmed client-specific details. That includes exact menu paths, maximum signature or image sizes, and current support for particular image formats in individual email apps. Check these in the current documentation for the email client and version you use before you finalize the signature.