The deep dive guide to logo formats

Using a professional graphic design service to create a logo should mean you, as the client, receive a package of file types that will allow you to use your logo any way you like. However, the massive variation in file types, colour types and use cases can make it hard to work out what you need up front.

This guide has been written to help anyone working with a professional logo design agency or freelancer to help you identify what file types you need to receive, and why.

TL;DR? Use this section to skip to a chapter:

1. What the difference is between vector and raster images
2. When to use different logo file formats
3. The different logo colour types for print and screens
4. Why you need different logo colour variations
5. What a logo lockup is and the kind of logo format you’ll need
6. The range of sizes you need your logo delivered in
7. Why you need to think about copyright and intellectual property
8. What brand identity guidelines are and why they matter

Vector image files

A vector graphic is a mathematical description of an image comprised of paths, points, curves, angles, and simple shapes. Typically vectors are created in software such as Adobe’s Illustrator programme, currently the industry standard, although there are now competing software equivalents such as CorelDraw or Affinity Designer.

Vectors are editable images that can be scaled up infinitely without any loss of quality and with very little impact on the file size. It will allow you, if you require to do so, to get your logo professionally printed on an array of things for example; brochures, leaflets, exhibition stands, and even billboards the size of a skyscraper. Therefore, if you receive only one file type for your logo, it should be a vector file.

Common vector file types include: AI, EPS, SVG and PDF.

Raster/bitmap image files

Raster images are made up of small squares called pixels. Resizing a pixel-base image can have a dramatic effect on both file size and image quality due to pixels being created or removed to match the new size. This is why a logo design should always be created in a vector format because if you want to increase the size of a raster image, the image will degrade and always appear annoyingly blurry.

Raster images are typically created in Adobe’s Photoshop programme, but again there are many equivalent software programmes such as Corel PHOTO-PAINT or Affinity photo, the clue is the name ‘photo’…a design software used for images made up of pixels rather than graphics made up of lines or curves.

Common raster file types include: JPG and PNG.

Vector file types

Vector files are brilliant as they can scale without damaging the image quality. AI, EPS & PDF files should never be used directly on the web as they are files essentially carrying your graphic artwork. They can be handed over if necessary, to other parties, for example another designer or your print company.

If I was a client, I would aim to receive the original AI file (because this is where the magic is) and I would also want it in PDF for printing purposes and SVG for showing your vector graphic (logo) on the web.

Here’s a detailed breakdown of the vector file types.

When to use an AI logo file: .ai

AI files are the original editable working graphic file that your logo would have been created in, in Adobe Illustrator.

Unless you already have Adobe Illustrator you won’t be able to edit this file but, you can still view it if it is saved as default with PDF compatibility in Illustrator.

You should have this file if you want further design work carried out and, as explained previously, for all your further printable needs. Also, if you decide not to use the designer that created the logo, your next designer will really appreciate being given this file.

If you need to send the artwork to a print company, they will often ask for the original AI file (which can be supplied by your designer if you haven’t paid for the rights of the design).

If you don’t have the original AI files, it may be because you don’t own the Intellectual Property rights to your logo. If you aren’t sure if you have, or need, the copyright to your company logo, you might want to read our section on who owns your logo.

I will explain the other file formats your printer may ask for instead, further down.

When to use an EPS logo file: .eps

EPS files (Encapsulated Postscript File) are open vector files, an editable file much like an AI file.

EPS files are not bound to Adobe’s Illustrator programme. Although they are a little outdated now, you can still open and edit them with most vector programmes and this file may still be requested by print companies who are using older technology.

When to use an SVG logo file: .svg

SVG (Scalable Vector Graphic) is exactly what it says on the tin. These files are also a scalable vector format, but used only on the web.

SVG’s define graphics in XML format. They are simple plain text files that describe lines, curves, shapes, colours, and text making them readable by screen readers, search engines and other devices.

You can open an SVG on most browsers but like any vector graphic you would need some form of vector programme to be able to edit it. Unless you are able to code, then they can be edited with any text editor.

What would you do with an SVG file? For the purposes of a logo graphic, when you see a logo on a web page, this is what it should be. No other file can compare to the crisp, clear vector graphic you will see when using an SVG file for your logo on a web page.

SVGs are also incredibly tiny files holding all the extensive information your original vector graphic had but, for the web, so as not to bloat or contribute to slowing down your webpage.

There are some security vulnerabilities associated with SVG files on websites, so be sure to speak to your website developer who will know how to handle this correctly. If you run a WordPress website yourself, this plugin allows WordPress to securely host SVG files.

When to use a PDF logo file: .pdf

PDF files (Portable Document Format) retain vector information and editing capabilities.

When saving from Adobe Illustrator to a PDF format, you can retain its original editing capabilities. The PDF file can be opened and modified in any vector programme, much like an AI file but without being bound to Adobe’s Illustrator software to do so.

You can also open and view the files on any computer with Adobe Acrobat (a free piece of software) hence PDF’s are becoming more and more popular with designers and print companies alike. They are the new EPS file in effect.

Raster file types

Raster files are useful when a small file size is crucial, like in your email signature. However, due to being made up of pixels they are not a file you should use to edit their dimensions. The most common types are JPEG and PNG.

JPEG is better for photos and lots of complexity, while PNG is better for text and clear crisp lines.

Here I’ll go in to more detail about the various raster file types.

When to use a JPG logo file: .jpg

JPEG or JPG files, same thing (Joint Photographic Experts Group), are bitmap compression (lossy) image files.

In simplest terms they are files containing a raster image which has literally had pixels thrown away to make it a smaller file size, which happens every time you open and save it again.

JPEG files don’t need fancy software to open them, they are simply an image file that can opened on every computer. It’s the most widely accepted image format.

JPEG files are compressed and hence they can be very small, and when data is lost you typically you won’t notice it. However, if you try to re-size the image, then you have the problem of the software ‘making-up’ pixels to fill the gaps. This causes the ‘blurry’ look due to the incorrect pixels that the software has added.

They tend to be quick to load, and still look good on web pages. However, each time it is edited and resaved, a little bit more information is lost.

When to use a PNG logo file: .png

PNG files (Portable Network Graphics) are lossless raster image files.

These are very similar to JPEG files except your precious pixels won’t be thrown away when compressed. You can compress, open and save it, and you won’t lose information like a JPEG does.

PNGs also have transparent backgrounds, unlike a JPEG which will always have a coloured (usually white if not specified) background. This feature of a PNG is perfect for when you want to put your logo on top of another image or with other graphics on your webpage without the loss of quality.

As they are lossless image files, they tend to be bigger file sizes. As they are raster based, just like a JPEG, if you try to increase the image size it will lose its original pixel perfect quality.

When to use a TIFF logo file: .tif

TIFF files (Tagged Image File Format), like PNGs, use lossless compression and are regularly used for professional photography or by printers to maintain image integrity and clarity.

This file type is similar to a JPEG and a PNG, but if you like, are the god of raster image files. They support both lossy and lossless compression, you decide. However, these are very large file types, usually used for image printing purposes, rather than used to display a logo.

You can scale TIFF files without loss of picture quality, and they can undergo multiple processing before any sign of degradation, so it’s great for sharing between users. Be aware that TIFF files are not suitable for web browsers due to the gigantic file size.

Summary: What logo file types should my designer provide?

You may be wondering why you would want your vector graphic in a raster format? Well, SVG’s can’t be used everywhere, for example if you want your logo on Facebook, Twitter, LinkedIn etc you will need your logo supplied as a raster file.

JPEG files are not the best format for a logo, and why would you use it if there is a better way? The answer shouldn’t be because that’s what makes me feel comfortable in the realm of file formats.

I deliver JPEG files only to be used in situations where a third party won’t accept a PNG, some situations will request and only be able to use a JPEG (such as some trade show websites using JPEG files only on their website to display exhibitor logos).

JPEGs are a great format, I’m not knocking it, if you are going to use multiple images on a website, to keep the speed of your webpage to a minimum, it should be your default raster image file type. You do, however, take a hit on clarity if your images have text or lines i.e. your logo.

However, if you need your image to be high quality, you have text in it or need to preserve transparency, i.e. your logo, then PNG is the winner, point blank.

TIFFs are technically for professional photographic images, a file which kind-of sits between RAW (which I won’t delve into here) and JPEG. It retains layers when saving and retains the highest quality of the original RAW image file, certainly not for use on the web.

In an ideal world your designer will supply the following logo file types:

• AI for future file type exporting
• EPS for compatibility
• PDF for print
• SVG for your website
• PNG for general online use
• JPEG for those times a third party can’t accept any other files type

Colour types for screens

RGB stands for red, green and blue, the three colours used by your monitor to create the millions of colours you see on your computer screen.

Your website may use RGBA, which stands for red, green, blue and alpha. The alpha value specifies the opacity of the colour allowing your website to show semi opaque overlays.

You should also receive hex code values of your RGB colours. This is a way of specifying colour in hexadecimal values, and is used in HTML and CSS to specify colour on your website.

The code is a hex triplet representing three values that specify the composition of colour in RGB. The first pair refers to red, second to green and third to blue. Your hex codes will always start with a # sign, for example the hex code for white is #FFFFFF. 

Colour types for print

The Pantone Matching System (PMS) is used on the majority of standard printers to replicate tones and graphics through a standardised colour system. As a universal colour language, each Pantone colour is one single solid ink (also known as spot or offset) produced by highly precise mixes of ink, meaning that each time your colour is printed it remains exactly the same every time.

CMYK (four colour, full-colour or standard process printing) uses four inks (cyan, magenta, yellow and key, where key is black) to create a colour. The majority of home-grade, consumer, and commercial printers use CMYK ink shades to print text and images. CMYK colours will usually be fine for the majority of companies to use in their branding, the issue is there can be a slight variation in the final colours from print run to print run.

So, if colour consistency is highly important, then you may want specific numbered colours from the Pantone Matching System to define the colours used in your logo. However, be aware the cost of printing with Pantone colours can be eye-wateringly high compared to printing with CMYK.

A note on image resolution

Note that printers and computers handle image resolution differently. When printing, the pixels per inch (PPI), also known as dots per inch (DPI), matters. The more pixels per inch, the better the print quality. Industry standard is 300 ppi, so the CMYK files for print should be supplied in 300 ppi.

Screens don’t use dpi at all, and changing the ppi from 1 to 1000 will not make any difference. There’s a three-decade old rule from the days of early Macintosh computers when a 72 ppi resolution was needed. For some reason it seems this rule has stuck, but for no purpose. If you still believe 72 ppi is needed, here’s a great in depth article proving why ppi doesn’t matter on screens.

Your computer screen will only use pixel dimensions, that is the width and the height. Therefore, your RGB images can come in any resolution at all, and you don’t need to worry if it is not 72 ppi.

Colour file types your designer should provide for print and screens

For printing purposes your printing company may ask for one of the three following logo file types in the CMYK colour mode; AI, EPS (the now fairly outdated option) or PDF.

If your project is using Pantone, you should receive another folder of images in AI, EPS and PDF for the Pantone colour(s). You should receive both Pantone and CMYK values, as Pantone can only be printed by certain print companies and it is likely you’ll still use the CMYK variant at times.

For screen purposes you should be receive your logo files in the RGB colour mode AI, SVG, PNG and JPEG (for the times no alternative file type will be accepted).

You won’t receive files in hex, as hex is a code value used in HTML and CSS. Your brand guidelines should contain the hex values for your website developer to use.

Whilst your logo in its full colour format should be the most used version, inevitably you will need alternative versions. For example, when you need your logo to sit over a background.

Here I will explain the variations I supply to my clients, and why you might need them.

Full colour

This is the full colour logo and will most likely be the predominant variation. It’s likely to sit on white/lighter backgrounds.

Reverse/inverted colour

A reverse/inverted colour logo inverts the colours in the design so that the background or negative space generates the logo’s fill, and the outside space creates the outline.

This style is useful for the use of both light and dark backgrounds.

Monotone

You may want to have your logo in either all Black, Grey or White. If you want your logo on a colourful background, for example the top of a webpage, you will more than likely want it in white.

Grayscale logos can be helpful for printing on promotional merchandise like hats and mugs, and for high contrast, black can be useful for light-coloured printing materials.

The iconic mark

The iconic mark is the stand-alone icon, typically used as the avatar for most social media platforms.

Using the wordmark or the full lock up for this will leave it unrecognisable in the square or circular space provided.

The wordmark

The wordmark (the standalone text) will be the least used variation but it’s a good idea to receive it for a scenario whereby another design feature will need to take centre stage.

The full lock up

The full lock up is the iconic mark and the wordmark which sit together to complete the full logo design and will be used in most cases.

Favicon

A favicon (short for favourite icon) is the little icon displayed next to your webpage title in the browser tab. This will be the smallest size you will need your iconic mark to be supplied in.

For something so tiny, their significance shouldn’t be ignored. Due to the common use of multiple tabs when using browsers (e.g. Chrome), favicons are the visual cue website visitors are using to identify which browser tab they want to access. Not having an icon is just as unprofessional as using the default Twitter egg instead of your iconic mark.

Way-back-when the standard file format for favicons was .ico (basically a compressed .png file or files). Most browsers still support .ico and ancient browsers (we’re looking at you, Internet Explorer) will only display .ico files. Time has moved on and favicons are commonly PNG files.

However, we’ve moved beyond using a favicon only for web browsers. The introduction of app tiles and touch icons across Windows, Mac, iOs and Android, adds a multitude of size requirements from a mere 16px x 16px right up to 512px x 512px.

Depending on the type of website you are running, you may need one size or many from your logo designer. We typically provide the site icon at 512px x 512px and can provide additional sizes if required. You’d be best asking your website developer for the ideal size. If you are more DIY with your website, this deep dive favicon guide should help.

Sizes should only be required for use on screens. When it is used for print, you can specify the size of your logo to the print company or designer creating the final print artwork. Assuming the print company/designer have received the correct vector file type, they will do the magic for you.

The biggest file size I would provide is 1920 pixels wide, simply because it’s big enough to fit across the entire width of a full HD (1080p) monitor, but not so big that it’ll take up an enormous amount of storage space.

However, like everything this can change. The majority of 4K displays come with 3840 x 2160 pixel resolution, which is exactly four times the pixel count of full HD displays (1920 x 1080 pixels).

But this is about receiving your logo in the sizes for the most common situations. Otherwise you could be paying your designer to prepare your logo file for a million and one scenarios, which would be time consuming and costly.

If you own the copyright and have the original artwork files, you have the ability in the future to export your logo at any size you might require.

As well as the maximum size, you’ll also need a smaller and a medium sized logo for use on screens. However, due to the infinite scenarios, what these sizes should be is quite subjective!

As social media is a common use case, I’ll often refer to this excellent guide on social media image sizes which is kept up to date to help me deliver useful sizes to clients.

If you have a specific use case, speak with your designer and ensure that size and file type is included in the project.

In the case of a brochure, or packaging, owning the Copyright and Intellectual Property Rights typically isn’t important. Most likely you would be unable to edit the files anyway.

If you’d like a new version or edits, you’ll be happy to pay your designer to make those changes. In this situation you have the rights to use the end product, and copyright for the work stays with the designer.

However, if you do not own the intellectual property and copyright of your logo, you could find issues down the line. It’s a complex debate, with views on both sides of the fence.

It will always be cheaper to not own the copyright. So, if price is your main motivation, don’t expect to own the copyright. However, that means you can’t trade mark your own logo, as you don’t own the copyright.

You also won’t get the original artwork files and will be unable to have another designer work on your logo in the future. In fact, any alterations done to the original work of a graphic designer without their permission is unlawful, so it is always advised to pay for these rights.

If you value owning the copyright to your own logo, it is worth discussing this up front with your designer. You will need a signed document which includes an image of the logo transferring the Intellectual Property Rights of the logo over to you, the client. Make sure you also get a copy of the original artwork files as part of the deal.

It’s a complex topic, but you can learn more about it, and what went wrong for Innocent Smoothies when they didn’t own the IP to their logo, in this article.

You should always receive a Brand Identity Document with your logo files. This will outline how to use your logo in the correct manner to stay within the bounds of your overall brand identity. Your guidelines will include all the information on font files, colours used and anything else you need to know.

Your brand identity documentation is also very useful for any work with other designers. It will ensure any work another designer does for you is on brand, and will make it easy for you to share essential information such as colours and fonts. 

Logo font files

Your designer should provide information on how you can access the font files used to create your wordmark. Although sometimes this can be completely custom, depending on the project scope and budget available.

Any additional information regarding the alignment and kerning should be included within your brand identity document so as to keep a uniform design.

You should (almost) never receive the font file through a transfer as this would (in almost all cases) be breaking the End User License Agreement (EULA) of the font license. Instead you can purchase a font license yourself if you need to.

About the author

Jo Pickering

Jo Pickering is Kabo Creative's graphic designer. A qualified fine artist, Jo helps businesses to stand out with logos, branding and design work. She writes actionable guides on all things design, and is an active member of Cambridge's design community.

More about Jo >