Why Is My Logo Blurry?

“Why is my logo blurry on the website?” is the question one of our clients asked while trying to build a website for her business. The reason the logo gets blurry is that there are not enough pixels to make it appear sharp. So, what is the resolution you need for the logo to be used on a website?

Logo resolution

You have probably heard that files for online usage need to be 72 dpi and files for printing need to be 300 dpi. That is exactly what our client referred to while saving her logo for the website. But the logo was still blurry. The reason for that is the original file was created at a small size (about 2″ wide). What this means is that at 72 dpi the logo becomes only 144px wide. This is too small even for website usage.

Logo Size Conversion table

File Size / Resolution	72 dpi	150 dpi	300 dpi
2″ wide	144 px	300 px	600 px
4″ wide	288 px	600 px	1200 px
6″ wide	432 px	900 px	1800 px
8″ wide	576 px	1200 px	2400 px
10″ wide	720 px	1500 px	3000 px
	Resolution is too low for most applications	Resolution is safe for online usage	Resolution is high enough for printing

As you can see from the logo size conversion table, the actual file size depends not only on the resolution, but on the art board measurements as well. So, the formula to calculate the true file size in pixels is:

File size in inches  x  Resolution = True File Size

How to find the measurements of the logo?

To find the true size of your logo, locate the logo file on your hard drive. Right click and select “Properties” (or “Get Info” on Mac computers). You will then see the file measurements (762 px x 400 px or something similar)

How to fix low resolution logo?

If you still have the original file that was used to create the logo, you are in luck (more than likely):
1. You can enlarge the art board area (if it was 3″, make it, for example, 10)
2. Export at higher resolution (use the logo size conversion table above to figure out which resolution you need to save the file at)

If you don’t have the original file, things become more complicated. You can’t just make the dpi settings higher. You will end up with the quality like in the image on top of this page where the logo was enlarged from 72 to 300 dpi. Your logo needs to be re-created (re-drawn in vector format so it can be scaled to any size). If you can’t contact the designer and the original files have been lost, contact us. We do offer logo re-creation services.

What is the best logo format for the website?

If the background color on your website is not white, then you will need a transparent .png file with at least 400px wide (regardless of resolution). If the website has a white background, then you can use a .jpg file with at least 400px in width.

When someone creates a logo for you (or if you do it yourself), make sure you get the final logo in the following formats:
– true vector file (.pdf or .eps);
– color (CMYK mode);
– color (RGB mode);
– grayscale;
– black ink only;
– raster files (.jpg, .tiff)  in both color and B&W with resolution of 3000 dpi, 1200 dpi, and 600 dpi;
– transparent (.png) files with the above resolution.

You should have at least a dozen of files with your logo. Having logo in variety of formats will allow you to use it seamlessly throughout different media.

If you have a logo that appears blurry on the website, we can convert it for you into all formats and sizes for your future use. We will provide you with a vector version so you can make it as big as you want, even to be printed on a billboard! Prices start at $40.

CONTACT US