How to Create and Preview an Email Signature with HubSpot

The short answer

HubSpot offers two routes to an email signature. The free Email Signature Generator builds a signature from a template that you copy into your email client. Signature settings inside a HubSpot account apply to emails sent through HubSpot. Either way, the logo should be supplied as a raster image, usually a PNG, exported from your vector master file. Do not place the vector file itself in the signature. Then confirm the result by sending real test emails and checking them in the clients your recipients use, not only in HubSpot's on-screen preview.

A vector logo is built from mathematically defined paths, so it scales without losing sharpness. Common vector formats are SVG, AI, EPS and vector PDF. A raster image such as PNG or JPG is a fixed grid of pixels. Many email clients do not display SVG reliably in message bodies, which is why a signature logo is normally a raster export of the vector original. A file extension alone does not prove a file contains clean vector paths, and it does not grant permission to reuse a logo. Confirm both before you build the signature.

What this guide could and could not verify

No version-specific HubSpot documentation was available for this guide. Menu names, template options, upload limits and image-hosting behavior are therefore described only in general terms. HubSpot changes its interface over time, so check the current HubSpot help documentation for exact menu paths and any file-size or dimension limits. Treat any sizing advice below as a design recommendation, not a documented HubSpot requirement.

Before you start

• A master logo file that is genuinely vector, with editable paths you can open in a vector editor such as Illustrator, Inkscape or Affinity Designer.
• Confirmation that you are authorized to use this version of the logo in staff email signatures.
• The exact signature details: name, title, company, phone and any links you are permitted to include.
• Access to the HubSpot route you plan to use: the free Email Signature Generator, or signature settings in your HubSpot account.
• At least two email clients for testing, ideally including a desktop client, a webmail client and a phone.

Step 1: Prepare the vector artwork

Open the master file and isolate the logo version that suits a small, horizontal space. A compact horizontal lockup or a symbol-plus-wordmark usually reads better at signature size than a stacked or highly detailed version. Lockup means the fixed arrangement of symbol and wordmark.

• Convert live text in the logo to outlines, or confirm it is already outlined. This keeps the letterforms exact even on a machine without the brand font installed.
• Remove hidden layers, stray anchor points and off-artboard objects. These can enlarge the export bounds or add unwanted pixels.
• Set the artboard tightly to the logo's bounding box, plus any clear space your brand guidelines require. The artboard defines the exported image area, so excess artboard becomes empty padding in the signature.
• Check that fine strokes and small type stay legible when you zoom out to roughly the size the logo will appear in an email. If they disappear, consider a simplified version.

Step 2: Export a web-ready raster image

Export the prepared artboard as a PNG. PNG supports transparency and keeps edges crisp on flat-color artwork. JPG suits photographs, but it can blur the edges of logos and add visible compression artifacts.

• Decide on the display width the logo should have in the signature.
• Export at a multiple of that width, commonly twice, so the logo stays sharp on high-density screens. Then set the display size in the signature. This is a widely used recommendation, not a HubSpot rule.
• Keep anti-aliasing enabled for art-optimized output. Anti-aliasing softens edge pixels so curves don't look jagged.
• Decide whether to use a transparent background. Transparency can look wrong in dark mode if the logo is dark, so test it. Exporting a version with a light background, or adding a thin light outline, can help.
• Keep the file reasonably small, because large images slow message loading and some clients may block or clip them. Check HubSpot's current documentation for any upload limit.

Format | Suitable for the signature logo? | Notes

PNG | Yes, usually the best choice | Crisp edges and supports transparency

JPG | Only for photographic logos | No transparency, and compression can blur edges

GIF | Possible but limited | Restricted color palette; avoid animation unless your brand requires it

SVG | Not recommended | Inconsistent support across email clients

AI, EPS, PDF | No | Source formats, not for display in email

Step 3: Build the signature in HubSpot

Option A: The free Email Signature Generator

• Open HubSpot's Email Signature Generator and choose a template.
• Enter your name, role, company and contact details in the main fields.
• In the styling or image section, add your logo PNG. Depending on the current version, this may be an upload or a field for the address of an image hosted online.
• Adjust colors and fonts to match your brand guidelines. Keep the signature's own text as live text, not part of the image, so it stays readable and selectable when images are blocked.
• Review the live preview, then use the option to copy the signature or its HTML.
• Paste the result into your email client's signature settings, following that client's own instructions.

Option B: Signature settings in a HubSpot account

• Open your personal or profile settings in HubSpot and find the email signature option. It sits in the email section, but the exact location depends on the current interface.
• Use the simple editor to type the signature and insert the logo image, or switch to the HTML editor if you are pasting markup.
• If you insert an image, make sure it is hosted somewhere recipients can load it, such as HubSpot's file storage, rather than linked to a file on your own computer.
• Save the signature and confirm it appears in a new email composed from HubSpot.

If you use the HTML editor, set the logo's display size explicitly and include alternative text, the description shown when images are blocked. The snippet below shows the structure. Replace the placeholder values with your hosted image address, the actual display dimensions and your company name.

<img src="HOSTED-LOGO-PNG-ADDRESS"
     alt="Company Name logo"
     width="DISPLAY-WIDTH"
     height="DISPLAY-HEIGHT"
     style="display:block; border:0;">

Step 4: Preview and confirm the result

An on-screen preview inside HubSpot shows layout, but it cannot show how each recipient's client will render the logo. Send real test messages to yourself and check them against the list below.

• The logo appears at the intended size and is not stretched, squashed or shown at the full export size.
• Edges look sharp on a high-density screen, such as a recent phone or laptop.
• The logo stays visible and legible in dark mode, with no dark artwork disappearing into a dark background.
• When images are blocked or not yet loaded, the alternative text appears and the rest of the signature still reads correctly.
• The signature appears on replies and forwards, not only on new messages, if that is how you configured it.
• The logo is not delivered as an unexpected attachment. Some clients show embedded images as attachments, which may lead you to prefer a hosted image.
• Any links in the signature open the intended destination.

Common problems and fixes

Symptom | Likely cause | Fix

Logo looks blurry | Exported at display size only, or saved as JPG | Re-export a PNG at a higher multiple and set the display size

Logo appears huge in some clients | Display width and height not set | Add explicit width and height to the image

Logo vanishes in dark mode | Dark artwork on a transparent background | Use a light-background version or add a light outline

Extra white space around the logo | Artboard larger than the artwork | Fit the artboard to the artwork and re-export

Letterforms look different from the brand | Text was not outlined, and a substitute font was used | Outline the type in the vector file and re-export

Broken image icon | Image linked from a local or private location | Host the image publicly, for example in HubSpot's file storage

Choosing the right route

Use the free generator when you need one signature to paste into a separate email client. Use account signature settings when the messages are sent through HubSpot itself. In both cases, the decisions that most affect quality are outside HubSpot: a clean vector master, a PNG exported at a suitable multiple of display size, explicit sizing in the signature, and testing across real clients, including dark mode.