How to have a non-blurry logo on the platform

You’ve uploaded your beautiful logo to your Kadanza installation and you’ve noticed that your logo looks blurry. Don’t worry! The reason is simple just like the solution. Let’s check it!

When you upload a logo with exactly the right pixel measurements for the area you want to target, the problem of blurriness can appear. The resolution of the screen is the precise cause.

The image you see on your screen is basically made up of a bunch of tiny pixels that each display a different color regardless of what kind of device you’re using. The resolution of more recent devices is typically substantially higher than the existing ones.

In short, the browser is trying to interpolate more pixels into fewer pixels and the browser needs to make calculations. As a result, basically, multiple pixels are fighting for one.

How can we help the browser to make better calculations?

Preferred option: Upload your logo as an SVG

SVG stands for Scalable Vector Graphics. “The SVG file format is a popular tool for displaying two-dimensional graphics, charts, and illustrations on websites. Plus, as a vector file, it can be scaled up or down without losing any of its resolution.”

The SVG format doesn’t have any pixels. Since the blurriness is related to the pixels, we recommend you use your logos in an SVG format. Because SVGs are vector based, they don’t have any pixels inside them and can be used at any scale on any screen without blurriness.

→ How to make an SVG file

There are several options to make an SVG file but we suggest using one of the following:

1. Using Adobe Illustrator: since it is a vector-based design tool, it is easy to create or edit vector graphics (read more)
2. Figma: comes with lots of good features to help you to create good websites as well as SVG files (read more)
3. Sketch: there are lots of options to export in an SVG file (read more)

Fallback option: Use your logo size closer to the rendered size

If you decide to follow this option, you need to scale your logo to the appropriate size. You must double the pixel dimensions for every logo you upload in order to create Retina images with enough data for every pixel.

For the text-based logos (around 7 letters like Kadanza), the width of the ideal logo for the website should be around 200px, and the height should be around 50px.