What is the recommended logo size for the Debut theme?

[SoundsGood]

Hi guys.

In the Debut theme, what is the recommended Logo size ?

Thanks!

[Olivia · Accepted solution]

Hey, @SoundsGood!

Olivia here from Shopify Community. Thanks for sharing your question.

The recommended logo size for all Shopify themes is 512 x 512 px. Check out the table below for further recommended specifications, and image best practices across our platform:

Image type	Dimensions	Format	Size
Header image	2048 x 512 px	PNG or JPG	Less than 20 MB
Logo image	512 x 512 px	PNG or JPG	Less than 20 MB
Product image	Ideal size: 2048 x 2048 px Maximum size: 4472 x 4472 px	PNG or JPG	Less than 20 MB

In the Debut theme you can even adjust your logo width from a minimum 50px to a maximum 250px after you upload it under Admin > Online Store > Theme > Customize Theme > Header as such:

You must even be interested in some photography best practices to learn more about the do's and don'ts of:

• Image composition
• Color and lighting
• Image quality
• Image styling
• + examples

If you have any other questions, don't hesitate to reach back out.

Warm regards,

[SoundsGood]

Awesome.  Thank you!

[Olivia]

You're very welcome, @SoundsGood.

Don't forget to bookmark the Debut Theme Documentation for other tips and tricks while you build your site.

Warm regards,

[SoundsGood]

That's a great idea. Will do. Thanks again!

[seliciousteas]

I did this but my logo is still very pixeled and it's a vector image.

[Olivia]

Hi, @seliciousteas!

Thanks for reaching out in this thread.

By default, vectors are not made of pixels and therefore can be scaled without the risk of losing quality. With that being said, what you describe sounds as though the preview of the vector is appearing pixelated once in your theme.

In this scenario a vector logo will likely have a SVG file type, which is not supported in your theme settings. Supported file types for logo uploads include:

• .jpg
• .gif
• .png
• .webp

SVG file types on the other hand would need to be hardcoded into your header to be added to your site. If you are not familiar with making custom code changes, I recommend using a PNG of your logo to keep high resolution and compatibility with your settings.

Let me know if that helps or if you have further questions.

Warm regards,

[Olivia]

Hi, again @seliciousteas.

I just wanted to touch base to see if the solution I provided worked or if you still had further questions around this.

Please do let me know.