Skip to main content

Formatting Your Logo

How to format your logo for the Ricochet webstore. Best practices and techniques used by our design team.

Shandara Hart avatar
Written by Shandara Hart
Updated yesterday

Your logo is one of the most essential components of your store's brand. While modern design tools and platforms often include built-in features that simplify formatting and sizing, if yours do not, you may find this article helpful for tips and step-by-step guidance. If you are still in the design phase with your logo, check out THIS blog post for helpful insight first.

Fun tip: If converting your logo to a transparent PNG feels too difficult, you can simply upload it as a JPG and change the background color of your site's navigation and footer to match your logo’s background. This creates the illusion of a transparent logo.

Requesting A Logo From Your Designer

If you have hired a designer, they should provide you with a file for use on the web. Typically it comes in a PNG, JPEG, or SVG. We strongly recommend using a PNG.

If you are requesting a file from a designer, here is an example of what we would recommend asking them:
​
​Hello *designer name*,

I need my logo formatted for my website. According to the company that hosts my site, they recommend a PNG with a transparent background. It should be 72dpi and no wider than 500px. Can you do this for me? Thank you!

Formatting Your Logo Yourself

If you have designed your own logo and don't have access to professional software like Adobe Photoshop or Illustrator, no worries- you can still format it yourself using a free online PNG creator tool.

Note: If your logo already has a transparent background, you can skip this step.

Step 1: Remove the Background

  1. Go to www.onlinepngtools.com

  2. Click to create a transparent PNG

    • NOTE: If your logo is a JPG, you can quickly format it to PNG first with the option 'Convert JPG to PNG'

  3. Upload, drag and drop or paste your logo file in the editor on the left (you will instantly get a transparent PNG on the right)

    • The tool is designed to find the background color and erase it from the image. You can use the Tool Options section to make more adjustments.

      • For example, if your logo has a green background, change the color picker to as close a green as you can get. The preview will show you what parts of your logo are erased. This is represented by the gray and white checkered background on the right hand side. You may have to tinker with this to get it right.

      • You can also change the color localization with the "Match similar color tones" to a number percentage. This will take the color you've selected and any similar colors in your logo. In our example, our logo has a pure white background color so it's really good at finding and erasing the background color.

  4. Save the file to your computer

Step 2: Resize the Image File

  1. Find and open your new PNG on your computer.

    • Note: This should default to Windows Photos. If on Mac, use Preview instead of Windows Photos—the steps are similar.

  2. Click the ellipses (three dots) to the right of 'Edit'

  3. Click Resize

  4. Change the Width pixel count to 250. This will automatically hold the proportions of your logo but shrink the overall size.

  5. Click Save

Your logo is now appropriately sized and can be uploaded to the Ricochet webstore!

Recommended Specs

Export it as a PNG with a transparent background. The width should be between 250 and 500px.

Export it as a PNG with a transparent background. The height should be between 150 and 300px.

With square or tall logos, they can easily take up a lot of space on your visitors screens. A navigation for a website is typically meant to be more wide than tall. So if you have a really tall logo, it will feel really dominating over the rest of your content.

Did this answer your question?