Exploring the Dynamic World of Animated SVG Favicons

A New Era for Browser Tabs

Remember the tiny icons in your browser tabs? Those are favicons, initially static, pixelated and mostly unnoticed. But the web evolves, and so do its elements. Enter the era of SVG (Scalable Vector Graphics) favicons, a game-changer in the realm of browser tab icons. Unlike the pixel-based traditional favicons, SVGs are vector-based, offering crisp, scalable images without quality loss. And guess what? They can dance, blink, and change - they can be animated!

SVG Favicons: Not Just Icons, But Mini Canvases

Using SVGs as favicons turns each tiny icon into a mini canvas for creativity. SVG, being XML-based, allows for embedding directly into HTML. This means more than just static images; you're looking at interactive, dynamic pieces of art in the tab of your browser.

Emojis and Text: Bringing Personality to Favicons

You can now put favorite emojis and messages right there in the favicon. Embed an emoji or add a letter, and you've got a favicon that's not just an icon but a statement. Here's a taste of how it's done:

<link rel="icon" id="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👨‍💻</text></svg>">

Place this in the <head> of your HTML and see the icon appear.

JavaScript: Breathing Life into Favicons

But why stop at static? Let's animate! With some JavaScript magic, those favicons can evolve, change expressions, or even convey messages over time.

window.addEventListener("load", (event) => {
    let intervalId = null;

    // Start the interval when the page is first loaded

    // Listen for visibilitychange and pagehide events
    document.addEventListener('visibilitychange', handleVisibilityChange);
    window.addEventListener('pagehide', handlePageHide);

    const emojis = ['👋', '💼', '💻','🔧','📊','📱', '👨‍💻','🚀','💡', '📈','📝','💡','📢'];
    const icon = document.getElementById('icon');
    let currentIndex = 0;
    const text = "I"
    let message;
    let faviconText;

    function setFavicon(item) {
        // Update the icon element with the new message
        icon.href = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"><text id="t1" x="50%" y=".9em" fill="hsl(36, 100%, 50%)" font-size="180" font-family="system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'" text-anchor="middle">${item}</text>


    function startInterval() {
        intervalId = setInterval(() => {
            // Get the current message and shift it two characters to the left
            if(currentIndex == 0) {
                message = text;

            // If we've reached the end of the message, show a random emoji
            if (message.length < 1) {
                const emoji = emojis[Math.floor(Math.random() * emojis.length)];
                message = emoji;
                currentIndex = 0;
                faviconText = emoji
            } else {
                currentIndex += 2;
                faviconText = message.substr(0, 2);

            message = message.substr(2);
        }, 1500);

    function stopInterval() {
        setFavicon(emojis[Math.floor(Math.random() * emojis.length)]);
        intervalId = null;

    function handleVisibilityChange() {
    if (document.hidden) {
        // Page is hidden, stop the interval after x seconds
        setTimeout(() => {
        }, 60000);

    } else {
        // Page is visible, start the interval

    function handlePageHide() {
        // Page is being unloaded, stop the interval
        setTimeout(() => {
        }, 60000);

This script is the secret sauce. It changes the favicon based on an array of emojis and text, responding to different browser events to start and stop the animation.

Browser Support

Currently Chrome, Firefox and Edge support this feature. Out of the bigger browsers, only Safari does not.

SVG favicons | Can I use...

Final Thoughts: A Small Revolution

Animated SVG favicons with emojis and text are more than just fancy icons. They represent a fusion of art and technology, opening new avenues for creativity and interaction in web design. These tiny icons might be small, but their potential impact on user experience and brand expression is enormous. In the world of web design, it's often the smallest details that make the biggest difference. Welcome to the dynamic, expressive future of favicons.