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 Progress bars and 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-des tructive – Preserves your original favicon when needed Demo 🔗 Live Demo Installation npm install magic-favicon Usage