Logo

The Primary Logo

• Minimum size: While a minimum size for web logos is not specified, the logo should always be legible, recognisable, and proportional to the display context. If the logo is not legible, it is too small, and an alternative should be provided or the design revised.
• Space constraints: For websites with size constraints for logo elements (especially height), or where screen real estate must be optimised (e.g mobile) the extended logo is recommended (see below).
• File format: The recommended file format for web is SVG. PNG may be used where SVG is not possible.

The Extended Logo

• The extended logo (RGB and reversed) is available for use on the web  when fixed height constraints (typical of vendor platforms with very slim headers), or similar, make the primary logo impractical.

The Favicon

• A favicon is available for web products. It consists of the crest-only logo-mark on a transparent background. 
• The crest can also be used as a primary logo in exceptional cases, where header constraints make the default logos unsuitable.

Notes

• Contrast: Ensure there is sufficient contrast between the logo, which has a transparent background, and the underlying layer(s). This is especially important when the underlying layer includes an image.
• Do not modify the logo (e.g. re-colour, distort, crop, edit, or animate).
• Do not add a site title or sub-brand to the logo.
• Do not lockup, or put a box or border around the logo.

Logo links

• Links associated with the logo can go to one of two targets: the current site homepage (default and recommended), or if the current site has a parent, the parent site.
• If linking to the parent site, a clear navigation path (using a tested pattern) to the current site homepage must be provided.

Logo, in UX Basics

The logo, logo versions, do’s and don’ts, and file formats for web.

Headers, in UI Components

Headers establish structure, brand and identity, and provide global navigation.