favicon adventures

Did you know you can use SVGs to create dynamic favicons (That little icon that shows up in your browser tab)? It turns out that with a little bit of creative coding there's actually quite a lot you can do with them.

4 Projects

  • I realized you could make interactive SVGs while trying to build a new pomodoro timer–I wanted something that would appear in the favicon and dynamically count down, but didn't want to manually make a new .png image for each minute/second. With an SVG, you can update the icon at the same time as the countdown timer!

  • Then I realized that if I could update the icon every second, why not add other event listeners, like key presses? That opened up room to create whole games that live inside the browser icon.

  • And because the browser has so many different things we can listen for, we can start to get creative with how those games are played. For example, here's Pong running in the favicon, and you scroll to control your paddle!

  • And now we're just getting silly with it. For whatever reason, every now and then I'll have a dream about code, and this started as one of those. It's a chatroom, but it only shows the most recently-typed letter of anyone viewing the page. It's sort of like communicating through a keyhole, or making a secret language with childhood friends.