Fun with Favicons

Background

Favicons can be SVGs! SVGs can be generated procedurally and encoded as data URIs! You can accomplish really silly things with this information!

Note: this page will be baffling if you're not using a browser that supports favicons (e.g. mobile), or if you're using Safari, which has different standards that mystify me.

Credit to Matthew Wrayfield and this awesome article, which inspired this.

A minimalist demo

Mouse over the two squares to switch the color of the favicon.

More fun

Next up: find the buried treasure! Mouse over the box, and your metal detector (favicon) will tell you if you're getting warmer (red) or cooler (blue).

A (very legit) game engine

Sure, if we wanted to watch a ball bounce, we could do it inline, but what if we wanted to do it *at a glance* in the tab bar?? Click and drag to launch it around your favicon. Note: animation only runs while your pointer is in box.

Closing thoughts

When I first wrote this up, I thought there weren't any "practical" applications, mostly because I was under the impression that the browser stopped updating the favicon while the tab was inactive. But I actually think that's just because most browsers seem to cap setInvertal and its ilk at about 1000ms when the page is inactive. So, possibilities are endless! Someone's a good demo of a loading bar here: https://rpsthecoder.github.io/square-loading-favicon/. The possibilities are endless, but I'm pretty happy using this only for inane purposes.