The Right Logo Formats

19 March, 2017 / Published in Web Development
Post Image

The use of Social Media for businesses is growing in popularity at an unbelievable rate, especially for Small Businesses who are more likely to choose to post regular updates about their products and services through the use of branded photography.  What we are finding is that a lot of businesses are incorrectly using the wrong image formats when applying their logo to images, and with repeated incorrect use and ill-advised copy and pasting of older logo formats, they are inadvertently ruining the display quality of their branding.

When you had your logo created, your designer should have provided you a number of different version of the logos for different uses.  You should have at least four versions of you logo

  1. Colour Version for use on a white background
  2. Black and White Version for use on a white background
  3. Colour Version for use on a black/dark background
  4. Black and White Version for use on a black/dark background

These versions should also come in an assortment of different file formats which will allow you to use the logo for different kinds of media.   The general file formats are JPEG, PNG, SVG and PDF/EPS/AI.  This means that at a minimum, you should have at least 16 different versions of your logo, and I'll explain below how to choose the right version. 

Now, unless you are a designer, you may not understand what the differences are between these formats - after all, they are all just pictures of your logo...  right?   Well, it is important to know what features each format has, and how knowing this can improve how you are using your logo.  I'll describe each below, and hope that it will help you to make the right decisions in the future.

JPEG Format

This is easily the most common format that we see used out in the wild.  It is universally supported for desktop computers, and the file sizes are relatively small, so your logo will download quite fast.  It sounds like a great format, except it does have a pretty significant limitation - the JPEG format does not support transparency of any kind.  This means, that when you put you logo on top of an image, it will include a white background around the logo which may or may not be what you are after.  There are plenty of so-called tools out there that will remove the white background - but these are generally not recommended, and we suggest that if you did want a transparent background to the logo, then you should choose a different file format than JPEG.


JPEG FORMAT:  White Box around the logo or risk terrible etching of logo with white artefacts around the logo.

PNG Format

Another very common file format is called PNG, and this format "does" support transparency - in fact, it supports what is known as alpha transparency, which means the transparency supports varying opacities from completely opaque through to completely transparent.  This is the major benefit over JPEG file formats, but it does come with a larger file size than JPEG. There is also one other issue with PNG which it has inherited from JPEG - which is that it is a raster file format.  What this means is that the image quality is fixed to the size of the image - and if you want to blow up the image or the logo to a larger size, then you are going to lose quality and sharpness in the logo, and your logo will start to look dull and blurry very quickly.  If you need transparency in your logo, and you don't need to blow it up larger, this is the format you should choose.

PNG Format

PNG FORMAT:  Beautiful transparency, but lacks support for resizing - shown here a stretched version of the logo looking fuzzy.

SVG Format

This format has been around for a long time, but is only recently becoming more and more popular - and this has to do with all the different devices we now use (e.g.: Smartphones, Tablets and those huge 27 inch desktop computers that everyone is buying).  So when you consider the differences in screen sizes that people may be viewing your logo at, you can never be sure exactly how large your logo is going to be viewed.  Nowdays, web developers have been moving over to the SVG (Scalable Vector Graphics) format because as the name stands for, it allows your logo to scale to an unlimited size without any quality loss whatsoever.  Furthermore, whether your logo is 1cm x 1cm or it is 10 meters x 10 meters, the file size of your logo will not change.  There is also another benefit to using SVG, and that is to do with High Density displays.   We have all got new smartphones with either a Retina Display or a HighDPI screen, which makes your text look super sharp - well SVG will natively support these High Density screens, and will render your logo at the sharpest quality that your screen can display.  The drawback with SVG is support - currently, the best place for using SVG is in web design, although lots of apps and social media websites have not yet taken to supporting this file format yet.  If you are using your logo on your own website already, make sure it is in SVG format so it looks as sharp as it possibly can.

SVG Format


I have put these three formats in together because they are each provide a similar function for your logo.  They are the print file formats that are used when you send your logo to the printer for Business Cards or Letterheads or anything else that requires professional printing.  There are some slight differences here with the file formats, but generally, they are all of a very high quality (lossless).  If you needed to watermark an existing photo with your watermark, we would recommend using one of these formats in Photoshop to overlay the logo and save the photo out again as a JPEG (Photos generally don't need transparency).


If you find that you don't have the appropriate formats for your logos, please speak with the designer that created your logo, as they will generally have these files saved in their archives, but in case they don't, let us know and we may be able to recreate your logo and provide each file format to you in all 4 of the versions we describe above.   We recently recreated the logo for Western Screens and Blinds here in Bacchus Marsh, which helped them to improve the image quality of the logo they were using, and also correct the "Orange" colour in their logo which had turned a little too red from re-saving the logo as different formats and resizing the logo over a period of time.

We can provide you with a logo recreation service at Programmable Soda - this work is done by quotation, as the actual cost will depend on the complexity of the logo and the quality of the files you have available to use.  If your logo is not looking sharp, or the colours aren't quite right - get in touch and we'll let you know what we can do to get you back on track.

Tagged under: