How to create a simple email signature with a logo

To make a simple email signature with a logo, start from the master vector logo. Export a small, flattened image copy, usually a PNG. Put that image beside or above your name and contact details, and type those details as live text. Then send test messages to the email apps your recipients actually use and check that the logo looks sharp, sits in the right place, and that the signature still makes sense when images are blocked.

The short answer, and the terms behind it

Email signatures display images, not editable artwork. A vector logo stores shapes as mathematical paths: points, curves and fills. That lets it scale to any size without losing quality, which makes it the right source file. Most email programs do not reliably display vector formats such as SVG inside a message body, though. The practical approach is to keep the vector file as your master and export a raster copy for the signature. A raster image is a grid of pixels, such as PNG or JPG, made at the size the signature needs.

Keep these two jobs separate. The vector file is where you fix and adjust the logo. The exported image is a disposable output for one purpose. If the logo changes later, edit the vector and export a new image rather than editing the image.

Before you start

A master logo file, ideally the original vector artwork. A file extension such as AI, EPS, PDF or SVG does not prove the file contains true vector paths. It may contain an embedded pixel image instead.
Permission to use the logo. Owning a copy of a logo file is not the same as being authorized to reuse it. Confirm with the brand owner, or check the brand guidelines if they exist.
The content you want in the signature: name, role, organization and any contact details you choose to share.
A list of the email apps you will send from and the ones your recipients commonly use. Rendering differs between desktop apps, webmail and mobile apps.
A vector editing application that can export images. Menu names and export options vary by application and version, so the steps below describe settings rather than exact commands.

Step 1: Prepare the logo artwork

Choose the logo version that suits a small space. A horizontal lockup is the arrangement of symbol and wordmark side by side, and it usually fits a signature better than a stacked version. A standalone symbol can work if your name and organization appear in the text next to it. If the brand guidelines specify a version for small or digital use, follow them.

Open a copy of the master file, never the original, and work on that copy.
Check the paths. Switch to an outline or wireframe view and confirm the logo is made of clean vector shapes, not an embedded bitmap. Remove stray points, hidden objects and empty layers.
Handle the typography. If the wordmark still uses live text, convert it to outlines, also called curves: shapes that no longer depend on the font being installed. This keeps the letterforms exactly as designed when you export. Keep an unconverted copy for future text edits.
Check fine detail. Thin strokes, small taglines and tight spacing can fill in or disappear at signature size. If the guidelines provide a simplified small-size version, use it rather than modifying the logo yourself.
Set the artboard, or canvas, so it fits the logo tightly. Leave only a small, even margin so the image does not carry unwanted empty space into the signature.
Decide on the background. A transparent background blends into most messages. Some email apps apply dark mode and can change background colors, and a dark logo on a transparent background may then become hard to see. If that is a risk, consider a version with a subtle light background or an outline that works on both light and dark.

Step 2: Export a web-ready image

Format: PNG is the usual choice because it supports transparency and keeps edges crisp on flat-color artwork. JPG suits photographic content but does not support transparency and can blur sharp edges. Avoid SVG for the signature itself, because support across email apps is unreliable.
Color: export in sRGB, the standard color space for screens. Print-oriented CMYK files can shift color or fail to display as expected on screen.
Size: decide how wide the logo should appear in the signature, then export at a multiple of that width. Double is a common choice. Then set the display width in the signature. The extra pixels keep the logo sharp on high-density screens. This is a design recommendation, not a documented requirement, and no specific pixel dimensions were supplied for this guide.
File weight: keep the file small. Large images slow message loading and can be compressed or resized by some email services.
File name: use a short descriptive name without spaces or special characters, for example organization-logo-signature.png.

Step 3: Lay out the signature

A simple signature has two parts: the logo image and a short block of text. Keep your name, role and details as typed text, not inside the image. Live text stays readable when images are blocked, can be selected and copied, and can be read by screen readers. Use a common system font such as Arial, Helvetica, Georgia or Verdana for the text. Custom brand fonts usually will not load in recipients' email apps and will fall back to a default font anyway.

Logo on the left, text on the right, or logo above the text. Both are straightforward.
Name first and slightly emphasized, for example in bold.
Role and organization on the next line.
Only the contact details you actually want people to use.
No extra decorative images, quotes or banners. Each addition is another element that can render differently.

If your email app or signature tool accepts HTML, a basic table keeps the logo and text aligned more consistently than free-form layout. The snippet below shows that structure. LOGO_IMAGE_SOURCE and LOGO_DISPLAY_WIDTH are placeholders for your hosted image location and chosen display width. The padding, font size and color are illustrative values to adjust, not requirements.

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding-right:12px; vertical-align:top;">
      <img src="LOGO_IMAGE_SOURCE" alt="Organization name logo" width="LOGO_DISPLAY_WIDTH" style="display:block; border:0;">
    </td>
    <td style="vertical-align:top; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#333333;">
      <strong>Full Name</strong><br>
      Job title, Organization name<br>
      Contact detail
    </td>
  </tr>
</table>

Always fill in the alt text, the short description attached to an image. It is what recipients see, or hear from a screen reader, when the logo does not load. Usually the organization name followed by the word logo is enough.

Step 4: Add the signature to your email app

Most email apps have a signature setting with a basic editor where you can type text and insert an image. The exact menu location and options depend on the app and its version, and they were not verified for this guide, so check your app's own help documentation if the setting is not obvious. When you insert the logo, set its display size to your chosen width rather than leaving it at the larger exported size.

There are two ways an image can travel with a signature. An embedded image is attached inside each message. It often displays without a download prompt, but it can show up as an attachment and adds to message size. A hosted image is stored online and referenced by location. That keeps messages lighter, but some apps block remote images until the recipient allows them. Your email app may decide this for you. If you have the choice, pick one, then test both the displayed and the blocked state.

Step 5: Test and confirm the result

The signature is finished when it passes the checks below in every email app on your list. Send test messages to accounts you control on different apps and devices, then reply to and forward one of them, because some apps change signatures in replies.

The logo appears at the intended size, neither stretched nor oversized.
Edges and lettering look sharp on a high-density screen such as a modern phone.
The logo stays aligned with the text block on desktop and mobile.
In dark mode, the logo is still clearly visible against the background.
With images blocked, the alt text appears and the typed details still identify you.
The logo does not show up as an unexpected attachment, unless you have accepted that trade-off.
The text is selectable, not part of the image.

Problem | Likely cause | Fix

Logo looks blurry | Exported at or below display size, or scaled up in the editor | Re-export from the vector master at a larger multiple and set the display width

Logo appears huge | Display width not set | Set the width in the signature editor or the image attribute

Logo missing or replaced by an icon | Remote images blocked, or the image location is no longer valid | Check the image source and confirm the alt text is in place

Logo disappears in dark mode | Dark artwork on a transparent background | Use a version that has contrast on both light and dark backgrounds

Jagged or filled-in lettering | Fine detail too small for the display size | Use a simplified small-size logo version if one exists

Logo arrives as an attachment | Image embedded in the message | Switch to a hosted image if your app allows it, or accept the behavior

Gaps in this guidance

No confirmed evidence was supplied for this guide about specific email apps, their image size or file size limits, or the exact export commands in particular design applications and versions. The size, format and dark-mode advice above reflects general design and email practice, not documented requirements. Where a specific limit or command matters, check it in the current documentation for your email app and design software, and treat the test results from Step 5 as the final word.