How to Add a Logo to Your Email Signature (So It Actually Displays)

A logo in your email signature is a small, repeated cue that reminds every recipient who they are dealing with. Done well, it looks polished. Done wrong, it shows up as a broken-image icon, a giant blurry banner, or a mysterious attachment on every message you send. The difference is almost entirely in the preparation.

Step 1: Prepare the image

Choose the right format

Use PNG if your logo has a transparent background or sharp edges and text; it stays crisp and blends into both light and dark email backgrounds. Use JPG only for logos that are essentially photographs. Avoid SVG: many clients, Outlook especially, refuse to render it.

Size it for real screens

Aim for a display size of roughly 120 to 200 pixels wide and no more than 60 to 80 pixels tall. Because modern phones and laptops have high-density displays, export the actual file at twice those dimensions, say 300 to 400 pixels wide, then set the smaller size in the HTML. This keeps the logo sharp without letting it balloon on screen.

Keep the file small

A signature logo should be well under 50 KB, ideally around 10 to 20 KB. Large files load slowly, get flagged by some spam filters, and add weight to every single email in a thread. Compress the image before you use it.

Step 2: Host the image somewhere permanent

This is the step people skip, and it is why logos break. When you drag an image straight into your signature, most clients either attach it to every email or embed it in a way other clients cannot read. Instead, the image needs to live at a stable public web address.

Upload the file to your website, a cloud storage bucket, or a content delivery network, and confirm you can open the direct URL in a browser. That URL must stay live permanently. If the image ever moves or the link dies, every signature you have ever sent shows a broken icon. Avoid links that expire or require a login.

Step 3: Add it to your signature

In the signature's HTML, reference the hosted image with an img tag that includes three things: explicit width and height, so clients reserve the right space; descriptive alt text such as your company name, so the signature still makes sense when images are blocked; and, usually, a link wrapping the image that points to your website.

Explicit width and height matter more than you would expect. Without them, Outlook may display the image at its full exported size, which, if you followed the retina advice above, is twice as big as you intended.

Step 4: Test before you rely on it

Send the signature to yourself and open it in the clients your recipients actually use, at minimum Outlook, Gmail, and Apple Mail, on both desktop and phone. Check that the logo appears at the right size, that it links correctly, and that nothing shows up as an attachment.

Common problems and fixes

• A red X or broken-image icon: the hosted URL is wrong, private, or dead. Open the link in a private browser window to confirm it loads for everyone.
• The logo appears as an attachment: the image was embedded rather than linked. Host it at a public URL and reference that instead.
• The logo is enormous: you set the display size in a design tool but the HTML has no width and height, so the client uses the file's native dimensions. Add explicit values.
• It looks blurry: you are displaying a small file scaled up. Export at twice the display size.
• It vanishes on a dark background: a logo with a solid white or black background clashes in dark mode. Use a transparent PNG, or a version that reads on any color.

The shortcut

All of this, correct sizing, reliable hosting, clean HTML, and cross-client testing, is exactly the tedious part a signature generator handles for you. Sigmint hosts your logo, sizes it for high-resolution screens, and shows you a live preview in Outlook, Gmail, and Apple Mail before you paste anything in, so a broken logo never reaches a client. If you would rather understand the whole picture first, our professional email signature checklist walks through every element.