Getting started
Install wizicon and turn the favicon into a status surface.
The favicon is the most-ignored 16×16 in the browser. wizicon makes it a
first-class status surface — spinners, badges, success/error states — with the
same imperative ergonomics as a toast library.
Install
pnpm add wiziconZero deps, zero config. SSR-safe (every method is a no-op on the server).
First call
import { wizicon } from "wizicon";
wizicon.loading(); // spinner around your existing favicon
await someAsyncWork();
wizicon.success(); // green check, auto-restores after 1.5sBy default wizicon reads the <link rel="icon"> your app already exposes
(including Next's app/icon.png) and composites overlays on top. Pass an
explicit logo if you want to override:
wizicon.configure({ logo: "/brand-mark.svg" });All states
wizicon.loading(); // animated spinner
wizicon.success(); // ✓ check, auto-dismiss
wizicon.error(); // ✗ X, auto-dismiss
wizicon.notify(3); // numbered red badge
wizicon.notify(); // dot only
wizicon.set({ emoji: "🎉" }); // one-off swap
wizicon.dismiss(); // restore original
await wizicon.promise(uploadFile()); // loading → success/error → restore