Home/ Questions/Q 3151

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Asked: 2024-11-26T12:03:09+00:00

Create an Animated SVG Favicon With CSS

  • 61k

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 32×32 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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

@keyframes zooming {     0% {                transform: scale(1);     }     100% {                transform: scale(0);     } }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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;     } }
Enter fullscreen mode Exit fullscreen mode

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!

cssdesignhtmlwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,