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!
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!
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;
}
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!
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;
}
}
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!
Top comments (0)