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>