# Logo file formats: which to send where, and what breaks

> Choose logo files by destination, not by format name. SVG suits browsers but fails in email and some print workflows, PNG must be exported at 2x or 3x its display size, and print needs a vector PDF with outlined fonts. Icons add safe zones: Android keeps 66 of 108 dp, maskable web icons a circle of 80 per cent.

By LAIN, 27 May 2026. 12 min read. Category: Branding. Canonical: https://lainagency.com/resources/logo-file-formats-guide

Every guide says the same thing: SVG for the web, PNG for everything else, PDF for print. It is a fair start, and it fails in specific places. A vector logo swaps its font on a website. A favicon format that Google's documentation does not list. An email client that no longer draws SVG. An app icon whose corners a mask cuts off. This guide is organised by where the file goes, with numbers we measured ourselves and sources for the rest.

## Choose by destination, not by format
A format is only right for a place. Start from the place.

| Destination | Send | The condition that matters |
|---|---|---|
| Website header | SVG with text turned into outlines | Loaded through an image tag, an SVG cannot fetch fonts, so live text falls back to a default font |
| Browser tab (favicon) | An SVG plus a PNG of 48 px or more | Google's favicon page lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF, not SVG, and recommends more than 48 by 48 px |
| Email signature or newsletter | PNG at twice its display size | Gmail has never fully supported SVG, and one 2025 report says Outlook stopped rendering it |
| Printer | Vector PDF with fonts outlined or embedded | Ask whether they want PDF/X-1a or PDF/X-4 |
| Slides and documents | PNG at twice its placed size | Keep the vector for the printer |
| Profile pictures and listings | Square PNG of the mark | Google Business Profile recommends 720 by 720 px and accepts 250 by 250 as the minimum |
| App icon | The mark on a full square, no drawn corners | Every platform has its own safe zone, below |
| Embroidery, engraving, signs | One-colour vector | No gradients and no transparency effects |

The rest of the article explains the conditions in that third column.

## Four ways a vector file is not what it says
**1. Live text.** MDN states that an SVG used as an image, through an image tag or a CSS background, runs no scripts and cannot load external resources. A font file is an external resource. We tested it: the same logo with live text set in Aspekta, placed with an image tag on a page that loads Aspekta, drew the word in a serif. The inline version drew Aspekta. The outlined version is 1,309 bytes, the live-text version 197. Those 1,100 bytes buy independence from every font, and they also mean the font file never travels with the logo.

**2. A picture inside a vector wrapper.** SVG, PDF and EPS can all contain a bitmap. Illustrator's SVG export even has an option for embedding raster images. Detect it by opening the SVG in a text editor and searching for `<image`, or by zooming a PDF to 800 per cent: edges that turn to squares are pixels.

**3. No usable size.** An SVG that has a `viewBox` but no width and height has no size of its own. In Chromium, such a file in an image tag with no CSS filled its 1,280 px container (it drew at 1,280 by 670) while the browser reported a natural size of 287 by 150. The logo then jumps in size depending on where it is placed. Give the file width and height attributes, or size it in CSS.

**4. Effects that cannot be flat.** Shadows, blurs and soft gradients survive SVG but not a one-colour stamp, an embroidery machine or PDF/X-1a. SVG and PNG are also RGB in practice. The CMYK or named spot colour of the logo belongs in the print PDF, set deliberately. Printers ask for spot colours to be named, for example as Pantone numbers.

A fifth trick is popular: put a `prefers-color-scheme` rule inside the SVG so that the logo flips in dark mode. Developers report that it works inside an image tag in some browsers. A developer thread reports that Safari ignores the rule there, and a W3C issue says forced-colours mode always answers "light". Treat it as a bonus. Deliver a separate reversed file.

## Raster files: the size is part of the file
A PNG has a fixed number of pixels. Work out how many it needs from the place it will sit: pixels = millimetres divided by 25.4, times dots per inch. These are our calculations, using 300 dpi as a common print figure (printers may ask for another) and 2x and 3x screens:

| Placed at | Pixels needed |
|---|---|
| 20 mm wide, 300 dpi | 236 |
| 40 mm wide | 472 |
| 85 mm wide (a business card) | 1,004 |
| 210 mm wide (A4) | 2,480 |
| 140 CSS px header, 2x screen | 280 |
| 140 CSS px header, 3x screen | 420 |

Printers differ, so ask. A vector PDF avoids the question.

## What the files cost
We built a horizontal lockup of a mark and a word (the made-up brand "nova", word outlined from Aspekta Medium, 1.91 times wider than high) and exported it from the vector at six heights:

| Height | PNG, 24-bit | WebP, lossless | JPG, quality 90 |
|---|---|---|---|
| 32 px | 621 bytes | 376 | 1,351 |
| 128 px | 2,815 | 1,566 | 4,831 |
| 512 px | 14,023 | 5,956 | 24,008 |
| 1024 px | 32,521 | 12,568 | 61,888 |

The SVG is 1,309 bytes (636 gzipped), so it is already smaller than the PNG from about 64 px of height. The mark alone is 110 bytes. This is a geometric mark: an SVG grows with the number of path points, a PNG with its area, so a detailed crest will behave differently. WebP lossless was 2.6 times smaller than PNG at 1024 px, which MDN confirms is a good option when no SVG exists, with a PNG fallback.

## Why JPG fails logos: it stores colour at a quarter of the resolution
"Avoid JPG, it has no transparency" is true and incomplete. The harder problem is colour. A typical JPG stores brightness at full resolution but colour at a quarter of it (4:2:0 chroma subsampling), so a sharp coloured edge smears. We drew a 256 px square of a saturated red (#e4002b) on white and compressed it.

| Setting | Worst error at the edge, out of 255 | File size |
|---|---|---|
| Quality 95, 4:2:0 | 50, across 3 pixels | 4,173 bytes |
| Quality 95, 4:4:4 | 3 | 6,095 |
| Quality 75, 4:2:0 | 49 | 3,285 |
| Quality 75, 4:4:4 | 12 | 4,613 |

Raising the quality did not fix 4:2:0 in the encoder we used (Pillow), because the loss is in how colour is stored. One source reports that Photoshop switches subsampling off at its highest settings, so check your own tool. This is why a red logo on white looks fringed in a JPG while a grey one does not. PNG stores every pixel exactly.

![A square icon with a 66 of 108 safe zone drawn inside it, and a second icon with a circle covering 80 per cent of its width.](https://lainagency.com/images/blog-art/logo-file-formats-fig2.webp)

## Icons: the safe zone decides the file
Icons are masked by the system, so what you may use is the part the mask leaves.

- **Android adaptive icons.** Each layer is 108 by 108 dp. The 66 by 66 dp safe zone in the middle is never clipped by an OEM mask, and the outer 18 dp on each side is reserved for masking and effects. Google says the logo must be at least 48 dp and no more than 66 dp, which is 44 to 61 per cent of the layer width.
- **Maskable web icons.** web.dev says the important content must sit in a circle with a radius of 40 per cent of the icon width, and that the outer 10 per cent may be cropped. Do not mark one file as both "any" and "maskable": the padding makes the plain icon small.
- **iOS.** Secondary sources agree on a 1024 by 1024 px master, opaque, with square corners that the system rounds. We could not open Apple's own page, so check it before shipping.

A circle of 80 per cent of the width is easier to fit than it sounds, until the logo is wide. For a lockup with width-to-height ratio r, the largest width that fits the circle is 0.8 divided by the square root of (1 plus 1/r squared):

| Shape | Ratio | Largest width, share of the icon |
|---|---|---|
| Square mark | 1 | 56.6 per cent |
| Our nova lockup | 1.91 | 70.9 |
| A long wordmark | 3 | 75.9 |
| A very long wordmark | 4 | 77.6 |

So send the mark, not the lockup. [Verden](https://lainagency.com/works/verden) is built this way: its page describes six identical blades with straight edges only, so the mark "holds from a 16-pixel favicon to the footer", and the identity shows it on lime, as an app icon and as a favicon. [Ordin](https://lainagency.com/works/ordin) takes a monogram, the o and the d with equal bars, as its app icon and tab.

On favicons themselves, three sources do not agree. Google lists ICO among supported formats and never mentions SVG. MDN discourages ICO and says to use PNG. Caniuse shows SVG favicons in Chrome 80, Firefox 41 and Safari 26. Ship all three routes: an SVG for the browsers that take it, a PNG of 48 px or more for Google, and an ICO for the rest. lainagency.com ships the ICO and PNG routes: one ICO holding 16, 32 and 48 px, a 32 px PNG, a 192 px icon and an Apple touch icon.

## The versions, and what each protects
A format set is only useful if the versions are right.

1. **Full colour on light**, the default.
2. **Reversed**, for dark grounds and photographs. [Urbanova](https://lainagency.com/works/urbanova)'s page states the rule: the mark stands alone, cream on dark or black on light.
3. **One colour, black and white**, for anything that cannot print colour. [Montreval](https://lainagency.com/works/montreval)'s lion is described as holding as a ball marker, an embroidered crest and a sign on a wall, which are uses that usually mean one colour.
4. **Horizontal and stacked**, for wide headers and square spaces.
5. **The mark alone**, for icons and avatars.
6. **A small-size version** with looser spacing if the full mark loses detail.

## Test each file where it will live
Run these before you accept or send a package. A fail on 1 to 4 means the file is wrong, not the destination.

1. Open each SVG as text. It has a `viewBox`, no `<image`, no `<text` and no `font-family`.
2. Load it in an image tag on a page that has none of your fonts. It looks the same as the design.
3. Place every PNG on #121212 and on a photograph, zoomed to 400 per cent. No pale outline.
4. Zoom the print PDF to 800 per cent and check its fonts list. Edges stay sharp and nothing is a bitmap.
5. Email the PNG to a Gmail and an Outlook address, in light and dark mode.
6. Overlay the icon safe zones on the app icon and the maskable icon.
7. Check the pixel width of every PNG against the table above.

## Where it goes wrong
| Symptom | Cause | How to detect | Fix |
|---|---|---|---|
| The logo shows in a serif | Live text in an SVG loaded as an image | Search the file for `<text` | Outline the text |
| A pale outline on dark | Semi-transparent edge pixels were anti-aliased against a light ground | PNG on #121212 at 400 per cent | Re-export from the vector onto transparency |
| Blurry on a phone | Exported at 1x | Compare the file width to display width times screen density | Export at 2x or 3x |
| Red fringes | JPG chroma subsampling | Zoom to 400 per cent | Use PNG |
| The logo vanishes in a dark email | Dark mark on a transparent PNG | Test in dark mode | Give it a light chip or send a reversed file |
| Icon looks cropped | The mark sits outside the safe zone | Overlay 66 of 108 dp | Scale the mark to 48 to 66 dp |
| Printer rejects the file | Live fonts, RGB only | Their preflight | PDF with outlines and named spot colours |

The halo has a plain cause that forum threads describe: pixels at the edge of a shape are partly transparent and keep the colour of the ground they were blended against. We did not find a primary source for it, so treat the explanation as an informed reading.

Sources also disagree about EPS. Several vendor blogs say it cannot hold transparency, and one says it can. All agree it is an older format that printers still ask for. If your logo has no transparent effects the question disappears, and a PDF is the safer deliverable.

## One master, a clear folder
Keep one master in the design software and export everything from it. Name files by brand, version, colour and format, for example `nova-horizontal-black.svg`, and put a short note in the folder saying which file is for which use. The [brand guidelines](https://lainagency.com/resources/brand-guidelines-what-to-include) should state clear space and minimum size, and the [logo design process](https://lainagency.com/resources/logo-design-process) article shows where the tests above sit in the project. If you are unsure whether a package is complete, our [brand identity work](https://lainagency.com/about#logo-brand-identity) ends with exactly this handover, and you can [get in touch](https://lainagency.com/contact).

## Frequently asked questions

### Does Google support SVG favicons?

Google's favicon documentation lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF and does not mention SVG. It asks for a square image of at least 8 by 8 px and recommends more than 48 by 48 px. Browsers differ: caniuse shows SVG favicons in Chrome 80, Firefox 41 and Safari 26, so ship an SVG and a PNG of 48 px or more.

### Can I use an SVG logo in an email signature?

Not reliably. One 2025 report says Gmail has never fully supported SVG and that Outlook on desktop, mobile and web stopped rendering it in late 2025, while Apple Mail and Thunderbird still show it. Use a PNG at twice its display size, and test in dark mode.

### Why does my SVG logo show a different font on the website?

The text is still live. An SVG used through an image tag or a CSS background cannot load external resources such as fonts, so the browser falls back to a default. Convert the text to outlines before export. It adds about a kilobyte in our test.

### How many pixels does a PNG logo need?

Multiply the placed width in millimetres by dots per inch and divide by 25.4. At 300 dpi a 40 mm logo needs 472 px and an A4-wide one 2,480 px. For screens, export at 2x or 3x the displayed width, so a 140 px header needs 280 or 420 px.

### What logo file does a printer need?

A vector PDF with fonts outlined or embedded, and named spot colours if the job uses them. Ask whether they want PDF/X-1a, which allows CMYK and spot colours only and needs flattened transparency, or PDF/X-4, which allows live transparency and colour-managed RGB.

### Why does a red logo look fuzzy as a JPG?

Most JPG files store colour at a quarter of the resolution of brightness (4:2:0), so saturated edges smear. On a red square on white we measured an error of 50 out of 255 across 3 pixels at quality 95, against 3 with full-resolution colour. PNG avoids the problem.

## Sources and fact check

Checked on 28 Oct 2026.

- [Google Search Central: Define a favicon to show in search results](https://developers.google.com/search/docs/appearance/favicon-in-search)
- [MDN: SVG as an image](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image)
- [MDN: Image file type and format guide](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types)
- [Can I use: SVG favicons](https://caniuse.com/link-icon-svg)
- [Android Developers: Adaptive icons](https://developer.android.com/develop/ui/views/launch/icon_design_adaptive)
- [web.dev: Adaptive icon support in PWAs with maskable icons](https://web.dev/articles/maskable-icon)
- [Buttondown: Can I use SVG images in emails?](https://buttondown.com/blog/can-i-email-svg)
- [Wikipedia: PDF/X](https://en.wikipedia.org/wiki/PDF/X)
- [Google Business Profile Help: Photo and video requirements](https://support.google.com/business/answer/6103862?hl=en)
- [ctrl.blog: The best method for embedding dark-mode friendly SVG in HTML](https://www.ctrl.blog/entry/svg-embed-dark-mode/)