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
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);
}
});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.
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.