document.addEventListener('DOMContentLoaded', () => {
    // Find the existing favicon link or create one
    let favicon = document.querySelector('link[rel="icon"]') || document.querySelector('link[rel="shortcut icon"]');
    
    if (!favicon) {
        console.warn('No favicon link found to animate.');
        return;
    }

    const image = new Image();
    image.crossOrigin = "anonymous";
    image.src = favicon.href;

    image.onload = () => {
        const canvas = document.createElement('canvas');
        const size = 32; // Standard favicon size
        canvas.width = size;
        canvas.height = size;
        const ctx = canvas.getContext('2d');

        let angle = 0;
        
        // Animation loop
        setInterval(() => {
            // Clear canvas
            ctx.clearRect(0, 0, size, size);

            // Save context
            ctx.save();
            
            // Move to center, rotate, move back
            ctx.translate(size / 2, size / 2);
            ctx.rotate(angle * Math.PI / 180);
            ctx.translate(-size / 2, -size / 2);

            // Draw image
            ctx.drawImage(image, 0, 0, size, size);

            // Restore context
            ctx.restore();

            // Update favicon
            favicon.href = canvas.toDataURL('image/png');

            // Increment angle
            angle = (angle + 10) % 360;
        }, 100); // 100ms = 10fps
    };
});