Mouse Tracker Favicon
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>