How to Add Progress Bars and Status Indicators to Your Favicon

magic-favicon 🪄

Ever noticed how GitHub shows build status in your browser tab? That little icon tells you if a build passed or failed without switching tabs. I wanted the same for my projects, so I built magic-favicon - a tiny (~2.5KB) library that transforms your favicon into dynamic indicators.

What it does

favicon.progress(50);   // Shows 50% progress bar
favicon.pie(75);        // Shows pie chart
favicon.badge(3);       // Shows notification count
favicon.status("success"); // Shows green checkmark
favicon.pulse();        // Shows pulsing animation

Features

1. Progress bars and pie charts – Visualize completion with animated overlays
2. Notification badges – Auto-formatting counts (e.g., 99+)
3. Status icons – success, warning, error, check, cross
4. Animations – Pulse and spin effects for attention-grabbing indicators
5. Zero dependencies – Works in any modern browser
6. Non-des tructive – Preserves your original favicon when needed

Demo

🔗 Live Demo

Installation
npm install magic-favicon

Usage

import favicon from 'magic-favicon';

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

// Show badge
favicon.badge(12);

// Show status
favicon.status('success');

// Reset to 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! 🚀