Découvrir l’univers dynamique des favicons SVG animés

Une nouvelle ère pour les onglets du navigateur

Vous vous souvenez des minuscules icônes dans les onglets de votre navigateur ? Ce sont les favicons, à l’origine statiques, pixelisées et le plus souvent ignorées. Mais le web évolue, et ses éléments aussi. Voici l’ère des favicons SVG (Scalable Vector Graphics), qui changent la donne pour les icônes d’onglets. Contrairement aux favicons traditionnelles à base de pixels, les SVG sont vectoriels et offrent des images nettes, redimensionnables sans perte de qualité. Et devinez quoi ? Elles peuvent danser, clignoter et changer : elles peuvent être animées !

Les favicons SVG : pas seulement des icônes, de mini-toiles

Utiliser des SVG comme favicons transforme chaque petite icône en mini-toile pour la créativité. Basé sur XML, le SVG peut être intégré directement dans le HTML. On ne parle donc plus seulement d’images statiques, mais de petites œuvres interactives et dynamiques dans l’onglet de votre navigateur.

Emojis et texte : donner de la personnalité aux favicons

Vous pouvez désormais placer vos emojis et messages préférés directement dans la favicon. Intégrez un emoji ou ajoutez une lettre, et votre favicon n’est plus une simple icône, mais une déclaration. Voici un avant-goût de la méthode :

<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>">

Placez ceci dans le <head> de votre HTML et regardez l’icône apparaître.

JavaScript : donner vie aux favicons

Mais pourquoi s’arrêter au statique ? Animons ! Avec un peu de magie JavaScript, ces favicons peuvent évoluer, changer d’expression ou même transmettre des messages au fil du temps.

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

    // Start the interval when the page is first loaded
    startInterval();

    // 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>
</svg>`;

    }

    function startInterval() {
        clearInterval(intervalId);
        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);
            }

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

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

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

    } else {
        // Page is visible, start the interval
        startInterval();
    }
    }

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

Ce script est l’ingrédient secret. Il change la favicon à partir d’un tableau d’emojis et d’un texte, et réagit à différents événements du navigateur pour démarrer et arrêter l’animation.

Prise en charge par les navigateurs

Actuellement, Chrome, Firefox et Edge prennent en charge cette fonctionnalité. Parmi les grands navigateurs, seul Safari ne le fait pas.

SVG favicons – Can I use…

Réflexions finales : une petite révolution

Les favicons SVG animées avec emojis et texte sont plus que de jolies icônes. Elles incarnent une fusion de l’art et de la technologie, ouvrant de nouvelles voies à la créativité et à l’interaction en web design. Ces minuscules icônes ont beau être petites, leur impact potentiel sur l’expérience utilisateur et l’expression d’une marque est énorme. En web design, ce sont souvent les plus petits détails qui font la plus grande différence. Bienvenue dans l’avenir dynamique et expressif des favicons.