'SVG animation doesn't work on favicon in Chrome

In the <head> SVG favicon is set

<link rel="icon" href="favicon.svg" sizes="any" type="image/svg+xml">

This is the content of SVG file which rotates the inner circle. Favicon animation doesn't work at all in Chrome.

How to make it work in Chrome? In Firefox it works ok, in Edge it doesn't but Chrome is the most important

<svg width=" 54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="27" cy="27" r="25" stroke="#005C97" stroke-width="3" />
    <circle class="logo-eye" cx="35" cy="21" r="7" fill="#005C97" />
    <style>
    @keyframes rotations {
        to {
            transform: rotate(360deg)
        }
    }
    circle {
        animation: rotations 4s linear infinite;
        display: block;
        transform-origin: 50% 50%;
        will-change: transform;
    }
    </style>
</svg>
cssgoogle-chromesvg


Solution 1:[1]

Try replacing CSS animation with SMIL rotation animation:

<svg width=" 54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="27" cy="27" r="25" stroke="#005C97" stroke-width="3" />
    
    <circle class="logo-eye" cx="35" cy="21" r="7" fill="#005C97" >
     <animateTransform id="an"  attributeName="transform" type="rotate" begin="0s" dur="4s" values="0 27 27;360 27 27" repeatCount="indefinite" /> 
    </circle>
</svg>

Solution 2:[2]

Neither CSS nor SMIL works in Chrome or Edge on Windows. Firefox is the only browser that responds to non-js animated favicons. Unless there's a special syntax required to animate favicons in WebKit browsers that I'm unaware of...?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexandr_TT
Solution 2 Superfein

Related Questions