Fixing A Blurry Logo - Part 1 (PNG) - Web Design Blog - Digital Lychee

Skip to content

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.

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:

1. Right click on the logo visible on your website.
2. 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:

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:

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 CSSIn Squarespace, you’re looking at something more like this:Design > Custom CSSWhen you’re there, add code that looks like this:

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 IdentityDifferent 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 & TitleOnce 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.

← Previous PostNext Post →

Share on Social Media

Recent Posts

• Plugin Studio Launch — WordPress & WooCommerce Development
• Latest Client – Cheltenham Spiritualist Church
• Latest Client – British Chinese Council
• Latest Client – Spa Property Solutions
• Latest Client – Holst Victorian House

Friend of Ted left us a 5 star review on Manual 03 Nov 2025 × All Reviews 5.0Manual 5.0Overall Rating5.0 47 reviewsReview Us Friend of Ted 03 Nov 2025 James is knowledgeable in his field, produces fabulous work and keeps a good list from start to finish to ensure your finished project is perfect.Read moreRead less Holst Museum 29 Oct 2025 Responsive and well organised James is skilled in understanding requirements and developing solutions in a timely and cost efficient manor. It is easy to develop and maintain a structured dialogue as James has excellent communication skills. Discussions about feedback and changes are always well received and acted upon quickly. In addition to providing web services James has been very helpful in assisting with any IT related issues.Read moreRead less Susan Baggott 22 Oct 2025 Website design and set up James has put together a brilliant website for us a Cheltenham Spiritualist Church. He put forward plenty of ideas and suggestions for the design and how to spread the word to the largest audience. James was very enthusiastic with a great attention to detail. I would thoroughly recommend his services.Read moreRead less Yue He ParkinsonBritish Chinese Council 16 Oct 2025 James Golding has done an outstanding… James Golding has done an outstanding job designing the British Chinese Council website. His creativity, attention to detail, and deep understanding of our mission truly shine through every page. The site beautifully reflects the unity, professionalism, and forward-looking spirit of the British Chinese community. We’re so grateful for his dedication and talent in bringing this vision to life!Read moreRead less Cassidy Porter 21 Aug 2025 James was absolutely amazing in creating the website for NL Contractors. We couldn’t be happier with the service. Even though we’re based in NZ, communication was spot on and super quick, making the whole process stress-free. The final result, both the website and the Google Business page, was delivered to the highest standard. Highly recommend!Read moreRead less Daniela Hankova 14 Mar 2025 I've gotta say, working with James on my website was a fantastic experience. What really struck me was how quickly he always got back to me and how genuinely helpful he was, even when I was being a bit of a pain and changing my mind! He was always patient and took the time to explain everything, which I really appreciated. Compared to my previous web designer experiences, it was like a breath of fresh air. James is just a genuinely nice, kind, and stand-up guy - you don't find many like him these days. Seriously, I can't recommend James enough. He created a beautiful website for me, and it's a huge relief knowing I have someone reliable to turn to for any future website needs.Read moreRead less Sarah Gilbert 31 Jan 2025 Thoroughly lovely guy and absolutely brilliant service I echo all previous comments praising James. I think he’s one of the best freelancers I’ve had the pleasure of working with. I couldn’t think of anyone better to build me a beautiful website. He achieved exactly what I wanted (and more). I would recommend him in a heartbeat. Lovely guy, extremely knowledgeable, patient, brilliant communication throughout. Thoroughly lovely guy and absolutely brilliant service.Read moreRead less Bristol Carpentry & Construction Ltd 05 Dec 2024 Top business and very helpful. We first contacted James in 2021 to design a logo for our business and he recently designed a website for us. James was very patient, offered great advice and talked us through exactly what was going on. I wouldn’t hesitate to recommend James to anyone who is looking for a logo design or website for their business.Read moreRead less Bristol Carpet Co ltd 13 Nov 2024 Brilliant web site Brilliant web site Being a complete technophobe the thought of where to start creating a new web site was very daunting. James was amazing and made the whole thing seem easy . Nothing was too much trouble even when I was asking very basic questions on how our web site would work. He created our vision in a couple of weeks, did amendments swiftly and in a professional way. We now have great interaction with our web customers. This has no doubt increased our sales. Thank you JamesRead moreRead less load more Cheltenham Spiritualist Church

I designed this logo for Cheltenham Spiritualist Church, an SNU-affiliated church with a long history of spiritual service, healing, and community in the heart of Cheltenham. The identity needed to reflect the Church’s guiding values of hope, light, connection, and spiritual growth, while honouring its heritage dating back to the 1920s.

The logo centres on an emblem of two open hands cradling a radiant sun, symbolising the Church’s mission to uplift, heal, and share light through spiritual understanding. The hands represent care, compassion, and human connection, while the sun embodies divine truth and eternal life — a timeless expression of Spiritualist philosophy.

A calming shade of purple was chosen as the primary colour, representing spiritual awareness, healing, and peace, and conveying the welcoming warmth the Church offers to all who visit. The logotype uses Forum, a classic serif typeface with subtle vintage character, echoing the elegance and spirit of the 1920s — the decade in which the Church was founded.

Together, these elements form an identity that feels both historic and hopeful, reflecting Cheltenham Spiritualist Church’s enduring role as a place of light, love, and community.

Click here to view the website.

CLOSE British Chinese Council

I designed this logo for the British Chinese Council (BCC), a non-partisan organisation working to unite Chinese-heritage communities across the UK and build a shared national voice. The identity needed to represent harmony, connection, and mutual respect between British and Chinese cultures while remaining professional and contemporary.

 

The logo centres on a circular icon inspired by the yin and yang symbol, reflecting balance and unity. One half features the Union Jack, symbolising the Council’s civic focus in the UK, while the other depicts a red and gold Chinese dragon, representing heritage, vitality, and strength. Together, these elements form a powerful visual metaphor for cross-cultural partnership and shared identity.

 

An oriental-style sans serif font was chosen for the organisation’s name beneath the icon, combining clean modernity with subtle cultural character. This pairing of symbolism and refined typography creates a mark that feels both inclusive and authoritative — perfectly aligned with the BCC’s mission to bring communities together through dialogue, respect, and shared purpose.

 

Click here to view the website.

CLOSE Spa Property Solutions

I designed this logo for Spa Property Solutions, a trusted home renovation and maintenance contractor based in Cheltenham. Their services cover everything from small-scale property upkeep to large renovation projects, helping clients transform and maintain their homes with confidence.

The logo captures both professionalism and heritage, featuring a stylised representation of a spa building with a colonnade — a nod to Cheltenham’s iconic architecture and the business’ name. The warm orange and yellow-amber tones convey energy, positivity, and transformation, while the dark grey typography grounds the design with a sense of reliability and strength.

This balance of vibrant colour and architectural symbolism reflects what Spa Property Solutions stand for: craftsmanship, trust, and lasting quality in every project they undertake.

Click here to view the website.

CLOSE NL Contractors

I created this logo for NL Contractors, a superior contracting service based in Auckland, New Zealand, providing fencing, retaining walls, gates and boardwalks for a range of satisfied clients. They’re brought to you by Nick Liefting, recognised as the World’s Fastest Fencer, who brings decades of experience, innovation, and passion for craftsmanship to every project.

This logo, a refresh of their existing logo, very aptly represents the services they provide and what they’re passionate about, as it blends the NL of their name into a fence, something for which they have extensive experience. In addition, whilst the green in their logo represent nature and the great outdoors where they work, the brown reflects the wood they often work with to build fences, walls, gates and boardwalks for their clients.

Click here to view the website.

CLOSE Families Reunited

I created this logo for Families Reunited, a fantastic genealogical research team based in the UK, who specialise in family tree building, finding birth, death & marriage certificates, and tracing lost-lost relatives across the UK and Ireland.

They wanted the logo to strongly represent what they do and what they’re passionate about, which is reuniting families. Symbolically, the tree is the parent in the family, whilst the parent is surrounded by their children. In addition, the orange and green colours represent those of the Irish flag, since the Families Reunited team have an extensive background working with Irish records and research, as well as that being where they carry out much of their research.

CLOSE Wood Fired Scotland

This is a clever yet straightforward logo created for Wood Fired Scotland, a new company that offers executive experiences near Edinburgh, Scotland, in their secluded, luxurious log cabin.

Not only does the logo incorporate the name of the company, but it also incorporates a wood burning oven with a flame, a feature offered to guests in their cabin. The colours used in the logo and brand guidelines reflect those used in the Scottish flag.

CLOSE The Cleeve & Cotswolds Directory

This is a simple logo, created for a local business directory, The Cleeve & Cotswolds Directory. Based in Bishops Cleeve and serving the wider Cotswolds area, the directory is completely free for all profile owners, a fantastic community resource, supporting even the smallest of local businesses and non-profits.

The logo was designed to be elegant, easy on the eye and match the brand colour of blue. It is simple, yet feels very sophisticated and high-class, helping users to feel that even though the directory is free, it is a fantastic resource and will serve the community well.

Click here to view the website.

CLOSE Soteria's Wings

This is a very simple logo created for Soteria’s Wings, an app I built to help General Aviation pilots ensure their safety, by ensuring the suitability of departure and arrival aerodromes through take-off, landing and weight & balance calculations.

With a minimalistic feel, the logo simply incorporates the silhouette of an aircraft, whose vertical stability (or fin) replaces the ‘I’ in both words.

Click here to view the website.

CLOSE Rocket Girl Coaching

I created this logo for Mary, an Accessible Aviation Consultant, Disability Equality Trainer and Online Executive Coach, who runs Rocket Girl Coaching.

The logo incorporates a rocket taking off and the cloud beneath it, whilst maintaining a very professional feel, also highlighting the key words ‘Rocket’ and ‘Coaching’. The navy blue colour was created with Mary’s brand identity to represent the night sky as the rocket takes off.

Click here to view the website.

CLOSE Property by Number 35

This logo was design in conjunction with Andrea from Number 35, a fashion label that has featured on TV programmes such as The Good Wife. It was designed for a luxury short-term property rental business created by Andrea.

This is a word-based logo that emphasises that the luxury properties on offer come from the designer brand, to reinforce to customers that they’re getting a great experience. The orange square, in-keeping with the brand identity, highlights the ‘Pro’ in the word, further emphasising the type of experience guests can experience.

Click here to view the website.

CLOSE Patchway Community Association

I created this logo for the Patchway Community Association, a registered charity that runs the community centre for the people in Patchway, North Bristol.

It’s a fairly simple logo, which includes the strap-line and shows a group of people supporting each other to a common goal, reaching for the sky. This well-represented the community association and what they aim to do for the people of Patchway and surrounding areas.

Click here to view the website.

CLOSE Otley Spiritualist Church

I created this logo for the Otley Spiritualist Church, a wonderful little SNU-affiliated Spiritual Church, based in Otley, Leeds.

I was given free rein over the design of this logo, so I wanted it to reflect their ethos and the love and healing they send out around the world. The holding hands represent friendship, whilst forming a heart, the symbol of love. It’s all surrounded by a circle, representing the globe.

Click here to view the website.

CLOSE LS Spray Renders

I created this logo for LS Spray Renders. They are a small rendering company based in North Bristol.

Similar to other logos that I have created, they wanted to ensure that the work they do was reflected in the logo itself. Therefore, the logo incorporates the roofs of houses on they would typically work. It also incorporates their mobile numbers, as well as a custom font.

CLOSE LS Plastering & Rendering

I created this logo for LS Plastering & Rendering Specialists. They’re a small plastering and rendering company based in North Bristol.

Similar to other logos that I have created, they wanted to ensure that the work they do was reflected in the logo itself. Therefore, the logo incorporates the roof of a house, where the roof itself is replaced by a plastering trowel.

CLOSE Coach Nick Paul

I created this logo for Coach Nick Paul, an inspirational coach based in the UK, aiming to empower you on your journey to personal and professional growth.

He wanted the logo to be symbolically very strong. Here, the phoenix symbolises rebirth and renewal, symbolising how Nick aims to help you when you work with him. The shield represents protection, identity and status, with Nick aiming to give you a strong personal and professional identity. The orange and blue colours were also chosen as they represent optimism and authority respectively.

Click here to view the website.

CLOSE Bristol Carpentry & Construction

This is the logo I created for Bristol Carpentry & Construction, a local carpentry and construction business based in the North of Bristol.

They wanted the logo to represent what they do as a business, so I created it with a typical house that they might work on, with the actual name of the company featuring as a flat-roofed extension. In addition, it also features decking at the front of the house. The colour green was used to portray nature and a positive feeling about the company.

Click here to view the website.

CLOSE Active in Learning

This is the logo I created for Karen at Active in Learning. Karen is a French and English language coach, based in Méribel, in the French Alps.

This logo was created with the flags of both countries to represent the languages Karen coaches, as well as using the flags to replace the I’s of both words and the fact that she’s a teacher, with students in a virtual classroom.

Click here to view the website.

CLOSE Scroll to Top