Logo file formats for the web - Snowfire

Are you the proud owner of a logo and want to upload it to a website, but feel unsure about what format is best to use? Below, we will explain the different formats.

What format is your logo currently?

Normally logos are made in vector format. They are based on images made up of vectors (a kind of mathematical lines). This makes the logos scalable. They can easily be sent, whilst maintaining a very small file size. But they can be blown up to such an extent that they can cover the side of a building. Vector logos are built in specialist programs, such as Adobe Illustrator. They have filename extensions like .ai or .eps.

Vector logos should not be confused with image logos made in programs like Photoshop. The latter makes the images based on pixels. These are not scalable, meaning they cannot be blown up from a certain size without compromising on quality. Image logos can become somewhat blurred in print material, but work fine 1:1 on the Web. Pixel-based image formats have the filename extensions .tiff, .eps, .psd, .jpg, .png or .gif. 

What will the logo be used for?

If you want to upload a logo to your website, use the following file formats: png or jpeg (usually shortened to jpg). Your advertising agency may already have prepared a folder for you with your logo saved in various Web-enabled formats. If not, then you will need image processing software, such as Photoshop. Just select “save for Web”. 

The various formats all have their pros and cons:

PNG

The best choice for logos used on the Web. The logo is saved with a transparent background. Png is great when you are uploading your logo on a colourful background on a website, in PowerPoint or in a Word document.  

JPEG

Jpeg is perfect for pictures and is the most well-known format. The background is also saved with the image, so it’s not recommended for use on several different types of background. The advantage of jpeg files is that they are fewer megabytes (MB) than a png for example. The disadvantage of the jpeg format is that every time the file is re-saved, the quality diminishes. 

SVG

SVGs are smaller in file size and can be animated and styled with CSS. Animations that you use on HTML elements can also be used on an SVG element. SVGs are scalable and will render pixel-perfect at any resolution. SVGs are also SEO friendly allowing you to add keywords, descriptions and links directly to the markup.

GIF

The GIF format is good if your logo doesn’t contain many colours. The advantage of GIF files is that they don’t take up many MBs, as the image is compressed to a pallet of a maximum of 256 colours. Before the arrival of PNG, GIF was the only way of achieving a logo with a transparent background. It can be a little tricky to get it to look good, however. 

Gif is most appropriate if you are making a little favicon for your website or need a logo for an animated ad where the file size cannot be too large. 

Ditte Hammarström has a background as an art director at advertising agencies both in Sweden and UK. She is passionate about user-driven design and to help entrepreneurs succeed online. Ditte is one of the founders of Snowfire design community, where agencies and developers collaborate on the Snowfire platform to help businesses grow online.