Skip to content

Hosted favicons are all media-gated (prefers-color-scheme) with no plain fallback → Safari shows letter tile #6040

Description

@jmfoster

What's wrong

On our Mintlify-hosted docs (agentconcepts.io), Safari shows the auto-generated letter tile ("A") instead of the favicon. Chrome renders the favicon correctly. Verified in a Safari private window, so it is not a cache issue.

Root cause

Every favicon <link> Mintlify generates carries a media="(prefers-color-scheme: light|dark)" attribute, and there is no plain (non-media) fallback link. From our deployed <head>:

<link rel="icon" href="…/_generated/favicon/favicon-32x32.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="…/_generated/favicon-dark/favicon-32x32.png" media="(prefers-color-scheme: dark)">
<link rel="shortcut icon" href="…/_generated/favicon/favicon.ico" media="(prefers-color-scheme: light)">

All six rel="icon" links (plus the .ico) are media-gated; none is un-gated. Safari supports prefers-color-scheme in CSS but does not honor it on favicon <link> tags — finding no un-gated icon link, it falls back to the generated letter tile.

Repro

  • docs.json: "favicon": "/_assets/favicon.svg" (single-string form).
  • Also tried a .png favicon source — the generated links are still all media-gated, so the gating appears unconditional (not a function of source format).

Requested fix

Emit a default, non-media <link rel="icon"> (and a non-media favicon.ico) alongside the light/dark media-gated variants, so Safari has a usable fallback. This is the standard favicon pattern.

Refs

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions