How to Add and Preview a Logo in an HTML Email Signature

The Short Answer

To put a logo in an HTML email signature, keep your vector master file as the source. Export a raster copy, usually a PNG, at about twice the size it will display. Host that image at a public, absolute address and reference it from a simple HTML table with fixed width and height attributes and descriptive alt text. Then send test messages to the email clients your recipients use and check the result with images on, images off, in dark mode and on mobile. Do not paste SVG markup or rely on SVG files in the signature. Many widely used email clients do not render SVG, so a vector-only signature is likely to show a blank space or a broken image.

Terms You Need

• Vector: artwork described by mathematical paths, which stay sharp at any size. Common vector formats include AI, EPS, PDF and SVG.
• Raster (bitmap): artwork made of a fixed grid of pixels, such as PNG or JPEG. Email signatures display raster images most reliably.
• Path: a line or shape defined by anchor points and curves. A logo's outlines, letterforms and fills are built from paths.
• Outlined text: type converted from a live, editable font into paths. Once outlined, it no longer depends on the font being installed.
• Artboard: the defined canvas area in a vector application. It sets the exported image's bounds.
• Rasterize: to convert vector artwork into pixels at a chosen size.
• Anti-aliasing: the soft edge pixels that make curves look smooth after rasterizing.
• Alt text: the text an email client shows in place of an image when the image is blocked or fails to load.

Before You Start

• Get the right to use the logo. Owning or downloading a file, whatever its extension, does not grant permission to reuse a mark. Confirm usage rights or brand guidelines with the owner.
• Find the true vector master. A file ending in .ai, .eps, .pdf or .svg can still contain only an embedded bitmap. Open it in a vector editor and check that the logo is made of selectable paths, not one placed image.
• Choose the logo version. Wide wordmarks and detailed lockups often become unreadable at signature size. A compact or stacked version, or the symbol alone, may read better. If brand guidelines specify a version for small use, follow them.
• Decide the display size. Signatures are viewed at small sizes. Pick the width you want the logo to occupy on screen before you export, then design to that size.
• Arrange image hosting. You need somewhere that serves the image at a stable, public HTTPS address, such as your website, a company asset server or your signature tool's hosting.

Step 1: Prepare the Vector Master

• Work on a copy so the original master stays untouched.
• Convert live text to outlines. If the copy still has editable type, missing or substituted fonts can change the letterforms when someone else opens or exports the file. After outlining, select the text and confirm it shows as paths, not a type object.
• Remove stray points, hidden layers and unused artwork outside the logo. These can enlarge the exported bounds or leave unexpected marks.
• Set the artboard tightly around the logo, plus any clear space your brand guidelines require. The artboard defines the exported image edges, so extra canvas becomes empty pixels.
• Check small-size legibility. Zoom out to roughly the intended display size. Thin strokes, fine gaps and small taglines may fill in or vanish. If they do, use a simplified version rather than shrinking the full lockup.
• Plan for dark backgrounds. A logo with dark artwork on a transparent background can disappear in dark mode. Decide now whether to export a version with a solid background, a light keyline or adequate built-in contrast.

Step 2: Export a Raster Image for Email

Export from the vector master, not from a screenshot or an earlier small bitmap. Set the export to twice the intended display dimensions so the logo stays crisp on high-density screens. The HTML will scale it back down. Exact export commands and option names differ between applications and versions, so check your software's current documentation for its export or save-for-screens feature.

Format | Suitability for a signature logo | Notes

PNG | Usually the best choice | Handles flat color and sharp edges well. Supports transparency, but check dark-mode visibility.

JPEG | Acceptable for photographic logos | No transparency. Compression can blur edges and flat color.

GIF | Limited | Restricted color palette. Only consider it for very simple artwork or animation.

SVG | Not recommended | Many common email clients do not display it. Keep it as a source or web asset, not the signature image.

• Use the sRGB color profile for screen display. Print color modes such as CMYK can shift color or fail to display correctly.
• Keep anti-aliasing on so curves and letterforms look smooth.
• Name the file clearly and without spaces, for example using hyphens between words.
• Keep the file size small. Large images slow loading and some clients may clip long or heavy messages. No specific size limit was confirmed for this guide, so check your client's or provider's guidance.
• Completion check: open the exported file at 100 percent and at half size. Edges should look clean, colors should match the brand, and there should be no unwanted background or extra canvas.

Step 3: Host the Image

Upload the PNG to your hosting location and copy its full, absolute HTTPS address. Relative paths and links to files on your own computer will not work for recipients. Some clients and providers block or strip embedded images and base64 data, or show them as attachments, so hosting is generally more reliable. Completion check: open the image address in a private browser window where you are not signed in. If the image loads there, recipients should be able to load it too.

Step 4: Write the Signature HTML

Email clients support far less HTML and CSS than web browsers. Simple tables, inline styles and explicit image width and height attributes are the most dependable approach. Some desktop clients ignore CSS sizing on images, so put the display width and height in the img tag's attributes as plain numbers. Use your exported size divided by two. Set the signature text in a widely installed font. The logo's brand typeface is already baked into the image. Replace the capitalized placeholders below; the spacing and type size values are illustrative only.

<table cellpadding="0" cellspacing="0" border="0" role="presentation">
  <tr>
    <td style="padding-right:12px; vertical-align:top;">
      <img src="HOSTED_LOGO_IMAGE_ADDRESS"
           width="DISPLAY_WIDTH" height="DISPLAY_HEIGHT"
           alt="Company Name"
           style="display:block; border:0;">
    </td>
    <td style="font-family:Arial, Helvetica, sans-serif; font-size:14px; line-height:1.4; vertical-align:top;">
      Full Name<br>
      Job Title<br>
      Company Name
    </td>
  </tr>
</table>

• Keep the logo's width-to-height ratio the same as the exported file to avoid distortion.
• Make the alt text the company or brand name, so the signature still says who you are when images are blocked.
• If the logo should be a link, wrap the img tag in an anchor and keep border:0 on the image to prevent a visible border in some clients.
• Avoid background images, web fonts and positioning CSS for anything essential. Support for them is inconsistent.

Step 5: Add the Signature to Your Email Client

Every email client installs signatures differently. Some signature editors accept pasted HTML source. Others accept only rendered content: you open the HTML file in a browser, select the rendered signature, copy it and paste it into the signature box. Some editors upload the image themselves and rewrite your markup. Exact menu locations and options change between versions and platforms, and none were verified for this guide. Follow your client's current help documentation. After saving, reopen the signature settings and confirm the logo still appears and has not been resized or replaced.

Step 6: Preview and Test the Result

The signature editor's preview shows only how your own client renders it. To see what recipients see, send real test messages to accounts in the clients your audience uses, on both desktop and mobile. Use this checklist:

• Images on: the logo loads, appears at the intended size, is sharp and not stretched, and aligns with the text.
• Images off or blocked: the alt text appears and the layout still makes sense.
• Dark mode: the logo stays visible and its colors are not inverted badly. If it disappears, use the background or keyline version from Step 1.
• Mobile: the signature fits the screen width without the logo being cropped or overwhelming the text.
• Attachments: recipients should not see the logo listed as a separate attachment. If they do, switch from an embedded image to a hosted one.
• Replies and forwards: reply to and forward a test message. Check that the logo survives and does not duplicate or turn into an attachment.
• Link: if the logo is linked, click it in each client to confirm it opens the intended page.

Common Problems and Fixes

• Blank space or broken-image icon: the client may not support the format, or the address may be private or relative. Use a PNG at a public, absolute HTTPS address.
• Logo shows at full export size: the client ignored CSS sizing. Add plain numeric width and height attributes to the img tag.
• Blurry logo: the image was exported at display size or smaller, or upscaled from a small bitmap. Re-export from the vector master at twice the display size.
• Jagged or filled-in details: the artwork is too detailed for the display size. Use a simplified logo version.
• Wrong colors: the image was exported in a print color mode or without an sRGB profile. Re-export for screen.
• Letterforms look different from the brand: the source file had live text with a substituted font. Outline the text in the master and export again.

What This Guide Could Not Confirm

No verified evidence was available on specific display dimensions, file size limits, or current menu paths for individual email clients and design applications. The format and rendering behavior described here reflects widely observed email practice, but client support changes over time. Treat your own test messages as the final authority, and check current documentation for your email client and vector software where steps depend on version-specific commands.