Favicon

The favicon package: a light and a dark tile of the mark, and how to add it to your site.

The favicon is Clinia's mark on a square tile, in two versions: Infinite on Remedy for light browsers and Remedy on Infinite for dark ones.

A Clinia product's own site uses the same favicon: the tab shows Clinia's mark, and the product's name goes in the page title.

Clinia

Light browser

Clinia

Dark browser

Apple · light

Apple · dark

Android · light

Android · dark

↓ Download the favicon package (.zip)

The package

Each version is the same six files, in public/favicon/light/ and public/favicon/dark/. The package also builds icons for installed web apps (PWA), Apple home screens and the web manifest, which tells browsers the site's name, icons and colours.

File	Purpose
`favicon.ico`	Legacy icon, 16 / 32 / 48. The light one is also copied to `public/favicon.ico`, for browsers that ask for it directly.
`favicon-16x16.png`	Browser tab.
`favicon-32x32.png`	Browser tab on high-density screens.
`apple-touch-icon.png`	180 × 180 home-screen icon on iOS.
`android-chrome-192x192.png`	Android home screen and web manifest.
`android-chrome-512x512.png`	Android splash screen and web manifest.

Light and dark

The tab icon follows the browser's colour scheme (prefers-color-scheme), not the site's theme toggle, since the favicon lives in the browser's tabs, tied to the browser, and not on the page. To see the dark tile, switch your operating system or browser to dark mode and reload.

Support for media on icon links varies. Browsers that ignore it show the light icon everywhere, which stays legible on a dark tab bar because the tile carries its own Remedy background.

The Apple touch icon and site.webmanifest use the light version, since neither can switch with the theme. The manifest sets theme_color and background_color to Remedy , the light tile's background.

The mark fills 61% of the tile's height, so it stays clear of the rounded corners and circle crops that home screens apply.

Use it in your app

Download the package above, then unzip it into public/favicon/ and copy the light .ico to the root, where browsers look for it, or fetch it from your project root with a simple command:

bash

curl -LO https://ui.clinia.dev/favicon/favicon.zip
unzip favicon.zip -d public/favicon
cp public/favicon/light/favicon.ico public/favicon.ico

Then add the manifest and the icon declarations.

public/site.webmanifest:

json

{
  "name": "Clinia",
  "short_name": "Clinia",
  "icons": [
    {
      "src": "/favicon/light/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon/light/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#fcf8ef",
  "background_color": "#fcf8ef",
  "display": "standalone"
}

Next.js (App Router)

In app/layout.tsx:

tsx

import type { Metadata } from "next";
 
export const metadata: Metadata = {
  manifest: "/site.webmanifest",
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "48x48" },
      ...(["light", "dark"] as const).flatMap((theme) =>
        [16, 32].map((size) => ({
          url: `/favicon/${theme}/favicon-${size}x${size}.png`,
          type: "image/png",
          sizes: `${size}x${size}`,
          media: `(prefers-color-scheme: ${theme})`,
        })),
      ),
    ],
    apple: { url: "/favicon/light/apple-touch-icon.png", sizes: "180x180" },
  },
};

Any other site

In the page <head>:

html

<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="/favicon/light/favicon-16x16.png"
  media="(prefers-color-scheme: light)"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="/favicon/light/favicon-32x32.png"
  media="(prefers-color-scheme: light)"
/>
<link
  rel="icon"
  type="image/png"
  sizes="16x16"
  href="/favicon/dark/favicon-16x16.png"
  media="(prefers-color-scheme: dark)"
/>
<link
  rel="icon"
  type="image/png"
  sizes="32x32"
  href="/favicon/dark/favicon-32x32.png"
  media="(prefers-color-scheme: dark)"
/>
<link
  rel="apple-touch-icon"
  sizes="180x180"
  href="/favicon/light/apple-touch-icon.png"
/>
<link rel="manifest" href="/site.webmanifest" />