What logo files does a small business need?

Which file does each job ask for?

The logo on your screen is often a preview. The logo a printer, a website or an app store accepts is a specific file. Sending the wrong one is how a sharp mark becomes a blurry box, or how a white box appears behind the symbol on a photograph.

Four jobs show up in the first month for most small businesses. Match the file to the job before you send anything.

JPG does not belong in that set as the master. It throws away detail to stay small, and it cannot store a transparent background. A JPG of a logo on white is a photograph of a logo. It is fine inside a photo of your shop. It is a bad file to hand to the next person who has to resize the mark.

MDN’s image type guide is a plain reference for how browsers treat SVG, PNG and JPEG. The practical split above is the one a branding job uses. It is not a claim about which format is newest.

What is an SVG, and when is it the file to send?

SVG means Scalable Vector Graphics. The file describes shapes, not a grid of pixels. A circle is a circle at 16 pixels and at 16 feet. That is why a sign shop, a label printer and a developer all ask for it once the job leaves the screen. The format is specified by the W3C. SVG 2 is the current specification if you want the formal definition. You do not need to read it to send the file.

An SVG from a trace, which is how Logocene builds the download, is a clean path of the mark that was drawn. It is not a photograph with a filter. Open it in a browser. Zoom until the window is mostly logo. The edges should stay smooth. If they stair-step, you are looking at a PNG that was renamed, or at a trace that followed a blur. Rename nothing. Ask for the vector again.

Send SVG when a developer is building the header, when a sign or a stencil has to scale, or when you want one master you can re-export to PNG later. The mark stays the same file in the header and in the icon.

EPS and PDF are the other vector types printers still request. They can carry the same drawing. If a shop names EPS and you have SVG, write back and ask whether SVG or PDF is accepted. Many shops take SVG now. Some older RIP software still wants EPS. Logocene’s ZIP includes SVG, not EPS. Exporting a PDF from the SVG in a vector editor is a normal step. Pretending the ZIP already contains EPS would be false.

The SVG logo generator page is the product page for this file, including the PNG sizes that ride along with it.

What is a PNG for, and why does the background matter?

PNG is a raster format. It stores pixels, and it can store transparency. That second point is why it is the raster to keep, and JPG is the one to retire for logos. A PNG on a clear background can sit on a photograph, a coloured panel or a busy menu. A PNG or JPG on white cannot, without a white rectangle travelling with it.

You will want more than one pixel size, because a raster does not invent detail when you enlarge it.

512 px. Enough for many avatars, email signatures and older templates that ask for ‘a png’.

1024 px. A comfortable square for a site header exported as an image, a slide, and stores that ask for an icon around that size.

2048 px. Headroom for a large social image or a print that still insists on a raster. It is not a substitute for SVG on a building.

Logocene’s paid download includes those three sizes, in colour and in black and white, on a clear background. The transparent logo page describes that export. The free preview is a watermarked picture. It is not this PNG.

When you place the PNG, check the edges against a dark colour and against a light colour. A halo of white pixels means the file was flattened on white and the white was only partly removed. A true clear background does not leave that rim.

Also keep the SVG even after the PNGs look perfect. The next size someone asks for will not be one of the three you saved.

What should the favicon and the app icon be?

A favicon is the tiny mark in a browser tab, and the same drawing often becomes the phone icon. At that size, a detailed illustration turns into a blot. The test is rude and fast: shrink the mark until it is a fingernail, and see whether a stranger can still tell it apart from a square.

Browsers have accepted an SVG favicon for current versions, referenced from the page. Where a tool still demands a raster, export a square PNG from the SVG. Apple touch icons and many store listings want a square PNG at a stated pixel size. Logocene does not ship a .ico file, and it does not ship an Android adaptive-icon layer. The app logo page says this plainly: use the 1024 px PNG where a store asks for a square of that kind, and the 512 and 2048 px files for the other slots, and keep the SVG on the site so the header and the icon stay one drawing.

Hand a developer the SVG, a 512 px PNG for tools that refuse SVG, and a 1024 px PNG if a store listing asks for it. Do not upload the full lockup, with a long name beside the symbol, as the favicon. The name disappears. Use the symbol alone.

Nightjar

Tideloom

Emberlane

Small-batch coffee roasters

Why do you need black and white as separate files?

Colour is a layer you can lose. These jobs drop it on purpose.

A stamp, a foil, a one-colour screen print, a photocopy and an engraving all drop the palette. The printer needs a single solid shape. Pale areas drop out and thin lines break if the shop separates a colour PNG itself. A black version drawn as black keeps the gaps open. White on a photograph or a dark garment is the reverse file: solid white on a clear background. Inverting a colour PNG in a slideshow usually leaves a fringe.

Logocene’s ZIP includes the symbol as SVG in colour and in black and white, and the PNGs the same way. Black and white here means those versions of the mark, not a greyscale photograph of it. Open both. The black file should be solid ink on clear. The white file should be solid white on clear. If either looks like a faded colour file, it is the wrong export.

On the kit page, the guide also states a minimum size and clear space. Those two rules are what stop a correct file from being used at a size where the strokes close up. The file can be perfect and still fail if someone sets it at 8 pixels tall on a poster caption.

What should you keep?

Keep one folder: the colour SVG, the black SVG, the white SVG, PNG at 512, 1024 and 2048 on a clear background, the hex colours, the font names and the licence. Build a .ico only when an old tool refuses both the SVG and the 512 px PNG.

A Logocene ZIP matches that set, plus palette JSON and CSS and a fonts note. The guide stays on the kit page. The brand kit page lists the bundle. The free preview is watermarked until a credit is spent. That split is on the terms.

How do you check a file in five minutes?

You do not need design software for the first pass.

1. Open the SVG in a browser. Zoom in. Edges stay smooth, or they do not.
2. Drop the PNG onto a black slide and a white slide. No white box, no dark fringe.
3. Shrink the symbol to favicon size in the browser, or set the PNG as a temporary browser icon if you can. The shape should still be a shape.
4. Open the black SVG. It should read as one ink, with the holes still open.
5. Read the font note and the hex codes once, and put them where the website will copy them from. A logo file with unnamed colours gets recoloured by the next person who guesses.

If step 1 fails, you do not have a vector yet, whatever the filename says. If step 2 fails, you have a flattened raster. If step 4 fails, one-colour print will fail later, in a more expensive way.

That is the whole set. SVG for scale, PNG for the slots that want pixels, a small reading for the icon, and black and white for the jobs that drop colour. Everything else is a crop of those.