Ever want to track your mouse movement in a Favicon? Now you can! (Check out this browser tab's favicon above)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Tracking</title>
</head>
<body>
    <script>
        // Function to update the favicon with a red dot at the specified position
        function updateFavicon(xPercent, yPercent) {
            console.log("Updating favicon with red dot at position:", xPercent + "%", yPercent + "%");

            // Calculate pixel values for the favicon
            var x = Math.floor((xPercent / 100) * 16);
            var y = Math.floor((yPercent / 100) * 16);

            var canvas = document.createElement('canvas');
            canvas.width = 16;
            canvas.height = 16;
            var context = canvas.getContext('2d');
            // Draw existing favicon (assuming it's a white square)
            context.fillStyle = '#ffffff';
            context.fillRect(0, 0, canvas.width, canvas.height);
            // Draw red dot
            context.fillStyle = '#ff0000';
            context.beginPath();
            context.arc(x, y, 3, 0, 2 * Math.PI);
            context.fill();
            // Update favicon
            var link = document.querySelector("link[rel*='icon']");
            link.href = canvas.toDataURL('image/png');
            console.log("Favicon updated successfully.");
        }

        // Event listener to track mouse movement and update favicon
        document.addEventListener('mousemove', function(e) {
            var xPercent = (e.pageX / window.innerWidth) * 100;
            var yPercent = (e.pageY / window.innerHeight) * 100;
            updateFavicon(xPercent, yPercent);
        });

        // Override site's existing favicon
        var link = document.createElement('link');
        link.rel = 'icon';
        link.type = 'image/png';
        link.href = 'original_favicon.png'; // Path to your original favicon
        document.head.appendChild(link);
    </script>
</body>
</html>