Email Signature Logo Size and Format

Email Signature Logo Size and Format: Sharp in Gmail and Outlook

A signature logo stays sharp in both Gmail and Outlook when it is a PNG exported at twice its display size, for example a 400 by 120 pixel file shown at 200 by 60, with width="200" and height="60" written into the HTML. Keep the file under 10 KB, and do not use SVG: Gmail now converts SVG images to PNG, and classic Outlook for Windows 2007 to 2016 does not show them at all (caniemail.com, tested September 16, 2026).

Google's own sizing advice for Gmail signature images is 70 to 100 pixels high by 300 to 400 pixels wide, with a stated maximum of 100 pixels high by 1,000 pixels wide. Those two facts, a 2x file and a display box no taller than 100 pixels, settle most of the decisions below. The rest of the work is knowing which client ignores which instruction, and what the logo looks like when a reader has switched to dark mode.

What each client does with a logo file

The table below is built from the raw test data behind caniemail.com, the open email-client support database maintained by Rémi Parmentier. We read each feature file directly, row by row, and took the most recent tested version for every client. Five features matter for a signature logo:

• SVG file: an SVG referenced from an ordinary img tag.
• PNG: the PNG image format.
• srcset: the HTML attribute that lets a browser pick a 1x or 2x file by itself.
• width attribute: the HTML width on the img tag, which is what makes a 2x file display at half its pixel size.
• Dark-mode query: the CSS media query prefers-color-scheme, the only standard way to swap in a different logo for dark mode.

The Gmail SVG row says "partial", and the partial matters. The caniemail file marks Gmail's September 2026 results as partial with note 2: "Partially supported. The image is rendered but rasterized in PNG." Before that, Gmail's desktop webmail failed outright in the 2020, 2023 and July 2024 tests, and the 2020 and 2023 iOS and Android results carried a different note: "Only works with non Google accounts." So a quick glance that reads Gmail's row as "SVG works now" misses the point. Gmail shows something, but it is a PNG that Gmail made from your SVG. The caniemail page does not say at what resolution Gmail draws that PNG, so the one property you wanted from SVG, perfect sharpness at any pixel density, is not something you can count on there.

The width attribute is buggy only in Outlook for Windows, and the bug is specific. For every Outlook for Windows version from 2007 to 2019, caniemail records two notes: percentage widths on img are calculated from the physical file's width rather than the parent element's width, and "sizes set in attributes don't scale in 120 dpi mode." A fixed pixel width such as width="200" still works. What it means in practice is covered in the arithmetic section.

How old is the data? Not equally old. The SVG file was last tested on September 16, 2026, but the PNG page dates from February 6, 2020, srcset from May 29, 2019, the width attribute from September 27, 2019, and the dark-mode query from March 8, 2023. PNG support is not the kind of thing that disappears, so an old PNG test is not a worry. An old "no" in the srcset column is a weaker signal, and we treat it as "do not rely on it" rather than "proven broken today". Every feature page and its test date is listed in the sources at the end.

New Outlook for Windows, the app Microsoft now ships alongside classic Outlook, does not appear as its own row on these caniemail pages. The "Windows Mail" row is caniemail's label for a separate client, so we have not assumed it speaks for new Outlook.

Why SVG still loses in a signature

Designers reach for SVG because a logo is vector artwork, and our SVG optimization guide shows how small a clean logo file can get. On a web page that is the right call. In a signature it is the wrong one, for three separate reasons.

The two biggest audiences cannot be relied on. Gmail rasterizes. Outlook for Windows 2007 to 2016 shows nothing, and the 2019 version is the first Windows desktop release caniemail marks as supporting it. Outlook for Mac 2016 and Outlook for iOS in early 2020 also failed. A signature goes to every recipient you write to, and you do not choose their client.

The inline route is worse. You might think of pasting the SVG code straight into the HTML instead of linking a file. caniemail's separate page for embedded svg elements, last tested February 6, 2020, marks Gmail on every platform, every Outlook for Windows version, Outlook.com, Outlook for iOS and Android, and Yahoo as unsupported. For one webmail in that table, the IONOS desktop client, caniemail adds that the element "is removed along with any fallback content," so there is not even a fallback.

There is no clean fallback mechanism. On the web you would wrap an SVG in a picture element with a PNG fallback, or use srcset. The srcset column above shows how little help that is in email: no in Gmail and in every Outlook except older Mac builds.

So the format decision for a signature reduces to PNG, JPEG or GIF, and PNG wins for logos for the same reasons it wins on the web: crisp flat colour and real transparency. JPEG cannot hold transparency at all, and its compression smears the hard edges of lettering. GIF has transparency but only on or off, with no soft edges, so anti-aliased lettering gets a jagged rim against any background colour it was not prepared for. WebP and AVIF are not candidates: caniemail's WebP page, last tested February 6, 2021, records no support in Outlook for Windows and notes that Gmail "converts file to jpg." For the full trade-off between formats outside email, our image format guide covers when each one is right.

Pixel arithmetic for a 2x PNG

A high-density screen draws each CSS pixel with more than one physical pixel. A file with exactly as many pixels as its display box looks soft on such a screen, because the client has to stretch it. Supplying twice the pixels in each direction gives the screen enough detail. Our DPI and PPI guide explains why pixel density, not the DPI number stored in the file, is what decides sharpness.

The arithmetic has three steps.

1. Choose the display box in CSS pixels. This is the size you want readers to see. Google's Gmail troubleshooting page recommends 70 to 100 pixels high by 300 to 400 pixels wide for signature images, so a wide wordmark logo fits a box such as 300 by 90, and a compact mark fits something like 200 by 60.
2. Work out the height from the logo's aspect ratio. Display height = display width / (logo width / logo height). A logo whose artwork is 10 units wide for every 3 units tall, an aspect ratio of 3.33, gives 200 / 3.33 = 60 pixels high at a 200 pixel width.
3. Double both numbers for the file. File width = display width x 2, file height = display height x 2. The 200 by 60 box becomes a 400 by 120 pixel PNG.

Then write the display size, not the file size, into the img tag: width="200" height="60". That instruction is what turns 400 file pixels into 200 displayed ones.

Here are the numbers for common display widths, all for a 10:3 logo:

The last column is our comparison of the display height with Google's recommendation. Google gives that range as advice, not a rule, and a small compact logo at 60 pixels high is common and works.

Three checks on the numbers

Keep the display numbers whole and the file numbers even. If the display box has fractional pixels, say 200 by 59.4, round the display height first and then double it, so the file is exactly twice the display size. A file that is 2.03 times the display size has to be resampled by the client, and resampling is where hairlines go soft.

Do not let the tool resize it. Gmail's signature editor offers Small, Medium, Large and Original size options after upload, and Outlook's classic editor lets you resize through Picture, then Size. Either route can change what width ends up in the HTML. After you insert the image, send yourself a test message and inspect the image in the received copy: in a desktop browser, right-click the logo and inspect the element to read the width and height it actually carries.

Read Google's maximum carefully. Google states "the maximum size for email signature images is 100 pixels high by 1000 pixels wide." The page does not say whether that means file pixels or displayed pixels. If it means file pixels, a 2x file capped at 100 pixels tall can only display 50 pixels tall. We could not resolve this from Google's text, so we suggest a test: upload your 2x file, and if Gmail rejects it or shrinks it, try the upload method Google lists as an alternative (web address, My Drive or upload from the device), and check the result in a received message.

Why 2x and not 3x

Some phone screens are denser than 2x, so a 3x file would be sharper still on them. The cost is weight. In our measurements below, the 3x version of the same logo was 36% larger than the 2x version once both were reduced to 256 colours (7,630 bytes against 5,622). On a logo with flat colour and simple shapes, the difference between 2x and 3x on a phone is hard to see at signature size; the difference between 1x and 2x is easy to see on a laptop. We use 2x as the default and treat 3x as an option for logos with very fine detail, such as thin script lettering.

The Outlook 120 dpi note

caniemail's note that attribute sizes "don't scale in 120 dpi mode" in Outlook for Windows refers to Windows display scaling. 120 dpi corresponds to the 125% scaling setting, since Windows treats 96 dpi as 100%. The note says the width you set in the attribute is not scaled up with everything else, so on a machine at 125% the text around your logo grows while the logo may not. The logo stays sharp, because it is a 2x file being shown smaller, but it may look a little small next to the text. If your recipients are mostly on Windows laptops with scaling switched on, test at 125% and consider a slightly larger display box.

Outlook for Windows also ignores CSS width on img elements: caniemail's CSS width page records it as "not supported on body, span, div, p or img elements" in every version from 2007 to 2019. Setting the size with style="width: 200px" alone would leave classic Outlook with only the file's own pixel dimensions to go on, and a 400 pixel file would show at 400 pixels. Use the HTML width and height attributes, and add the CSS width as well only if another part of your template needs it.

How many kilobytes a signature logo should weigh

A signature logo is copied into every message you send, and into every reply that quotes your earlier messages. Weight adds up, and Gmail adds a hard limit on top: "You can put up to 10,000 characters in your signature," and Google's tip directly below says "your image also counts toward the character limit. If you get an error, try to resize the image."

To see what the export settings do, we built a test logo: a blue circle with an orange triangle, a dark wordmark and a blue tagline in Arial Bold, on a transparent background. We rendered it at four times the target size and scaled it down, the way an export from vector artwork works, then saved it with Pillow 13.0 on October 30, 2026 in each format below. Every PNG was saved with Pillow's extra-compression setting switched on. Byte counts are exact.

What the measurements show:

Palette reduction is the single biggest saving. Moving the 2x logo from full 32-bit colour to a 256-colour palette cut it from 19,931 to 5,622 bytes, a 72% reduction, and viewed side by side at 200% zoom on white we could not tell the two apart. A logo has a handful of real colours plus the soft edge pixels between them, and 256 entries hold all of those comfortably.

Going below 256 colours starts to show. The 16-colour version saved another 2,020 bytes, but it left a visible light fringe around the orange triangle where the palette ran out of in-between shades. 64 colours looked clean on our logo. A logo with gradients or a photo element needs more colours than ours did, so check yours at 200% zoom before you accept a smaller palette.

JPEG is not smaller here. Flattened onto white at quality 85, the 2x JPEG was 9,460 bytes, larger than the 256-colour PNG, and it has lost its transparency, so it shows a white rectangle on any coloured or dark background.

Doubling the size does not double the bytes. The 2x palette PNG has four times the pixels of the 1x one but weighed 1.7 times as much (5,622 against 3,251), because flat areas compress well whatever their size.

A budget you can apply

From those numbers, our working budget for a signature logo is:

• Target: 2x PNG, 256-colour palette, under 8 KB. Our 2x test logo landed at 5.6 KB.
• Acceptable ceiling: 10 KB per image. Above that, reduce colours, simplify the artwork for small use, or reconsider the display size.
• Social icons and a logo together: keep the whole signature under about 20 KB of images. Every icon is a separate image and a separate request.

This is our recommendation, not a published limit from Google or Microsoft. Neither company states a byte limit for signature images on the pages we read.

The 10,000-character arithmetic

Google does not say how an image is counted against the 10,000 characters. One plausible case is worth working through, because it explains the error some people see: if an image were stored inside the signature as a base64 data URI, every 3 bytes of file become 4 characters of text. Then:

• Our 2x, 256-colour logo: 5,622 bytes x 4 / 3 = 7,496 characters, leaving 2,504 characters for your name, title, phone number, links and all the HTML formatting.
• The same logo in full 32-bit colour: 19,931 bytes x 4 / 3, about 26,575 characters, well over the limit on its own.
• The largest file that could fit at all, with nothing else in the signature: 10,000 x 3 / 4 = 7,500 bytes.

We are not claiming Gmail stores images this way. A hosted image referenced by URL costs only the length of the URL plus the img tag. But the arithmetic shows why a 20 KB file can trigger the error while a 6 KB one does not, under the worst case. And note a separate fact from caniemail's base64 page, last tested February 6, 2020: Gmail does not display base64 images in received mail, on any platform tested. So pasting a data URI into a signature is a bad idea anyway, whatever the editor accepts.

Dark mode: one file has to work on both backgrounds

The last column of the support table decides your dark-mode strategy. Gmail does not support the prefers-color-scheme query on any platform caniemail tested in December 2022, and neither does Outlook for Windows, Windows Mail or Yahoo. Apple Mail, Outlook for Mac, Outlook.com and the Outlook mobile apps do. A newer test of the color-scheme meta tag, dated September 16, 2026, found Gmail's iOS and Android apps only partly supporting it, and only for the value "light only."

The consequence is that in Gmail and classic Outlook you cannot swap in a light version of your logo for dark-mode readers. Whatever single file you send has to survive whatever background a dark-mode reader ends up with behind it. Our dark mode design guide covers the wider colour decisions; for a signature logo the question is narrow: does the file still read on dark grey?

We tested our logo on #202124, a dark grey of the kind dark interfaces use, and calculated the WCAG contrast ratios:

A transparent PNG with a near-black wordmark disappears on a dark background. The circle survives because blue is mid-toned, but the company name, the part that matters, is gone.

WCAG itself does not require contrast for logos: the 2.2 Recommendation states that "text that is part of a logo or brand name has no contrast requirement." That exemption is about conformance, not about whether a reader can see your name. Our APCA versus WCAG contrast guide explains how those ratios are calculated.

Four ways to build a file that survives

The plate is the most dependable option, and our measurement surprised us: the plated 2x logo was 4,893 bytes at 256 colours against 5,622 without the plate, because a solid background removes the soft alpha edges that take the most palette entries. A rounded corner keeps it from looking like a pasted rectangle on light mail. If your brand guide already defines a "full colour on dark" version, a plate is not the only answer, but you still cannot rely on swapping files in Gmail, so the plate route is the one that works everywhere.

Setting it up in Gmail and in Outlook

The format and size are the same for both, but the editors differ, and each has a quirk worth knowing.

Gmail

Google lists three ways to add a signature image: "Web Address (URL)," for an image publicly available on the web; "My Drive," for a public image in your Google Drive; and "Upload," from your device. If one method fails, Google suggests trying the other two.

• For Drive images, the sharing setting must be public. Google's troubleshooting page says the image's sharing must be set to "anyone with the link," and that if the Drive file is deleted, the image disappears from the signature.
• Work and school accounts may be limited to URLs. Google notes that some administrators allow only images from a URL, and that only an administrator can change the Drive sharing rules.
• Size after upload. Select the image in the editor and choose Small, Medium, Large or Original size. Then check the received HTML, as above.

Outlook

Microsoft's help page covers new Outlook for Windows, classic Outlook for Windows, Outlook on the web and Outlook.com, with Outlook for Mac on a separate page.

• Classic Outlook for Windows: open a new message, choose Signature, then Signatures, select the signature, use the Image button to insert the file, and resize through right-click, Picture, then the Size tab with "Lock aspect ratio" checked.
• Avoid VML in a pasted signature. Microsoft warns that "using Vector Markup Language (VML) tags in the signature can cause some elements to appear as attachments instead of inline images." A signature built in another tool and pasted in can carry VML; inserting the image with Outlook's own Image button is Microsoft's recommended route.
• Create it twice if you use both apps. Microsoft notes that with a Microsoft account, if you use Outlook and Outlook on the web, "you need to create a signature in both products."

Hosting the file yourself

If you reference the logo by URL, host it on HTTPS at an address that will never change, such as a dedicated path on the company domain. Renaming or moving the file breaks the logo in every message already sent, because those messages point to the old address. Keep the file name boring and permanent: logo-email-2x.png is better than logo-final-v3.png.

Fixing a blurry, giant or missing logo

Most signature logo complaints fall into a few patterns. This table maps the symptom to its usual cause in the data above.

One more habit helps. Give the image short alt text, normally the company name, so that a reader who has images turned off still sees who wrote.

Writing the signature spec into the brand guide

The numbers you settle on here are worth recording once, so the next person does not repeat the work. A short block in the brand guide is enough:

• Display box: 200 x 60 CSS pixels (or your own).
• File: 400 x 120 PNG, 256-colour palette, light plate included, under 8 KB.
• HTML: width="200" height="60", alt text set to the company name.
• Hosted at: one permanent HTTPS URL.
• Last tested: the date and the clients you checked.

A signature is one of the few places where the logo appears thousands of times a week, in clients the brand team does not control, at a size smaller than most of the brand's other uses. The logo section of a brand style guide is where minimum sizes and dark-background versions are already defined, so the signature spec belongs next to them. The same pixel-doubling logic, applied to icons that browsers and phones show at several sizes, is worked through in our favicon sizes and formats guide, which is the natural next file to get right once the signature is done.

Signature logo questions

What size should an email signature logo be?

Pick a display box within Google's recommended 70 to 100 pixels high and 300 to 400 pixels wide, or a smaller compact box such as 200 by 60, then export the PNG at twice those numbers. A 300 by 90 display box needs a 600 by 180 pixel file.

Can I use an SVG logo in my email signature?

It is not a good idea. caniemail's September 2026 test shows Gmail rasterizing SVG images to PNG, and Outlook for Windows 2007 to 2016 not showing them at all. A 2x PNG displays in every client in the support table.

Why is my signature logo blurry in Outlook but not in Gmail, or the other way round?

The usual causes differ by client. In Gmail, an SVG source gets rasterized. In Outlook for Windows, a size set only with CSS is ignored, so the file can show at its full pixel size or get resized by the editor. Check that the file is a 2x PNG and that the img tag carries width and height attributes.

PNG or JPEG for an email signature logo?

PNG. In our test the 2x logo saved as a 256-colour PNG was 5,622 bytes and kept its transparency; the same logo as a quality-85 JPEG was 9,460 bytes and had a white box behind it.

How do I make my signature logo work in dark mode?

You cannot swap logos in Gmail or classic Outlook, because neither supports the dark-mode media query. Bake a light rounded plate into the PNG behind the logo, or use a single mid-tone version of the logo that reads on both light and dark backgrounds.

Does a signature image count against Gmail's 10,000-character limit?

Yes. Google's help page says the image counts toward the limit and suggests resizing it if you get an error. A small palette PNG, or an image referenced by URL, keeps you well under.

Test data and help pages behind this guide

caniemail.com feature pages (raw data read from the project's public GitHub repository and checked against the live pages on October 30, 2026; each line gives the page's own "last tested" date):

• SVG image format, last tested September 16, 2026.
• PNG image format, last tested February 6, 2020.
• srcset and sizes attributes, last tested May 29, 2019.
• width attribute, last tested September 27, 2019.
• width property (CSS), last tested September 27, 2019.
• @media (prefers-color-scheme), last tested March 8, 2023.
• color-scheme meta tag, last tested September 16, 2026.
• Embedded svg element, last tested February 6, 2020.
• WebP image format, last tested February 6, 2021.
• Base 64 image format, last tested February 6, 2020.

Help pages and standards:

• Google, Create a Gmail signature, read October 30, 2026: the 10,000-character limit and the note that the image counts toward it.
• Google, Troubleshoot issues with Gmail signatures, read October 30, 2026: the 70 to 100 by 300 to 400 pixel recommendation, the 100 by 1,000 maximum, the three upload methods and Drive sharing rules.
• Microsoft, How to add and change an email signature in Outlook, read October 30, 2026: the classic Outlook image steps, the VML warning and the note about creating signatures in both products.
• W3C, Web Content Accessibility Guidelines 2.2, W3C Recommendation of December 12, 2024, read October 30, 2026: the logotype exemption from contrast requirements.

Our own work:

• The file-size table is our measurement: one test logo rendered at 4x and downscaled with Lanczos resampling, saved with Pillow 13.0 on October 30, 2026; palette versions use Pillow's fast octree quantizer. Your logo will produce different numbers, but the same pattern.
• The contrast ratios use the WCAG 2.x relative luminance formula on the colours stated.
• The display-box table, the 2x and 3x file sizes and the base64 character arithmetic are our own calculations.
• No primary source we found answers these, so we leave them open: the resolution at which Gmail rasterizes SVG, any byte limit for signature images, and how Gmail counts an image against its character limit.