Designing a logo that passes BIMI

1 June 2026 · 13 min read

Why the logo is the part people get wrong

BIMI has two halves. The first half is policy and DNS: you reach DMARC enforcement, publish a default._bimi TXT record, and (for mailbox providers that demand it) attach a Verified Mark Certificate. That half is fiddly but procedural, and most of it is covered in our fix for a BIMI logo not showing in Gmail. The second half is the artwork itself, and this is where designers, marketing teams and brand agencies repeatedly hand over a file that is technically a logo but is not a valid BIMI logo.

The trap is that the file looks fine. It opens in a browser, it renders in Figma, it passes your eye. Then a validator rejects it for an xlink:href you did not know was in the export, or a mailbox provider crops your beautifully balanced wordmark into a smudge because it was never going to be drawn at more than 40 pixels across. The constraints are narrow, specific and unforgiving, and they have almost nothing to do with whether the logo looks good on a website.

This article is about that second half: how to design and prepare a mark that survives the SVG Tiny Portable/Secure profile, reads clearly inside a tiny circular avatar, and gets past the validators that gate BIMI. It assumes you already understand what BIMI is; if you want the concept first, see the BIMI glossary entry and our BIMI product page.

Square first, because the canvas is a circle

Every rule about BIMI artwork starts from one fact: your logo will be displayed in a square viewport that mailbox providers then mask into a circle. Gmail draws it as a coloured circle next to the sender name. Apple Mail and others do similar. You are not designing a header logo on a wide rectangle; you are designing a coin.

The aspect ratio must be 1:1

The SVG must declare a square viewBox. Not "roughly square", not "square with a bit of padding baked into a wide canvas". Exactly square.

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2" baseProfile="tiny-ps"
     viewBox="0 0 400 400">
  <title>Acme</title>
  <!-- artwork -->
</svg>

A viewBox of 0 0 400 400 is square. A viewBox of 0 0 600 400 is not, and most validators and providers will reject it outright or distort it. This single mistake accounts for a large share of failures, because horizontal wordmarks are the natural logo shape for most brands, and a horizontal wordmark cannot be square without rework.

What "design for a circle" actually means

The square viewBox is then masked to a circle, so the corners of your canvas are thrown away. Anything you place in the corners is invisible. Practically:

• Keep the meaningful content inside a central safe zone. Imagine a circle inscribed in your square canvas, then pull in another 5 to 10 percent. That inner region is what recipients reliably see.
• Give the mark a background fill. Because the circle is masked from a square, a transparent background leaves the provider to fill the corners with their own colour, which is usually a flat grey that clashes. Almost every strong BIMI logo uses a solid background fill (often a brand colour or white) so the coin looks deliberate rather than cut out.
• Centre optically, not just mathematically. A glyph with more visual weight on one side needs nudging so it sits centred once circular masking removes the corners.

Horizontal logos do not work, and that is the point

If your primary brand asset is a horizontal lockup (icon plus wordmark in a row), it will not survive. You have two honest options:

1. Use the brand icon or monogram on its own. This is what most recognisable BIMI logos are: the standalone symbol, centred, on a brand-colour disc. Think of the marks you already recognise as a single letter or glyph in a circle.
2. Stack a very short wordmark. A one or two character monogram can work. A full word almost never does, because at 40 pixels the letters collapse into noise.

Decide this before you touch the SVG. No amount of file-format compliance rescues a logo that is illegible at avatar size.

The SVG Tiny PS profile, in practice

BIMI does not accept arbitrary SVG. It requires a specific, locked-down profile: SVG Tiny 1.2, Portable/Secure, usually written tiny-ps. The "Portable/Secure" part exists because an email avatar is rendered inside a security-sensitive context, so the profile strips out everything that could carry a script, an external reference or animation. Our SVG Tiny PS glossary entry covers the lineage; here is what it forces you to do.

The required document shell

Two attributes on the root <svg> are mandatory and frequently missing:

• baseProfile="tiny-ps"
• version="1.2"

And the document must contain exactly one <title> element as a direct child of the root, giving the logo a human-readable name:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.2" baseProfile="tiny-ps"
     viewBox="0 0 400 400">
  <title>Acme</title>
  <rect width="400" height="400" fill="#0B3D91"/>
  <path d="M120 280 L200 110 L280 280 Z" fill="#FFFFFF"/>
</svg>

If baseProfile, version or <title> is absent, validators reject the file before they even look at the artwork. Design tools do not add these by default, so they are almost always a manual edit.

What you must remove

The profile forbids a long list of things that ordinary SVG exporters happily include. The most common offenders:

• <script> of any kind. Always disallowed. Editors rarely add this, but "interactive" export modes sometimes do.
• External references. No <image> pointing at a raster file, no xlink:href or href loading anything external, no external fonts. The logo must be fully self-contained vector geometry.
• Raster images embedded as data URIs. A PNG base64-encoded inside the SVG is still a raster image and is rejected. The whole point is that the mark is resolution-independent vector paths.
• Animation. No <animate>, <animateTransform>, <set> or SMIL. A logo that pulses on your website must be flattened to a still frame.
• Filters and many advanced effects. No <filter>, no blur, no drop shadows produced by filter primitives. If your brand mark relies on a soft shadow, you must redraw it as solid shapes or drop the effect.
• Comments and editor metadata. Strictly, the profile wants a clean document. In practice the bigger problem is bloat: Illustrator and Sketch inject huge blocks of editor-specific metadata, <flowRoot> elements, unused <defs> and namespaced junk that either trips validators or balloons the file.

Text must usually become outlines

Live <text> depends on a font being available, and external fonts are not allowed. The dependable approach is to convert all text to outlines (paths) before export. A converted glyph is just a <path> and renders identically everywhere. If you keep live text, you are betting on the renderer having a matching system font, which is not a bet worth making for a logo.

File size and a single root group

Keep the file small. There is a practical ceiling (commonly cited around 32 KB) and, just as importantly, mailbox providers fetch this file over HTTPS on render, so a lean file is a faster, more reliable render. After exporting:

• Run it through an SVG optimiser to strip metadata, collapse transforms and round path coordinates.
• Confirm one clean root structure rather than nested editor groups.
• Re-add the baseProfile, version and <title> if the optimiser dropped them, then validate again.

You can check a finished file against the profile with our BIMI logo validator, and if you are starting from a PNG or a non-compliant SVG, the BIMI SVG converter will get you most of the way to a Tiny PS file before you hand-finish it.

Colour and clarity at the size that matters

A BIMI logo is rendered small. In a Gmail inbox row the avatar is on the order of a few dozen pixels. Whatever subtlety you love in the full-size logo is gone. Design for the worst case.

Use solid, flat colour

Tiny PS leans heavily towards flat fills, and small rendering punishes anything else:

• Avoid gradients where you can. Some gradients are technically permitted, but a smooth gradient at 32 pixels reads as a flat muddy colour anyway, and gradients are a frequent source of validator and rendering quirks across providers. A two-tone flat design is more robust and usually looks sharper.
• No gradient meshes, no blends, no transparency tricks. Flatten everything to solid shapes. If two shapes overlap with transparency to create a third colour, draw that third colour explicitly.
• Specify colours as plain hex. Keep your palette to a few strong, high-contrast colours.

Contrast is survival

Because the mark sits on its own background disc and is shrunk hard, internal contrast decides whether anyone can tell what it is:

• Maximise figure-to-ground contrast. A mid-blue glyph on a mid-grey background vanishes. The same glyph in white on that blue background reads instantly.
• Mind the circular mask edge. If your background colour is light and the inbox UI is also light, the coin can disappear into the page. A subtle but definite background colour, or a logo that fills the disc, keeps the avatar visible.
• Drop fine detail. Thin outlines, hairline gaps, small serifs and intricate filigree all disintegrate at avatar size. Thicken strokes, widen gaps, simplify. The test is brutal and simple: shrink your design to about 40 pixels on screen and ask whether you can still recognise the brand. If not, simplify until you can.

Preview before you commit

Looking at a 400 by 400 export tells you nothing about the real experience. Render it as recipients will see it. Our BIMI simulator shows the mark inside a representative inbox avatar so you can judge clarity, masking and contrast before you publish anything. It is far cheaper to redraw at this stage than after a certificate has been issued against the file.

The most common rejection reasons

When a logo is rejected, whether by a validator, a Verified Mark Certificate issuer or a mailbox provider, it is almost always one of a short, repeating list. Work through these and you will catch the overwhelming majority of problems.

1. Not square. A non-1:1 viewBox is the single most frequent structural failure. Fix the canvas to be exactly square and re-centre the artwork.
2. Missing baseProfile="tiny-ps" or version="1.2". Exporters omit these. Add them by hand to the root element.
3. Missing or duplicated <title>. Exactly one <title> must be a direct child of <svg>. Zero fails; two fails.
4. External or embedded references. Any href/xlink:href to an external resource, any <image>, any embedded raster data URI, or any reference to an external font. The logo must be self-contained vector paths.
5. Scripts, animation or filters. Any <script>, any SMIL animation element, any <filter> or filter-based effect. Flatten to static solid shapes.
6. Live text instead of outlines. Unconverted <text> that depends on a font. Convert all text to paths.
7. Editor bloat and disallowed elements. Illustrator/Sketch metadata, <flowRoot>, stray namespaces and unused <defs>. Optimise and clean, then re-add the required attributes.
8. Transparent background with no fill. Technically valid in some toolchains but practically poor: the masked corners and the disc look wrong. Add a solid background fill.
9. File too large. Bloated coordinates and metadata push past the size ceiling. Optimise and round path data.
10. Logo does not match the trademark on the certificate. This is not an SVG rule but it bites late. The artwork in the SVG must match the registered trademark image used for the Verified Mark Certificate. A "small" post-issuance tweak to colour, proportion or spacing invalidates the match, and the provider that requires a VMC will refuse to show the logo. Freeze the artwork before certification, and never edit it afterwards without reissuing.

That last point deserves emphasis because it causes the most confusing failures. People design a compliant SVG, get a VMC issued, then a designer "tidies" the file (re-optimises, shifts a colour, adjusts padding) and republishes. The file still validates as Tiny PS, the BIMI record still resolves, but the logo silently stops appearing because it no longer matches the certified image. If you require a VMC, the SVG and the certificate are a matched pair; change one and you must change both.

A workable design-to-deploy sequence

Putting it together, here is an order that avoids expensive rework:

1. Choose the mark. Standalone icon or short monogram, never a horizontal wordmark. Decide this on paper.
2. Compose on a square canvas with a solid background fill and the design inside a circular safe zone.
3. Simplify for small sizes. Flat colours, high contrast, thick strokes, no fine detail. Sanity-check at 40 pixels.
4. Convert text to outlines and flatten effects. Remove gradients, shadows and animation.
5. Export as SVG, then optimise. Strip editor metadata and round coordinates.
6. Hand-edit the shell. Add version="1.2", baseProfile="tiny-ps" and a single <title>; confirm a square viewBox.
7. Validate. Run it through the BIMI logo validator and preview it in the BIMI simulator. Iterate until both are clean.
8. Freeze the file. If a VMC is involved, this is the version that gets certified, and it must not change afterwards.
9. Publish and verify end to end. Host the SVG over HTTPS, reference it in your BIMI record, and confirm the full chain with the BIMI checker and, where a certificate is involved, the BIMI VMC checker.

Do not skip the prerequisite

A perfect logo displays nothing if the foundation is missing. BIMI only renders when DMARC is at enforcement (p=quarantine or p=reject, applied to real traffic), and several major mailbox providers additionally require a Verified Mark Certificate before they will show any logo at all. The artwork is the visible, satisfying part, but it is the last step, not the first.

If you are not yet at enforcement, the logo work is premature. Confirm where you stand with the DMARC checker, and see our requirements overview for what each inbox provider actually demands before a logo can appear. Reaching p=reject safely, without quarantining a single legitimate message, is the real unlock, and it is exactly what our done-for-you DMARC service handles, with monitoring and change alerts so a later DNS edit does not quietly break the logo you worked so hard to prepare.

The practical takeaway

A BIMI logo is not your website logo exported to SVG. It is a purpose-built coin: square canvas, solid background, the mark centred in a circular safe zone, flat high-contrast colour, no fine detail, all text outlined, every script, animation, filter and external reference removed, and the required Tiny PS shell (version="1.2", baseProfile="tiny-ps", one <title>) added by hand. Get those right and validators stop complaining. Design for 40 pixels, not 400, and recipients can actually recognise you. Freeze the artwork before you certify it, and your logo will keep showing.

When you have a candidate file, run it through the BIMI logo validator and preview it with the BIMI simulator before you publish. If you would rather hand the whole chain, enforcement, certificate and logo, to someone else, that is what our BIMI product is for.