“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 use 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 the 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 |
| Legend | 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 $30.
