Have you ever uploaded a beautifully designed logo to your website, which appears to have the right dimensions for where it is going, only to find that it appears slightly blurry when compared to the original file? Well, you’re not alone. It’s something that happens fairly often and the reason is a lot simpler than you might think. Let’s take a look.
What are the Typical dimensions of a Website Logo?
On any website, be it WordPress, Squarespace, an HTML website or any other website type, there will be an ideal size for your logo, to prevent it from being both too small that it becomes insignificant and too large that it becomes overpowering. Typically, these are the pixel dimensions you want to aim for:
- 250px (width) x 100px (height) for a rectangular logo
- 160px (width) x 160px (height) for a square logo
Now, your logo can of course vary slightly from these but proportionally, they are what you should be aiming for. For my own logo, it has dimensions of 239px wide by 50px high.
element.style {
height: 50px;
width: 239px;
}
Why is my Logo Blurry, even with the Right Dimensions?
The issue of blurriness arises when you upload an image that has the exact pixel dimensions of the space you are targeting. The exact reason has to do with the resolution of modern screens.
No matter what device you are using, your screen is essentially made up of lots of tiny pixels, which display various colours, making up the image you see. More modern devices tend to have a much higher resolution than older ones. By that, I mean that for the same viewing window size, the screen is made up of many more, smaller pixels compared to that of an older device, resulting in a sharper display.
If we take Apple as an example, they have coined the phrase ‘Retina’ to refer to their higher resolution screens. Picking a specific example, their iPhone 3GS has a non-Retina standard display, with a pixel density of 164.83 pixels per square inch. Their iPhones 4 and 4S both have a Retina display, where that pixel density figure increases to 326, almost double that of the older model. You can see what I’m talking about with the images below. For the same physical dimensions, the Retina display of the iPhone 4 is much sharper than that of the iPhone 3GS.
Now, I hear you asking, ‘but what does this have to do with my logo being blurry?’. When you upload a logo that has the exact dimensions of the space into which you are placing it, you’ve specified the physical dimensions at which it should be displayed, as well as providing a file with those exact stated pixel dimensions.
The problem is, on a Retina display, the pixels are much smaller. In our example above, that’s approximately 2x smaller. So, taking my logo as an example, for the same physical size, where a standard screen would have 239px by 50px, a Retina screen would have 478px by 100px. If you’re uploading an image that is only 239px by 50px, into an area that is 478px by 100px, the logo image dimensions will be stretched 2x, to fill the specified space, resulting in it becoming blurry. You’ve essentially uploaded a logo that displays fine on standard definition screens, but that will appear blurry on high resolution screens.
How do I Make Sure my Logo is not Blurry, on all Screens?
With most website builders, including WordPress, you are only able to upload one image file for your logo, without a second option for higher resolution screens. That leaves you vulnerable to a blurry logo, which I’m sure you won’t want, especially when trying to impress new clients or visitors to your website.
There are three main ways you can prevent this from happening, whilst most web design platforms aren’t able to provide direct support for both standard and high-resolution screens. These are:
- Uploading a version of your logo that has 2x the required pixel dimensions.
- Uploading an SVG version of your image, instead of the typical PNG format.
- Installing additional plugins, or software, to provide this functionality.
Each of these methods has its pros and cons, as with anything. In this instalment, we’ll look at the first method, step by step, to see how we can achieve a sharp-looking logo on all screens.
#1: Decide on the Size You want your Logo to Be
The first step is relatively simple. You need to decide how big you want your logo to be. Earlier in this instalment, we saw that typically your logo should be no bigger than 250px wide by 100px tall. Whatever dimensions you decide to go with, you need to set this in your website.
#2: Set the Size of the Logo for your Website with Styling Code
To set the width of your logo, you need to add some styling code to your website, the programming language of which is called CSS (or Cascading Style Sheets). If you’re not familiar with coding, don’t worry. I’ll talk you through it. The basic principle is that you need to identify what ‘classes’ or ‘tags’ your website builder has used to style your logo and then you apply your own custom styling to those tags. To find out what tags you need to use, you can use your browser. Whilst the way to find this out is largely similar across browsers, there are subtle differences. For example:
- Right click on the logo visible on your website.
- Click on ‘Inspect’ (Chrome & Firefox) or ‘Inspect Element’ (Safari).
For a WordPress website, in the right-hand part of the window that appears near the bottom, you’ll see something that looks a bit like this:
.custom-logo,
.site-header .logo {
...
}
The classes used in this example (.custom-logo etc.) are typical for a WordPress website, but might be different on your WordPress theme, or on a different platform. For example, on a Squarespace website, they’ll look more like this:
.logo-image .logo img {
...
}
Whatever these classes are, it is these that you will need to use to add the relevant styling code. To find the area you can use to add the code, in a WordPress website, you should generally head to:
Dashboard > Appearance > Customise > Additional CSS
In Squarespace, you’re looking at something more like this:
Design > Custom CSS
When you’re there, add code that looks like this:
.custom-logo,
.site-header .logo {
max-width: 100% !important;
width: 239px !important;
height: auto !important;
}
As I’ve mentioned above, you’ll need to change the tags (classes, as they’re more commonly called) that are outside of the curly brackets, depending on what you’ve found is used specifically with your website. The content of the brackets, however, should be copied no matter what platform you are using.
The highlighted width is the one you want to pay attention to. After all, that’s what you’re using to set how wide your logo is. You can set this to whatever you like, depending on how big you want the logo to be on your website. It is important to leave the height as ‘auto’ though, as it will ensure your logo has the right proportions (aspect ratio) no matter how wide it is, so it won’t ever look stretched or distorted. Don’t forget to save/publish the code you’ve just added, or you won’t see your changes!
#3: Create a Logo File with 2x the Dimensions You have just Set
As we’ve seen, to ensure that you have a logo that is not blurry or pixelated on all screen types, you need to upload a file that has double the pixel dimensions compared to those that you just set with the custom coding.
For example, my logo has dimensions that are specified to be 239px wide by 50px tall. Therefore, I would need to upload an image that is 478px wide by 100px tall. If you created your logo yourself, then you simply need to create another one with the correct dimensions. If someone else created it for you, then get in touch with them, to provide you with a version that has the correct dimensions.
#4: Upload your New Logo Image
Once you have set the width of your logo and created a file double that size, as per steps 2 and 3, you then need to upload the image file to your website. The steps you need to take to do this can vary a bit between platforms. For example, typically with a WordPress website, you need to head to:
Dashboard > Appearance > Customise > Site Identity
Different themes may have subtle differences as to where you upload the logo image file, but it will always be available in the ‘Customise’ area of WordPress. For a Squarespace website, you need to head to:
Design > Logo & Title
Once there, you simply need to upload your logo file, which will have dimensions twice those that you have specified with the styling code.
The Perfect Result of our Logo Styling
That’s all there is to it! Once you have set the size of your logo with the coding, and you have uploaded a version to your website that is twice as big as the dimensions you’ve just set (not forgetting to publish all your changes, you should see a marked difference in the sharpness of your logo.
This method works very well for other images on your website as well. For example, take a look at the Trustpilot badge I created, to display my TrustScore on my website and to link to my profile. The first image is one that is twice the size of the specified dimensions, as per my blog and the second one is what it would look like had the image file had the same dimensions as those specified.
Whilst the original image wasn’t especially blurry, you can see that using the method I have just shown you, the newer version of the badge is just that little bit sharper, which is exactly what we wanted to see.
Stay tuned for the next instalment, where I will take you through another method to sharpen images such as your logo, which relies on replacing your PNG logo image with an SVG version.
How will Digital Lychee Help You?
At Digital Lychee, I make sure that I tailor all my clients’ websites to suit their individual needs. In your initial consultation (free and no obligation, of course) we will discuss your needs in full and I can advise you on how best to create your logo (and other images) to make sure they are as sharp as possible on all possible devices. If you are interested in my services, or you want to find out more about my blog, I would love to hear from you. You can get in touch with me here.
Manual 5.0
