Sari la conținut

Vector logo or PNG: the file formats you need to have

The most common problem with a logo is not the drawing, it is the file. The printer asks for “the vector”, you only have a PNG, and the logo gets redone. This guide says what each format is, when it is used and what the package you receive must contain.

by Updated 5 min readCitește în română

Vector and raster: the only distinction that matters

A raster file (PNG, JPG, WebP) is a grid of pixels: it has a fixed size, and when enlarged you see the grid. A vector file (SVG, PDF, EPS, AI) describes shapes mathematically: a circle is a centre and a radius, not a pile of dots. It scales from favicon to billboard without losing anything, and any colour changes in one click.

The rule: the logo is kept as a vector and exported as raster for each use separately. If all you have is the raster, you do not have the logo, you have a photograph of it.

The formats, one by one

SVG

Kind

Vector

Where it is used

Website, apps, any screen; editing

Worth knowing

The web standard; opens in any browser and any vector editor

PDF

Kind

Vector

Where it is used

Printers, presentations, attachments

Worth knowing

A PDF exported from a vector stays a vector; one “printed” from an image does not

EPS

Kind

Vector

Where it is used

Older print shops, screen printing, engraving

Worth knowing

An old format, still asked for; equivalent to a vector PDF

AI

Kind

Vector

Where it is used

The designer's working file

Worth knowing

Adobe's proprietary format; ask for SVG/PDF alongside it

PNG

Kind

Raster

Where it is used

Website, social media, Word documents

Worth knowing

Supports transparency; export at 2x for retina screens

JPG

Kind

Raster

Where it is used

Photographs; rarely for a logo

Worth knowing

No transparency, artefacts on edges; avoid it for logos

WebP

Kind

Raster

Where it is used

Websites, where accepted

Worth knowing

Smaller than PNG at the same quality

ICO

Kind

Raster

Where it is used

Favicon in old browsers

Worth knowing

Today SVG or a 32×32 PNG is used instead

What the logo package must contain

A complete package is not one file, it is a structure. When you receive the logo, from a designer or from a generator, check the list:

  • The mark alone, the name alone and the two together, horizontally and vertically (four or five variants).
  • Each variant in colour, in black, in white (for dark backgrounds) and, where relevant, in a single brand colour.
  • Each variant as SVG and as vector PDF. EPS if you work with traditional printers.
  • PNG with a transparent background, at least 1,000 pixels wide, and 2,000 for the large version.
  • Favicon: 32×32 and 180×180 (Apple touch icon), plus the SVG of the mark.
  • A short document with the clear space around the logo, the minimum size and the colour codes (HEX for screen, CMYK or Pantone for print).

Text or outlines: the detail that breaks files at the printer

A logo usually contains the name set in a typeface. In an SVG or a PDF, the text can be left as text (which needs the font installed to display correctly) or converted to outlines (the letters become shapes). For print, outlines are mandatory: the printer does not have your font, and the silent substitution with Arial is the most common surprise at the first order. Ask for “text converted to curves” or “outlined”.

RHAM exports the PDF and the EPS with the letters outlined from the real typeface, and the SVG with the text kept editable, plus the outlined version, so you have both.

Colours: RGB, HEX, CMYK, Pantone

Screens display RGB (usually written as HEX, for example #E10600), printers print CMYK, and for exact colours on materials (paints, textiles) Pantone codes are used. The same colour has three codes, and the conversion is never perfect: a bright red on screen comes out duller in CMYK. The brand guidelines should list all three, decided once, so that no printer converts as it sees fit.

How to check a file yourself

  1. 01Open the SVG in a browser and zoom to 800%. If it stays perfectly crisp, it is a vector.
  2. 02Open the PDF and zoom to the maximum. If the edges go soft, the PDF contains an image, not shapes.
  3. 03In the SVG, search with a text editor for the <text> tag. If it is there, the text is not outlined.
  4. 04Check the PNG on a dark background: missing transparency shows as a white rectangle.

What to do with the files once you have them, where they are documented and how they are used correctly, is in the brand guidelines.

Frequently asked

Which logo format should I send to the printer?
Vector PDF or EPS, with the text converted to outlines and the colours in CMYK or Pantone. Send a large PNG as a visual reference too, but the working file is the vector.
Can I turn a PNG into a vector?
Automatically, approximately: tracing rebuilds the shapes from the pixels, with imperfect edges and without the original font. For a simple logo with geometric shapes the result can be acceptable after manual clean-up; for a logo with text or fine detail, it is cheaper to rebuild the logo as a vector.
SVG or PNG for a website?
SVG for the logo: it is smaller, perfectly crisp on any screen and changes colour from CSS. PNG only where SVG is not accepted (some email platforms, some old CMSs), exported at twice the displayed size.
What size should a PNG logo be?
It depends on the use, which is why you keep the vector and export as needed. As a rule: 500 pixels wide for a website header, 1,000–2,000 for social media and documents, 32 and 180 pixels for the favicon and the phone icon.

Read next