Quico (quick-ico)

Generate a favicon from a single HTML tag:

<quico>i</quico>

Quico reads the first character inside <quico>, draws a transparent PNG favicon (white circle with a black border + centered black character), and applies it to the active page.

Install

npm install @zenberry/quico

Usage

Script tag

<script src="https://unpkg.com/@zenberry/quico/dist/quico.js"></script>
<quico>i</quico>

Bundler

import "@zenberry/quico";

Then add:

<quico>A</quico>

Demo Pages

• Local build demo: demo/index.html
• Published CDN demo: demo/online.html (loads https://unpkg.com/@zenberry/quico@latest/dist/quico.js)

Behavior

• Uses the first glyph only (<quico>AB</quico> becomes A).
• Hides the <quico> tag automatically.
• Prefers Roboto (700) and loads it from Google Fonts by default.
• Re-renders when <quico> nodes are added/changed in the DOM.

API (optional)

window.Quico.set("7");          // force a new character
window.Quico.refresh();         // re-read <quico> from the DOM
window.Quico.configure({
  iconSize: 256,
  circleColor: "#ffffff",
  circleBorderWidth: 24,
  circleBorderColor: "#000000",
  textColor: "#000",
  loadRoboto: true
});

Defaults

{
  iconSize: 256,
  circleScale: 0.44,
  circleColor: "#ffffff",
  circleBorderWidth: 24,
  circleBorderColor: "#000000",
  textColor: "#000000",
  fontFamily: 'Roboto, "Helvetica Neue", Arial, sans-serif',
  fontWeight: 700,
  textScale: 0.56,
  loadRoboto: true
}

License

MIT