Crypto logos in emails: what actually renders

A weekly market recap with Bitcoin, Ether and Solana logos looks perfect in your browser preview. In a subscriber's Gmail inbox the logos are missing. In classic Outlook on Windows they're missing too, or they show up at the wrong size. On a phone in dark mode, the dark ones have vanished into the background.

Email is not the web. Each client renders HTML its own way, and many support far less than a browser. Logos that reliably appear take a narrower approach: PNG files, explicit dimensions, backgrounds you control, and alt text that still makes sense when images are off.

Why SVG doesn't work in email

SVG works in some clients and fails in major ones. Apple Mail renders it. Gmail does not display SVG images, whether inline or referenced from an <img> tag. Classic Outlook for Windows renders email with an engine based on Word, which doesn't support SVG either.

Since you can't choose which client each reader uses, a single SVG logo means a broken newsletter for a large share of them. Support does change over time, and email developers maintain public databases of what each client supports; check one of those before testing SVG in email again. For now, use PNG.

The same reasoning rules out a few other techniques: CSS background images (unreliable in several clients), data: URIs (blocked or stripped by some clients) and icon fonts. A plain <img> pointing at a PNG on an HTTPS server is the dependable baseline.

PNG at 2x, with width and height attributes

Most phones and many laptops have high-density screens, so a logo displayed at 32 by 32 CSS pixels needs a 64 by 64 px file to look sharp. Export at exactly twice the display size, then tell the client the display size in the HTML:

<img
  src="https://mail-assets.example.com/logos/eth-64.png"
  width="32"
  height="32"
  alt="Ether"
  style="display:block; width:32px; height:32px; border:0; outline:none;"
>

Each part has a job:

• The width and height attributes set the display size in clients that ignore CSS on images. Classic Outlook for Windows is the important one: without the attributes, it may display the image at its full pixel size, so your 64 px file shows at 64 px and breaks the layout.
• The inline width and height styles do the same for clients that read CSS, and keep the logo from stretching on mobile layouts that scale images.
• display:block removes the small gap that appears under inline images in table cells, the common layout tool in email.
• border:0 prevents a border when the image is inside a link, which some older clients add.
• An absolute HTTPS URL. Relative paths don't work in email, and many clients block or warn about plain HTTP.

Keep each file small. A 64 px PNG logo is typically a few kilobytes; there's no reason for one to be 200 KB. The SVG to PNG guide covers exporting at exact pixel sizes and checking the edges.

Dark mode changes your colors

Many email apps have a dark mode, and they don't all handle it the same way. Roughly, clients fall into three groups:

Which client does what varies by platform and changes with updates, so test on the clients your readers actually use.

Images are rarely recolored, and that causes the problem. A transparent PNG of a black logo looks fine on your white email. When the client darkens the background behind it, the black logo sits on dark gray and disappears. The same happens with any logo that relies on dark parts against a light page.

Three fixes, from most to least dependable:

Give the logo its own background. Export the PNG with a light circle or tile baked in, so the logo carries its own backdrop wherever it ends up. Clients that darken the email background usually leave the pixels inside the image alone. A logo style that sits on a colored tile, or a dark mark placed on a light circle, works in every mode. The light tiles guide covers when a logo needs one.

Add a thin light outline. A 1 to 2 px light stroke or soft glow around a dark mark, baked into the PNG, keeps its edge visible on dark backgrounds and is barely noticeable on light ones.

Swap images with a media query. Some clients, including Apple Mail, support @media (prefers-color-scheme: dark):

<style>
  .logo-on-dark { display: none; }
  @media (prefers-color-scheme: dark) {
    .logo-on-light { display: none; }
    .logo-on-dark { display: block; }
  }
</style>

Clients that don't support the media query show the light version. Some, notably classic Outlook for Windows, may ignore the hiding rule and show both images. That's why a single image that works on both backgrounds is usually the safer choice, with the swap kept for special cases.

Alt text for when images are off

Some readers see no images at all: clients that block remote images by default, corporate mail filters, people who turned images off to save data or avoid tracking. They see your alt text instead, so write it as part of the message.

• A logo beside visible text that names the asset, such as a market table row that starts with "Bitcoin (BTC)", gets alt="". The text already says it, and repeating it makes screen readers announce it twice.
• A logo that stands alone, such as "Now live on" followed by three chain logos, needs the names: alt="Base", alt="Arbitrum One", alt="Polygon".
• Never leave the file name as alt text. "eth-64.png" helps nobody.

The alt text for logos guide goes into more cases. In email, you can also style the alt text with inline font properties on the <img> (font family, size and color); some clients use them when the image is missing, so a blocked logo doesn't show up as tiny default serif text.

Before you send

• Logos are PNG, exported at 2x their display size, on HTTPS URLs.
• Every <img> has width and height attributes and matching inline styles.
• Dark logos have a background or outline baked in, or have been tested in dark mode.
• Alt text reads naturally when images are off, and is empty where text already names the asset.
• A test send has been checked in Gmail, Apple Mail, Outlook and at least one phone app in dark mode.