New Branding Guidelines

[rgaudin]

We used to support two branding image files: logo and favicon.
We had no guideline for those and only recently converted new ones to PNG.

In order to harmonize usage and allow apps to reuse branding, we are introducing the
following:

• Logo is renamed “Horizontal logo”
• Favicon is renamed “Square logo”

Horizontal logo

• Max 11:1 ratio
• 1MiB max

Recommendation

• Consider a 11x1 canvas
• Image can be any dimension but will be scaled to fit entirely in the canvas
• Image wont be upscaled
• Image will be aligned to the left
• Don't include spacing around your image
• Minimum recommended height of 50px at 96ppi
• Recommended height of 150px to accomodate DPR:3

Implementation:

/* width and height to be scaled proportionaly */
width: 11em;
height: 1em;


object-fit: scale-down;
object-position: center left;

Square logo

• 1:1 ratio
• 48x48px mini
• 2048x2048px max
• 1MiB max

Recommendation

• 1024x1024
• No spacing

Implementation recommendation:

/* width and height to be scaled proportionaly */
width: 1em;
height: 1em;

object-fit: scale-down;