Dimensions for Logo?

(Victor Hooi) #1

Are there notes anywhere on the logo requirements?

I’m guessing whatever image you set has to match up to the dimensions of the current logo, right?

I tried to set a logo before, and it was apparently too large, because it caused the top banner to grow downwards, obscuring the navigation.

I had to use Chrome Devtools to modify the DOM so that I could actually access the settings page…lol.

So whatever image we use - it has to fit within 244x66?

Might be nice if instructions on setting up the logo were on discourse/INSTALL.md at master · discourse/discourse · GitHub (or one of the linked pages) - it’s probably one of the first customisations most people will do, after setting the name.

(Dave McClure) #2

I just ran into this as well.

Originally the ‘normal logo’ I uploaded was 97 x 66 px.

With that size, the logo was overlapping the category dropdown on the mobile view:

Increasing the width so that the image is now 244 x 66 px fixed the issue.

for your testing pleasure:

(Jeff Atwood) #3

Sounds like we don’t have max-height protection there on mobile, @awesomerobot can you take a look.

(stellarhopper) #4

I remember seeing that as well - I ended up just scaling the logo to the original’s dimensions.

/me reprimands himself for being a bad netizen and not reporting it.

Edit: /me support would be awesome

(Kris) #5

Yes, you’re right - will get to this today.

(Tobias Eigen) #6

It would be really great to have the ideal dimensions for each image directly in the helper text on the admin page where you upload the various logos, favico and other assets. admin/site_settings/category/required

(Michael Downey) #7

Please don’t forget about high-DPI options. :slight_smile:

(Tobias Eigen) #8

@codinghorror would you be willing to add this? would be a big help - I am just setting up a new forum and am missing this info here in the admin settings.

(Daniel Belcher) #9

I also have a question about current best-practices using logo and logo small. It seems to me that one has to either opt for a scaled image on lower-dpi display or crisp logos on high-dpi displays.

For example, with the logo, if I use a 690x184 image, it looks great on a high-dpi display, just like the Discourse logo above.

However, even this logo looks blurry/scaled on lower-dpi displays:
blurry logo

Normally, I would handle this with a media tag in css, I guess. It also seems like svg is not supported (after a quick test, an .svg did not render when used as the logo)

Is there an easy way to get Discourse to use multiple res logos that I’m not finding here? (I’m probably missing something obvious)

(Stephen Chung) #10

Why not just use the high res one?

(Daniel Belcher) #11

Why not just use the high res one?

The main reason is that it looks like crap on lower resolution displays. This fact kept bugging me because normally scaled interpolation isn’t all that bad…but in this case it was (it’s noticeably blurry even at a distance).

I dug into this a bit more. I was using the same dimensions as the Discourse logo above (690x184), which, as it turns out is a bit of a weird scale differential from the base size (150x30) …sure, same aspect ratio, but not exactly 2x, 3x, 4x, etc. When I changed the high-resolution image to 300x60 (or even 450x90, etc) it looks much better scaled. Comparing the Discourse logo above on a high-res (5k) and low-res (HD) display, I think it could actually benefit from this minor change.

Still, I wish we could use SVG for that asset.

(Kris) #12

SVG logos

SVG logos do work in Discourse, but I believe they may require an explicit width in the CSS on img#site-logo (so by default you might not see anything). This varies a bit based on how the SVG was generated and whether or not there’s a width/height defined in the SVG.

Note that if you use an SVG logo, you should upload a non-SVG image to your digest logo url setting, as many email clients won’t use SVG.

Scaling down 2x logos

Scaling down images for various resolutions can definitely be tricky and result in blurry logos (especially with text), as you experienced. One thing that sometimes helps is the following CSS applied to the image:

image-rendering: -moz-crisp-edges;       
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE 

This can create some issues too, so your mileage may vary.

(also, good suggestion on our logo here @Daniel_Belcher )

(Daniel Belcher) #13

Thanks @awesomerobot! I’ll give the svg logo a(nother) try and report back.

(Jeff Atwood) #14

I strongly recommend not using a SVG logo. You are opting into tremendous pain and incompatibility for negligible benefit.

(Dylan Hunt) #15

Apologies to bump, but still the most relevant result when searching.

What’s the recommended resolution for the mobile logo? The context tips given are a bit useless:

(The example url, swapped out with my site, is 404)

(Sam Saffron) #17

Followed up here

(Sam Saffron) #18