Where to paste it

Copy the signature first, then follow the steps for your mail client.

Apple Mail

Use “Copy signature” for this app: it pastes the formatted signature.

Apple Mail pastes rich content faithfully once one checkbox is off. The signature box may show no images until you compose a message; that is normal.

  1. Open Mail, then Settings (Preferences on older macOS), then Signatures.
  2. Select your account in the left column — not All Signatures — and click + to add a signature. Give it a name.
  3. Untick “Always match my default message font”, then paste with Cmd+V.
  4. Under Choose Signature at the bottom, pick it for that account.
  5. Compose a new message to yourself to see it in place, images included.
Gmail

Use “Copy signature” for this app: it pastes the formatted signature.

Gmail keeps inline styles and drops everything else, which is exactly what this signature is made of.

  1. In Gmail on the web, open Settings with the gear icon, then See all settings.
  2. On the General tab, scroll to Signature and choose Create new. Give it a name.
  3. Click into the editing box and paste with Ctrl+V (Cmd+V on a Mac).
  4. Under Signature defaults, pick it for new emails and for replies and forwards.
  5. Scroll to the bottom and choose Save Changes, then send yourself a test message.
kMail (Infomaniak)

Use “Copy HTML” for this app: it takes the markup itself.

kMail’s signature editor has an HTML source mode; paste the markup there. Pasting the formatted signature into the normal editor works too, but keeps less of the layout.

  1. Open Mail at ksuite.infomaniak.com/mail, then the Settings icon at the top right.
  2. Choose the email address in the left menu, then Signatures, then Add. Give it a name.
  3. Switch the editor to HTML source code and paste the markup, then save.
  4. In the signature settings, set it as the default for new messages and for replies and forwards.
  5. The Infomaniak Mail apps on iOS and Android use the same signature. Send yourself a test message.
Outlook (desktop)

Use “Copy signature” for this app: it pastes the formatted signature.

Outlook classic draws messages with Word’s layout engine. The paste works; if the layout shifts, the .htm file route in step 4 is the faithful one.

  1. Go to File, then Options, then Mail, then Signatures. (From a new message: Message, Signature, Signatures.)
  2. Choose New, name the signature, and paste into the Edit signature box with Ctrl+V.
  3. Under Choose default signature, pick it for New messages and for Replies/forwards, then OK.
  4. If the result looks off: use “Download .htm” instead, open the file in a browser, select all, copy, and paste that into the same box.
  5. Send yourself a test message and read it in Outlook classic itself — it is the one client that renders this differently.
Outlook.com (web)

Use “Copy signature” for this app: it pastes the formatted signature.

Outlook.com, new Outlook for Windows and Outlook for Mac share one editor, so the same steps serve all three.

  1. Open Settings with the gear icon, then Accounts, then Signatures. (Outlook for Mac: the Outlook menu, Settings, Signatures.)
  2. Choose New signature and give it a name.
  3. Click into the editing box and paste with Ctrl+V (Cmd+V on a Mac).
  4. Tick it for new messages and for replies and forwards, then Save.
  5. Send yourself a test message and open it on a phone as well as a desktop.
Thunderbird

Use “Copy HTML” for this app: it takes the markup itself.

Thunderbird takes the HTML itself, and it blocks remote images by default until a reader allows them — the Thunderbird preview tab shows exactly that.

  1. Open Account Settings — from the menu, or right-click the account in the folder list.
  2. Select the account. Under Signature text, tick Use HTML.
  3. Paste the markup into the signature box.
  4. Or: use “Download .htm”, tick “Attach the signature from a file instead”, and choose that file.
  5. Close the settings; new messages from that account carry the signature. Send yourself a test and allow remote content to see the images.

Why are my images missing?

Your photo, logo and banner are not inside the message. The signature carries their addresses, and each reader’s mail client decides whether to fetch them. These are the reasons it may not, and what to do so the signature still works when it does not.

  • Outlook on Windows blocks remote images by default

    Outlook classic shows a bar offering to download pictures, message by message, and many people never click it. Corporate Outlook is often set to never download them at all.

  • Company mail servers strip or rewrite them

    Exchange transport rules, mail gateways and security scanners can remove remote images, replace their addresses with a checked link, or block hosts they do not know. The sender sees the signature; the reader sees the gap.

  • Gmail fetches them through its own proxy

    Gmail copies the image through Google’s servers the first time a message is opened. The address has to be public and https; the first load can lag a moment, and a host that refuses Google’s fetcher shows nothing.

  • Thunderbird and kMail block them until the reader allows it

    Both treat remote content as a privacy decision: a bar asks whether to load it, per sender or per message. Until then every image is a labelled placeholder.

  • Dark mode swallows a dark logo on a transparent background

    No client inverts images. A dark mark saved on a transparent background disappears against the dark canvas — in Gmail, Outlook.com, Apple Mail, Thunderbird and kMail alike.

What to do

  • Keep the signature legible without any image: name, role and contact details as text, never as a picture.
  • Always set the alt text. The description is what a blocked image shows, and it is what the reader gets.
  • Never put essential information — a phone number, a web address — only inside an image.
  • Prefer https addresses on a reliable host you control, and keep them live for as long as the mails exist.
  • Give a dark logo its own light background, or use a version light enough to survive a dark canvas.

The Thunderbird tab above the preview shows exactly this: every image blocked, every placeholder labelled, and whether the signature still says who you are.

What to feed each slot

  • Photo

    Rendered 40–200px wide, set by the Design panel's slider. A square JPG or PNG of 200–400px a side covers every size crisply on a retina screen; crop it square before switching rounding on, or the circle comes out an oval.

  • Company logo

    Rendered small — up to about 120×20px beside the company line, or up to 160px wide with the explicit width control. A transparent PNG with 120–200px of height in the source keeps the edges clean at any of those sizes.

  • Banner

    Rendered at the signature's own width — 480 to 720px, per the width control — with the height following the image. A JPG or PNG at twice that width, 1200–1440px, stays sharp on a modern screen; keep it clearly wider than tall, or it reads as a poster.

  • Icons

    The contact-line and social icons are ours, served from subsigno.com. Nothing to prepare, nothing to host.

Every slot takes a public https address — a link any reader's mail client can fetch, never a file on your machine. Keep each image under about 200 KB: it travels with every message you send. The finder under Business can pull candidates straight from your own website.

Why does my signature look different in every mail client?

Because a mail client is not a browser. Each one decides for itself what of your formatting to keep, and the differences below are the ones that actually change what your reader sees.

The font is not the one I chose

Mail clients cannot download fonts. Gmail removes the tags that would deliver one, and Outlook on Windows ignores the instruction outright — so a downloaded font would look right to you and fall back to Times New Roman for most of the people reading your mail.

That is why the font list here is short: every option is a font already installed on the machines your readers use. Outlook on Windows is stricter still — it takes the first font name it recognises and substitutes Times New Roman for anything it does not, rather than working down the list the way a browser does. Nothing on this site will offer you a font that behaves differently for you than for your reader.

My round photo arrives square

Outlook classic on Windows draws messages with Microsoft Word's layout engine, and Word has no concept of a rounded corner. The image arrives square for every one of those readers, and no markup changes that.

“Outlook” is really several different programs. Outlook.com in a browser, new Outlook for Windows and Outlook for Mac all render with a browser engine and round the image correctly; only Outlook classic on Windows does not. The preview has a tab for each, so you can see both outcomes rather than guessing.

Rounding also only produces a circle if the picture is square to begin with. A rectangular photo rounds to an oval, and the editor says so rather than cropping it — cropping needs an instruction the Word engine ignores while still obeying the size, which stretches the image instead.

My images do not show at all

Your logo and photo are not inside the message. The address is, and each reader's mail client fetches the picture from wherever you pointed it — so the address has to stay reachable, publicly and over https, for as long as those mails exist.

Thunderbird blocks remote images by default and offers a bar to load them, per sender. kMail lets each person choose. Gmail fetches them through its own proxy. So a signature whose meaning depends on a picture is a signature a good share of your readers never see — which is why every image here carries alt text and a reserved size, and why nothing about your name or contact details is drawn as a picture.

Why this happens, and what to do — the images guide

Dark mode changes my colours

Every client that has a dark mode rewrites message colours, and each does it differently. Gmail darkens light backgrounds and lifts dark text. Outlook.com repairs contrast rather than inverting: it keeps a colour that already reads and rewrites one that would not. Apple Mail only flips what it considers plain — near-black text on near-white — and leaves anything it reads as a brand colour alone. Thunderbird can adapt a message from a toggle. kMail darkens it on a near-black canvas.

None of them touch images. That is the trap worth knowing: a dark logo saved on a transparent background disappears against a dark canvas, in every one of them. A logo with its own light background, or one light enough to survive, avoids it. Use the dark toggle above the preview to check yours.

The width is not what I set

The width control is a cap, not a fixed size. The signature shrinks to fit a narrow phone rather than forcing a sideways scroll, which is what a fixed width would do.

Outlook classic on Windows ignores the cap and sizes the signature to its content instead. What it does honour is the width of the banner and the disclaimer, so those two — the blocks that would otherwise run the full width of a reading pane — are held to your number there too. kMail's apps go further and zoom a message down to fit the screen; a signature already narrow enough is left alone.

So what should I do about all this?

Send yourself a test message before you roll a signature out, and read it in the client your colleagues actually use. The preview here is a careful model of documented behaviour, not the client itself, and it says so.

Beyond that: keep it short, keep the meaning in the text rather than in a picture, and pick a font and a colour that survive being rewritten. A signature that reads plainly when every image is blocked and every colour is adjusted is a signature that works everywhere.

How do I add a button?

There is no button builder in the editor, and that is deliberate — but a button in an email is a simpler thing than it looks, and there are two honest ways to make one.

As an image (recommended)

  1. Design the button as a picture — a rectangle with your wording on it — about 1200 pixels wide so it stays sharp on a modern screen.
  2. Upload it somewhere public that serves https, and copy its address.
  3. Paste the address into Banner image URL under Extras, put where it should lead into Banner links to, and describe it in Banner description for anyone whose images are blocked.
  4. This is a real, clickable button in every mail client, because it is only an image with a link on it — the oldest trick in email, and the one nothing breaks.

As a coloured table cell

  1. The alternative is a one-cell table with a background colour, some padding and a link inside it. It stays crisp at any zoom, it costs no image, and it still shows when images are blocked.
  2. It has to be a padded table cell, not a padded link: Outlook ignores padding on a link and you get a bare line of text.
  3. This is exactly how the Banner CTA layout draws its button — pick that layout and fill in the button text and link, and you have one without writing anything.
  4. If you are pasting your own markup into a signature box, the shape below is the one to copy.

For the image route, Canva, Figma and Photopea all have free tiers that do this in a couple of minutes; GIMP does it offline. Any of them will export a PNG.

The markup a button needs
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#2fbfa0" style="padding:12px 24px;border-radius:2px">
      <a href="https://example.com/book"
         style="font-family:Arial,Helvetica,sans-serif;font-size:14px;
                font-weight:bold;color:#ffffff;text-decoration:none">Book a call</a>
    </td>
  </tr>
</table>

Editor