Create an Animated SVG Favicon With CSS

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 fa…


This content originally appeared on DEV Community and was authored by Nathan

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!


This content originally appeared on DEV Community and was authored by Nathan


Print Share Comment Cite Upload Translate Updates
APA

Nathan | Sciencx (2021-08-23T22:00:01+00:00) Create an Animated SVG Favicon With CSS. Retrieved from https://www.scien.cx/2021/08/23/create-an-animated-svg-favicon-with-css/

MLA
" » Create an Animated SVG Favicon With CSS." Nathan | Sciencx - Monday August 23, 2021, https://www.scien.cx/2021/08/23/create-an-animated-svg-favicon-with-css/
HARVARD
Nathan | Sciencx Monday August 23, 2021 » Create an Animated SVG Favicon With CSS., viewed ,<https://www.scien.cx/2021/08/23/create-an-animated-svg-favicon-with-css/>
VANCOUVER
Nathan | Sciencx - » Create an Animated SVG Favicon With CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/23/create-an-animated-svg-favicon-with-css/
CHICAGO
" » Create an Animated SVG Favicon With CSS." Nathan | Sciencx - Accessed . https://www.scien.cx/2021/08/23/create-an-animated-svg-favicon-with-css/
IEEE
" » Create an Animated SVG Favicon With CSS." Nathan | Sciencx [Online]. Available: https://www.scien.cx/2021/08/23/create-an-animated-svg-favicon-with-css/. [Accessed: ]
rf:citation
» Create an Animated SVG Favicon With CSS | Nathan | Sciencx | https://www.scien.cx/2021/08/23/create-an-animated-svg-favicon-with-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts