update

app/static/favicon_io/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

app/static/js/favicon_animator.js

@@ -0,0 +1,49 @@
+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
+    };
+});

app/templates/base.html

@@ -6,6 +6,10 @@
   <link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
   <script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', path='favicon_io/apple-touch-icon.png') }}">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', path='favicon_io/favicon-32x32.png') }}">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', path='favicon_io/favicon-16x16.png') }}">
+  <link rel="manifest" href="{{ url_for('static', path='favicon_io/site.webmanifest') }}">
   <title>{% block title %}My FastAPI App{% endblock %}</title>
   {% block css %}
   {% endblock %}
@@ -49,6 +53,7 @@
     <p>&copy; 2025 EKSTRAH Security Application</p>
   </footer>
 
+  <script src="{{ url_for('static', path='js/favicon_animator.js') }}"></script>
 </body>
 
 </html>