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 it’s 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 logo that you would like to appear clear, sharp and crisp, use SVG format. You can use plugins like SVG Support, that 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 image in SVG format, be sure to upload the (2x double sized) retina logo for your website so it will look sharp and crisp. Read more here.