Logo recommended resolution tips

I have no idea what any of the logo dimensions or aspect ratios are. 1 of them says “square shaped”, but doesn’t mention the recommended resolution minimum. The rest both doesn’t mention the aspect ratio and further doesn’t mention the recommended resolution, especially since the previews are all wide boxes that don’t match the expected dimension. This creates unnecessary confusion.

  • For aspect ratio, you could make the box the proper x:y dimensions so you don’t have to add more text.
  • For recommended minimum sizes, simply list it: 128x128 (256+ recommended) or something.
  • Some of the text is sorta bloaty and unnecessarily tedious (with broken examples). For example, the mobile one:
Custom logo url used on mobile version of your site. If left blank, `logo_url` will be used. eg: https://example.com/uploads/default/logo.png

If you actually go to https://forum.mysite.com/uploads/default/logo.png on your own site, it’s 404 (yes, swapping out mysite.com :stuck_out_tongue: ).

Even Custom url used on mobile version of your site is super lengthy/redundant where one couldve said the exact aspect ratio/dimensions in 1/2 that length. This is already obvious since the header was called “Mobile Logo”~

6 Likes

Possibly @johani can advise here and update our copy in Discourse to offer more detail on what is recommended.

4 Likes

The way the logo size is set in CSS relates to the font-size used. As the base font-size is increased, so will the size of the logo, this ensures that the UI scales with font-sizes.

We have a general recommendation that the large and mobile logos should be a wide rectangular shape. This is based on the shape of the header and we recommend that the small logo be a square shape because of the way we place it in the interface.

Here’s something more specific

Large and mobile logos
wide rectangular shape with a height of 120px and an aspect ratio greater than 3:1

Small logo
Square shape with a resolution of 120x120


A couple of things I would advise against doing:

  1. don’t use logos with a height greater than 120px because it is probably excessive since 120px already factors 17px font-size on HiDPI screens.

  2. don’t use images with height greater than width.

I have a small PR to update the copy and will get that merged in a bit

https://github.com/discourse/discourse/pull/6819

10 Likes

I suggest merging it, I see no downside to improved copy here.

4 Likes

Can’t we simply make the recommendation of 240px height? I worry that … larger than 120px can be interpreted as … however large you want it to be… that is not that good.

3 Likes

That makes a lot more sense. I updated the copy

https://github.com/discourse/discourse/commit/2914431729e05f4882f9e28036111be7ba8017fb

5 Likes

This topic was automatically closed after 5 days. New replies are no longer allowed.