For your website, we need your logo and any available brand assets. The right file format is important because your logo needs to stay sharp and recognizable across different screen sizes, backgrounds and devices.
Ideally, we receive a true vector file such as an SVG. In this article, we explain why and outline the differences between SVG, PNG and JPG.
Which file format is best for a logo?
SVG: the best choice
An SVG is a vector file. Instead of pixels, the logo is made up of shapes and lines. This means it stays sharp regardless of how large or small it is displayed.
Benefits of SVG:
stays sharp on every screen and at every size;
can be scaled easily;
usually has a small file size;
supports transparent backgrounds;
individual elements of the logo can often be used separately;
suitable for different colour variations and animations.
If your logo was created professionally, ask your designer for the original SVG file.
Please note: not every file with the .svg extension is a true vector file. In some cases, a regular image has simply been embedded inside an SVG file.
PNG: a suitable alternative
A PNG is made up of pixels, but it can support a transparent background. This makes it a useful alternative when no vector file is available.
The downside is that a PNG can become blurry when enlarged significantly, and individual elements of the logo are more difficult to use separately.
If you do not have an SVG, preferably provide a high-resolution PNG with a transparent background, for example 2000 to 4000 pixels wide.
JPG: less suitable for logos
A JPG is also made up of pixels. It does not support transparent backgrounds and uses compression.
This can cause small blurry or distorted edges around text and clean lines.
JPG is a good format for photographs, but for logos we usually recommend SVG or PNG.
Why do we prefer a vector logo?
A properly created vector logo gives us much more flexibility when designing your website.
For example, we can:
display the logo sharply at any size;
use light and dark versions;
use the icon or brand mark separately;
incorporate shapes and lines from your branding into the website design;
adapt the logo for different uses, such as a favicon.
With only a PNG or JPG, these options are more limited.
AI-generated logos
AI tools can be useful for quickly creating ideas or an initial logo concept. However, the final file is often a PNG or JPG rather than a professionally created vector file.
This can cause limitations when the logo is used on a website or for other branding purposes. Common issues include:
the logo cannot be scaled indefinitely;
text and fine details may become blurry;
individual elements are not built as separate shapes;
different colour and size variations may be missing;
shapes and lines may not be suitable for use as separate brand elements.
An AI-generated logo can be a good starting point, but always check whether a usable vector version is also available.
Why is a professionally created logo useful?
A designer will usually provide more than just one logo image. You will often receive several files suitable for different purposes.
For example:
an SVG or another vector file;
a light and dark version;
a horizontal and vertical version;
a separate icon or brand mark;
files for both web and print;
defined brand colours and fonts.
This makes it easier for us to apply your branding consistently throughout your website.
What do we need for your website?
Preferably, provide the following files and information:
your logo as an SVG;
optionally an AI, EPS or vector PDF file;
your brand colours, preferably with HEX codes;
the names of the fonts used;
any available logo variations;
if available, the brand mark and wordmark as separate files.
If you do not have a vector file, provide the largest possible PNG with a transparent background.
How can you recognize a true vector file?
You can often check this by zooming in significantly. If the edges and text stay completely sharp, it is probably a vector file. If the logo becomes pixelated or blurry, it is most likely made up of pixels. Not sure whether your file is suitable? We or your designer can check this for you.
In short
For a website logo, SVG is usually the best choice. It stays sharp at any size and gives us the most flexibility when applying your branding. If you only have a PNG or JPG, we can often still work with it, but the possibilities are more limited. With an AI-generated logo, it is especially important to check whether a true vector version is available.