Add new link relation: <link rel="logo-icon"> for all sorts of logo icons that are not the (fav)icon

[tomayac]

Warning
All brands in the text below are used purely for illustrative purposes.

Introduction

The current (fav)icon (<link rel="icon">) is not necessarily the best representation of the context of content in all cases. For example, a publisher (for example, Vox Media) with several outlets (for example, The Verge) may want to meaningfully distinguish the publisher icon from the icons of each of its outlets, or a holding company (for example Alphabet) with several held companies (for example, YouTube) may want to distinguish the held companies from the holding.

Use Cases

• To add context to search results presented on a search engine results page, search engine operators may want to add both a classic favicon and a logo icon, so consumers have more clarity on how to interpret the shown results.
• Among other possibilities, user agents can take the additional logo icon into account for suggested tab grouping, the organization of bookmarks, or the presentation of site information.

Goals

• Allow website owners to add markup for both a classic (fav)icon as well as a logo icon.
• Allow website owners to specify different icons for dark mode and light mode.
• Allow website owners to easily add said markup without requiring additional structured markup formats like RDFa or JSON-LD.

Non-goals

• This proposal on purpose allows website owners to interpret "logo" freely. It is not necessarily to be interpreted as a logotype (for example, Nike) or logomark (for example, the Nike Swoosh); it could also be someone's heraldry symbol.

Proposed Solution

In accordance with the naming pattern of existing link relations, namely apple-touch-icon, mask-icon, and apple-touch-startup-image, we suggest a new link relation logo-icon.

Examples

Basic example:

<!-- Classic favicon -->
<link rel="icon" href="icon.svg">

<!-- Proposed logo icon -->
<link rel="logo-icon" href="logo.svg">

Color-scheme aware example:

<!-- Classic favicon -->
<link rel="icon" href="icon.svg">
<!-- Classic dark favicon -->
<link rel="icon" href="icon-dark.svg" media="(prefers-color-scheme: dark)">

<!-- Proposed logo icon -->
<link rel="logo-icon" href="logo.svg">
<!-- Proposed dark logo icon -->
<link rel="logo-icon" href="logo-dark.svg" media="(prefers-color-scheme: dark)">

Alternate Approaches

Alternatives considered were:

• Using Web App Manifest icons, but not every content website is considered an app and there is currently no way to specify a different set of icons for dark mode and light mode (related: Web Manifest Overrides w3c/manifest#1045).
• Using structured markup like logo, but it is currently only defined for (sub)types of Brand, Organization, Place, Product, and Service (related: 'logo' for 'WebSite' schemaorg/schemaorg#1303, New Proposal: Icon schemaorg/schemaorg#939) and there is no way to specify different logos for dark mode and light mode (related: Icons (or favicons) sensitive to color scheme schemaorg/schemaorg#3203).

Privacy & Security Considerations

No implications.

Let’s Discuss

Discussion is welcome on the present Issue, or on protocol-registries/link-relations#47.