How to Add Progress Bars and Status Indicators to Your Favicon

Source: Dev.to

Ever noticed how GitHub shows build status in your browser tab? That tiny icon tells you if a build passed or failed without switching tabs. magic-favicon is a tiny (~2.5 KB) library that transforms your favicon into dynamic indicators.

Features

• Progress bars & pie charts – Visualize completion with animated overlays.
• Notification badges – Auto‑formatting counts (e.g., 99+).
• Status icons – Success, warning, error, check, cross.
• Animations – Pulse and spin effects for attention‑grabbing indicators.
• Zero dependencies – Works in any modern browser.
• Non‑destructive – Preserves your original favicon when needed.

Live Demo

🔗 Live Demo (replace # with the actual URL)

Installation

npm install magic-favicon

import favicon from 'magic-favicon';

Usage

Show progress

favicon.progress(45, { color: '#22c55e' });

Show a pie chart

favicon.pie(75);

Show a notification badge

favicon.badge(12);

Show a status icon

favicon.status('success'); // options: 'success', 'warning', 'error', 'check', 'cross'

Add a pulsing animation

favicon.pulse();

Reset to the original favicon

favicon.reset();

The library automatically handles canvas rendering and favicon updates. All you need is a “ tag in your HTML.

Would love to hear what you think! 🚀