guidebrandingstartup

Every Brand File You Need Before Launch (A Founder's Checklist)

The logo variants, favicon sizes, OG image and social crops a new company actually gets asked for in its first month — what each one is, why it exists, and how to produce it from one file.

You have a logo. Someone designed it, or you generated it, or a friend drew it and sent you a PNG on a Tuesday. You think the brand work is done.

Then the week starts. The developer asks for an SVG. The browser tab shows a blurry smudge. Someone posts your link in Slack and it renders as a blank grey rectangle. The printer says they can't use a JPG. Your LinkedIn banner is stretched. The invoice template wants something that survives a black-and-white printer.

None of these are design problems. They are file problems, and they arrive in a predictable order. This is the list, in the order it shows up.

The rule that makes the rest obvious

A logo is not a file. It is a system of files derived from one master, and the master should be the largest, cleanest version that exists — ideally a vector, otherwise the biggest PNG you have with a transparent background.

Everything below is derived from that master. Derive each file from the master directly, never from another derivative: a favicon downscaled from a 500px web export is visibly worse than the same favicon rendered from the source, and the difference shows at exactly the sizes where you can least afford it.

1. The four logo variants

This is the whole foundation. Every other file on this page is one of these four, resized.

  1. Full colour, transparent background

    Your default. Transparent so it sits on white, on off-white, on a screenshot, on anything. If the background was flattened to white before export, you will see a rectangle every time you place it on a colour — that fringe has a specific cause and a specific fix.

  2. White, transparent background

    For dark headers, dark slides, dark ad units, video overlays and the footer of your own site. Roughly half of all placements are dark, so without this variant half your inventory is unusable. Making it is a two-click job in the logo styler.

  3. Black, single colour

    For one-ink printing, embroidery, stamps, faxes and anything that goes through a photocopier. It must be solid black with no gradients — a gradient logo sent to an embroiderer comes back as a guess. Make a black version here.

  4. Square, icon only

    Your mark with the wordmark removed, cropped square. This is what every profile picture, app icon and favicon is built from. Decide it once and every platform question afterwards is already answered.

That fourth one is the variant people skip, and it is the one that causes the most trouble later. A wordmark is designed to be read at the width of a website header. At 32 pixels it is a grey smear. You need a mark that survives being tiny, and if your logo has no icon component, a single letter on a solid brand-colour square is a legitimate answer used by plenty of large companies.

2. The favicon set

The favicon is not one file. Browsers, iOS and Android each ask for different sizes, and the browser picks the closest match.

SizeWhere it is used
32×32The browser tab. The one everybody notices.
180×180iOS home screen icon when someone saves your site.
192×192Android home screen and PWA install.
512×512Splash screens and app-store-style listings.
16×16Older browsers and some feed readers. Cheap to include.

Render all of these from the master, not from each other. A favicon generator does the whole set in one pass, which is worth it purely because getting the smallest sizes right by hand is fiddly.

3. The OG image

When someone pastes your URL into Slack, LinkedIn, X, iMessage or WhatsApp, the platform looks for an Open Graph image. If you do not have one, your link renders as a blank rectangle or, worse, whatever image happens to be first on the page.

The specification is boring and worth following exactly:

  • 1200 × 630 pixels. This ratio is what every major platform crops to.
  • Keep anything important in the middle. The edges get cropped differently by different platforms, and something will always trim your logo if you put it in a corner.
  • Large text or no text. Preview cards are rendered small. Body-copy-sized text is unreadable at the size it will actually be seen.
  • PNG or JPG. Not SVG — most platforms will not render it.

This is a five-minute job that is skipped until launch day, when someone posts the announcement link and it looks unfinished in front of everyone you invited.

4. Social profile crops

Every platform crops your profile picture differently, and most of them crop to a circle. Your square icon-only variant from step 1 covers all of them, but check two things: that nothing important sits in the corners that a circle mask removes, and that the mark still reads at the display size, which is usually around 110 pixels rather than the 400 you uploaded.

5. The banner sizes

Only make the ones you actually use, but know that they exist and that each is a different aspect ratio with a different safe area:

The failure mode here is always the same: designing to the full canvas and having the important part cropped out on the device where most people see it.

6. The print version

You will need this sooner than you think — a conference badge, a sticker run, a sign, a t-shirt for the team.

Print asks for two things web never does. Vector, or very high resolution: a 500-pixel file printed at a hand's width is visibly soft, and printed a metre wide is a metre of blur. And single ink: many print processes cannot do gradients at all, which is why the solid black variant exists.

If you only have a raster file, you can trace it into vector paths. Be honest with yourself about the result — tracing works well on flat, simple marks and poorly on gradients or fine detail. Send the printer the traced file and the highest-resolution raster you have, and let them tell you which is usable.

7. The document mark

The invoice, the contract template, the letterhead, the deck's title slide. This wants the black single-colour version at moderate resolution, and it wants to survive a photocopier and a printer that is out of cyan.

It is the least glamorous file on this list and it appears in front of the people paying you.

Naming, because future-you is a different person

Keep all of it in one folder with names that describe the file rather than its history:

logo-color-transparent.png
logo-white-transparent.png
logo-black-print.png
logo-square-icon.png
logo.svg
favicon-32.png  favicon-180.png  favicon-192.png
og-image.png

Not logo-final-v3-USE-THIS.png. The next person to join — a contractor, a co-founder, an agency — should be able to open that folder and pick the right file without asking you. That is the entire point of doing this work once.

What to do first

If you do nothing else today, do these three: the white variant, the favicon, and the OG image. They are the ones whose absence is visible to other people, and between them they take about twenty minutes.

The rest can wait until something asks for it — which, now that you know what the list looks like, will be a lot less disruptive when it does.

Read next