In short
Keep the master logo as a vector file, SVG for the web and PDF or EPS for print, so it scales to any size without loss. Export PNG with a transparent background for places that cannot use vectors, at sizes large enough for the largest use, and never JPEG, which cannot do transparency and blurs edges. A complete set includes the master vector, SVG, high-resolution PNGs, a single-colour version, a reversed version for dark backgrounds, and the standalone mark for favicons and app icons.
Vector and raster
A vector file describes a logo as shapes: this curve, this fill, this stroke. It can be rendered at any size, from a favicon to a billboard, with perfect edges, and the file is usually tiny. SVG, PDF, EPS and AI are vector formats.
A raster file describes a logo as a grid of pixels. It looks right at its native size and below, and blurs when enlarged. PNG, JPEG, WebP and GIF are raster formats.
Every logo should exist as a vector master, and raster versions should be exported from it as needed. A business whose only logo file is a raster has a logo that cannot grow, and will eventually pay a designer to redraw it.
The formats and when to use each
| Format | Type | Use it for | Notes |
|---|---|---|---|
| SVG | Vector | Websites, apps, anything on a screen | Tiny, sharp at every size and density, can be styled with CSS. The default for the web. |
| Vector | Print, sending to suppliers and partners | Opens anywhere; keeps vectors and fonts if exported correctly. | |
| EPS | Vector | Legacy print workflows, signage, embroidery | Older format still requested by some suppliers. |
| AI / Figma / Sketch source | Vector | Editing by designers | The master; keep it, but do not send it as a deliverable to non-designers. |
| PNG | Raster | Documents, presentations, platforms that reject SVG, email signatures | Supports transparency. Export at 2x or larger for the biggest use. |
| WebP | Raster | Rarely for logos | Use SVG instead on the web. |
| JPEG | Raster | Never for logos | No transparency; compression blurs edges and adds noise around lettering. |
| ICO / app icon sets | Raster | Favicons, app icons | Generated from the standalone mark at fixed sizes. |
Why JPEG is always wrong
JPEG compression approximates smooth photographic gradients; on the flat colours and sharp edges of a logo it produces fuzzy outlines, speckle around letters, and a white or off-white box where a transparent background should be. A JPEG logo on a coloured header, with its white rectangle, is one of the most recognisable signs of a site assembled without a designer. If someone sends you a JPEG logo, ask for the vector; if there is no vector, the logo needs redrawing, which is a small job for a designer and a permanent fix.
The variants to keep
A logo that only exists in one colour on one background is unfinished. The complete set:
- Full colour on light background (the primary).
- Reversed for dark backgrounds, usually with a white or light wordmark.
- Single colour, black and white, for print in one ink, embroidery, stamps, and anywhere colour is unavailable.
- The standalone mark, for favicons, app icons and social avatars, in a square.
- Horizontal and stacked lockups, if the identity has both.
Each variant in SVG and PNG, and the whole set in a folder with a one-page usage note. This is part of what a competent identity project delivers.
SVG on the web, done properly
SVG is the correct format for a logo on a website, and it is worth a few details:
- Convert text to outlines before exporting, or the wordmark depends on the viewer having the font.
- Clean the file. Design tools export SVGs with editor metadata, hidden layers and unnecessary precision. An optimiser such as SVGO typically cuts the size by half or more.
- Give it a viewBox and no fixed width and height, so it scales with CSS.
- Inline it or reference it as an
img; inline allows CSS control of colour, which is how a single file serves light and dark modes. - Add accessible text: a
titleelement inside the SVG, oralton the image, naming the company.
What to ask a designer to deliver
The master source file; SVG and PDF of every variant; PNG of every variant at two or three sizes, the largest at least 2,000 pixels wide, with transparent backgrounds; favicon and app icon exports; the exact colour values in hex, RGB, CMYK and, if used, Pantone; the typeface names and licences; and a short usage guide with clear-space and minimum-size rules. Ask for all of it at the end of the project, in one folder, and keep a copy somewhere that survives the designer's departure. A logo without its files is the most common reason a business ends up paying for the same identity twice.
If you have a logo and are not sure what files you actually own, book a call and we will tell you what is missing.
Common questions
What is the best file format for a logo on a website?
SVG. It is a vector format, so it is sharp at every size and screen density, the file is tiny, and it can be styled with CSS for light and dark modes. Export text as outlines, optimise the file, and include an accessible title. Use PNG only where a platform cannot accept SVG.
Should a logo be PNG or JPEG?
PNG, always, if a raster is required. PNG supports transparent backgrounds and keeps edges crisp; JPEG cannot do transparency and its compression blurs the flat colours and sharp lines of a logo. A JPEG logo on a coloured background shows a white box where transparency should be.
What is a vector logo and why do I need one?
A vector logo is stored as shapes rather than pixels, so it can be scaled to any size, from a favicon to a billboard, without losing sharpness. It is the master from which every other version is exported. A business with only pixel-based logo files cannot enlarge them and will eventually need the logo redrawn.
What logo files should a designer give me?
The editable source file; SVG and PDF of every variant; transparent PNGs at several sizes; favicon and app icon exports; colour values in hex, RGB, CMYK and Pantone; typeface names and licences; and a short usage guide. Variants should include full colour, reversed for dark backgrounds, single colour, and the standalone mark.
Can I convert a PNG or JPEG logo to a vector?
Automatic tracing tools produce a rough vector from a clean, high-resolution raster and a poor one from a small or compressed file. For a real logo the reliable route is to have a designer redraw it as vectors, which is a small job and gives you a proper master with all variants.
