What logo files do you need? SVG, PNG and favicons explained
Which logo files a new business needs, what SVG, PNG and favicon files are for, the sizes that matter, and a checklist to keep before you launch.
A logo is one design, but it lives in many places: a website header, a browser tab, a phone's home screen, a profile picture, an email signature, a van. Each of those wants a slightly different file. Here is what each file is for, and the set worth having before you launch.
The short answer
- An SVG of the full logo. The master copy, for anything printed or shown large.
- PNGs of the full logo with a transparent background, in colour, black and white.
- The mark on its own (the symbol without the name), as SVG and PNG, for small square spaces.
- A favicon for your website's browser tab, and icons for phone home screens.
- A square profile picture for social accounts.
Everything else, a business card, a sign or a social post, is made from those.
SVG: the master copy
An SVG is a vector file: it stores the logo as shapes rather than as dots, so it stays sharp at any size, from a browser tab to the side of a building. It is the file to send a printer, a sign maker or a web designer, and the one to keep safe, because every other file can be made from it and it cannot easily be made from them.
Its weakness is support. Many email programs, and some older office apps, will not display an SVG, which is why you also need PNGs. If a printer asks for a PDF or an EPS instead, send them the SVG and ask; converting between vector formats is routine for them.
PNG: for everyday use
A PNG stores the logo as pixels, at one fixed size. It is the file that works almost everywhere: documents, slides, email signatures, social posts and website builders. Its most useful feature is a transparent background, so the logo sits on any colour without a white box around it.
Because a PNG has a fixed size, it blurs when it is stretched. Keep a large one, at least 1,500 pixels wide, and let apps shrink it. Shrinking a PNG keeps it sharp; enlarging one does not.
Avoid JPG for logos. A JPG cannot be transparent, so the logo always arrives in a rectangle of its background colour, and its compression smudges the sharp edges that logos are made of. JPG is for photographs.
Colour, black and white versions
A logo is not always shown on the colour it was designed on. Keep three versions:
- Full colour, for your own website and materials.
- All black, for single-colour printing, forms, receipts and light backgrounds you do not control.
- All white, for dark photographs, dark backgrounds and coloured merchandise.
If the logo only works in full colour, find out now, before a printer or a partner's website shows it in one.
The mark on its own
Many logos are a symbol next to a name. In a small, square space, the name becomes too small to read, so the symbol does the job alone: in a browser tab, on a phone's home screen, in a profile picture and in an app's icon. If your logo is only a name, its first letter, set in the same lettering, usually plays this part.
Favicons and phone icons
The favicon is the small icon in a browser tab and a bookmark list. It is usually a file called favicon.ico that holds the mark at several small sizes, commonly 16, 32 and 48 pixels square. At those sizes fine detail disappears, so the mark needs to stay readable as a simple shape.
When someone saves your website to a phone's home screen, the phone uses a larger icon: 180 by 180 pixels on an iPhone, and 192 and 512 pixels square for Android and web apps. Give these a solid background colour, because phones may fill in a transparent background in a colour of their own choosing.
Profile pictures
Most social networks show profile pictures as a circle cropped from a square. Use the mark, centred, with generous space around it, so the circle does not clip its corners. A 1,080 by 1,080 pixel square is large enough for the platforms that show it biggest.
What size should a logo be?
There is no one size, which is why the SVG matters. Use the SVG wherever a file can be any size: printing, signs and websites that accept it. Where an app needs a PNG, use one at least as large as the space it fills, and twice as large for sharp phone and laptop screens, which pack two or three pixels into the space of one.
A checklist to keep before you launch
- Full logo as SVG, in colour.
- Full logo as PNG with a transparent background: colour, black and white.
- The mark on its own as SVG and PNG: colour, black and white.
- favicon.ico, and square PNG icons at 180, 192 and 512 pixels.
- A 1,080 pixel square profile picture.
- Your colours written down as hex codes, and the name of your typeface.
Keep them in one folder with clear names, and give the whole folder to anyone who works on your brand. Every name sold on Webba comes with a brand kit of files like these, made from its identity.
Still choosing the name? Start with how to come up with a business name, then read what a brandable domain name is.