Why Is My Logo Blurry?

No results found. Try again with different words?

Search must be at least 3 characters.

Why Is My Logo Blurry?

Usually small images such as logo look (ex: 200px X 200px) blurry on High Definition screens such as MacBook Pro. That is because on the HD screens actually use twice the physical pixels to display the logo (ex: 400px X 400px). So the logo is just resized (scaled UP) causing it to lose its clarity.

To solve this:

Option 1: Use SVG Image Format (Recommended)

SVG stands for Scalable Vector Graphics. As the name suggests, it’s a scalable image format that does not have any pixels. So for any important images such as a logo that you would like to appear clear, sharp, and crisp, use SVG format. You can use plugins like SVG Support, which allows sanitized SVG uploads.

If you’ve uploaded your logo in SVG format, you do NOT need to use the Retina Logo option explained below.

Option 2: Retina Logo

If you do not have the image in SVG format, be sure to upload the retina logo for your website so it will look sharp and crisp. The retina logo should be proportionally larger at least 2 times. Read more here.

Retina Logo, Astra 3.0+
Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form