monoki docs Install Source

Icons & titles

monoki's server fetches the page once and reads two things out of it: a name for the tile, and the best icon it can find.

This happens server-side rather than in your browser, and both halves of that matter. Apps on private addresses are reachable from your server but not from a public favicon service; and because the icon bytes are then stored and served by monoki itself, opening your board makes zero third-party requests. No favicon service learns which apps you run.

Choosing the name

In order of preference:

  1. <meta property="og:site_name">
  2. <meta name="application-name">
  3. <meta property="og:title">
  4. <title> — and if that runs long, the part before the first |, —, – or -
  5. the hostname, with a leading www. removed

A tile caption wants "Grafana", not "Grafana — Kubernetes / Compute Resources / Namespace (Workloads)". That is why the site's own name for itself outranks the current page's title, and why long titles get cut at their separator.

The name is always yours to change afterwards, and monoki will not overwrite a name you typed.

Choosing the icon

monoki collects every <link rel="icon">, rel="shortcut icon">, rel="apple-touch-icon"> and rel="apple-touch-icon-precomposed">, resolves each href against the page's real URL, and ranks them.

The grid draws icons at about 64 CSS pixels, so the target is 128px for a 2× display. Ranking prefers the smallest candidate at or above that — an exact fit beats downloading a 512px image only to shrink it — and falls back to the largest below it. Ties break by format: SVG, then PNG, WebP, JPEG, GIF, and .ico last, since .ico is usually 16×16 and often a multi-image container.

An SVG is treated as a perfect fit at any size, because it is one.

rel="mask-icon" is deliberately ignored: it is Safari's monochrome pinned-tab glyph and renders as a solid black blob on a tile.

If a page declares nothing, monoki tries /favicon.ico at the site's origin.

An icon that fails to download never fails the whole lookup — you still get the name.

When there is no icon

You get a letter tile: the first character of the name, on a coloured wash picked by hashing the hostname. The same site always gets the same colour, and the colours come from a fixed set of eight that belong to the palette, so the fallbacks look like part of the system rather than like something broke.

Plates

Favicons are wildly inconsistent, and the single biggest problem is logos drawn in one colour on a transparent background. A white logo disappears on a light plate; a black one (GitHub's, for instance) disappears on a dark plate.

So each tile has a plate setting:

Three named choices, not a colour picker, so a board cannot go rainbow by accident.

Replacing an icon by hand

If extraction picks something ugly, open the tile's menu and choose Edit. An icon you set by hand is marked as such, and Re-read the page will not overwrite it.

Re-reading a page

The tile menu's Re-read the page fetches everything again. It updates the name only when you ask it to, because silently replacing a caption you wrote by hand is a destructive surprise.

There is no background refresh job. A self-hosted tool that periodically fans out HTTP requests to every host you have ever bookmarked, unasked, is a surprising thing to run.

Limits