Create an Animated SVG Favicon With CSS

- 3 minutes read

As of writing this, most major browsers support SVG favicons (with the exception of Safari).

In SVG files, we can add custom inline CSS. And in CSS, we can animate just about anything.

So, let’s animate a favicon!

Link to this section Setting up a simple SVG favicon

First, let’s create a simple 32x32 SVG with a circle:

<svg height="32px" width="32px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <!-- We will write some styles here! -->
    <circle fill="#60f" cx="50" cy="50" r="45"/>
</svg>

Next, let’s save this masterpiece to a file called favicon.svg.

While we can view this file directly, it is more realistic to test it out on a real browser tab.

To accomplish this, just link to it from the <head> element of a web page, making sure to replace any existing favicon tags:

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

If necessary, remember to replace “favicon.svg” with the path to your favicon file!

Link to this section Adding a zoom animation

It’s now time to start animating our favicon.

First, let’s add a <style> tag to our SVG file:

<svg height="32px" width="32px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <style>
        /* We will write some styles here! */
    </style>
    <circle fill="#60f" cx="50" cy="50" r="45"/>
</svg>

Within the <style> tag, let’s write a simple keyframe animation:

@keyframes zooming {
    0% {       
        transform: scale(1);
    }
    100% {       
        transform: scale(0);
    }
}

This will create a mesmerizing “zooming” effect.

Let’s apply it to our <circle> element:

@keyframes zooming {
    0% {       
        transform: scale(1);
    }
    100% {       
        transform: scale(.1);
    }
}
svg {
    width: 32px;
}
circle {
    animation: 4s ease-in infinite both zooming;
    display: block;
    transform-origin: 50% 50%;
    will-change: transform;
}

Link to this section Adding a spooky animation

Here is one more example animation that creates a “ghost” effect:

@keyframes ghost {
    0% {       
        opacity: 1;
    }
    100% {       
        opacity: .5;
    }
}
svg {
    width: 32px;
}
circle {
    animation: 4s ease-in infinite both ghost;
    display: block;
    will-change: opacity;
}

There’s really no limits to what kind of animation you can add to your favicon, so get creative with it!

Link to this section Improving accessibility

Not everyone likes animations, and it might make some people sick.

So, for users with browsers configured to request reduced motion, we can disable our animation by tacking this handy snippet on to the end of our SVG’s <style> tag:

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition-duration: 0s !important;
    }
}

Link to this section Conclusion

There’s definitely some pros and cons to using animated favicons.

Animated favicons are very unique and can leave visitors with a lasting impression of your site.

But it remains uncertain whether they will gain (or retain) full browser support, and they can easily be an accessibility concern.

Anyway, I hope you enjoyed creating an animated favicon!