SVG animation doesn't work on favicon in Chrome

user_5723816 0
Viewed 183

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>

google-chrome svg css
2 Answers

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>

user_73948710

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...?

user_99431010
Related