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:
-
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.
-
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