How do I design a website logo so it's not pixelated? [duplicate]

Question

I designed my website logo for WordPress but it's too small, pixelated, and unappealing.

I'm designing my logo in sketch. What artbord size should I design on? What size do I export?

What size is the standard? How do I design a logo in sketch so it's high res? And not pixelated while PNG?

Well, first of all, you should export the logo in the size that you wish to display it. Browsers, in general, are not great at rendering images at anything but 100%. Though this doesn't really affect photos as much as something like a logo. So if your theme squishes the logo down to fit whatever space it's been reserved, it may look a bit blurry. I wonder if it's really pixelated or blurry? If it's pixelated, it probably has nothing to do with wordpress or the browser. What does the image look like if you preview it as such after the export? Also does it look any better before the export? — Joonas, Jul 8, 2018 at 16:17
Is there some reason you can't export your logo as an SVG, and use that in your website? — Billy Kerr, Jul 9, 2018 at 8:11

Sobhan · Accepted Answer · 2018-07-08 17:13:19Z

I understand that you want to design a logo formatted as PNG but with high resolution.

My solution :

You can export the PNG file 3x bigger than whatever you designed in Sketch and Use it with real size.

Example :

Your logo is 40x40 px.

Export it 3X bigger so it's going to be 120x120 px.

now use it on your website and set the width and height of your image to 40x40px (Real size).

This would solve your problem, but you should remember that your file size is gonna be a bit larger.

1 Answer 1