useFaviconBadge

Keeps the favicon badge in sync with a reactive value: pass an accessor (or a signal's .read) and the favicon updates whenever the value changes; a static value applies once. It is the reactive driver for setFaviconBadge.

It does not clear the badge on scope dispose — favicons are page-global state, so call setFaviconBadge(null) from your own cleanup if you want it gone. See pota/use/favicon for options.

Arguments

name	type	description
badge	string | number | null | undefined | (() => any)	reactive accessor (redraws on change) or a static value (applied once)
options?	{ background?: string; color?: string }	badge fill color (default 'red') and text color (default 'white')

Examples

Track an unread count

Drives the favicon badge from a signal — clicking the button bumps the count and the tab icon redraws. Passing null once the count is zero shows the plain icon.

import { render, signal } from 'pota'
import { useFaviconBadge } from 'pota/use/favicon'

function App() {
	const unread = signal(0)

	useFaviconBadge(() => unread.read() || null, {
		background: '#0a84ff',
	})

	return (
		<button on:click={() => unread.update(n => n + 1)}>
			Mark unread ({unread.read})
		</button>
	)
}

render(App)