I’ve added an animated favicon to the site:*To avoid becoming distracting, it only plays once, on page load, instead of indefinitely looping.

The design has a few motifs:

• An upper case $\Lambda$ symbol: a nod to both the Lambda Calculus and the A in Abstract.
• That morphs into an uppercase blackboard bold $\mathbb{N}$ symbol: the set of natural numbers and the N in Nonsense.
• All of which is surrounded by square brackets (an array) to give the favicon a bit more presence.
• Lastly, the serifs are arrow-heads, evoking morphisms from Category Theory.

Full disclosure: I tried multiple times to manually craft an SVG that had all the above components, but I just couldn’t get it right. Thus, inspired by a Google blog post announcing improved SVG design capabilities in the Gemini 3.1 Pro model, I decided to give it a try. It took many, many iterations to coerce Gemini’s output into something I was satisfied with, but I think the end result is pretty good.*There’s some issues with the animation keyframes splines not interpolating as smoothly as I’d like, but that’s a problem for another day.

Since SVG favicons are now Baseline-supported across all major browsers, I didn’t need to worry about fallback PNGs and .ico files, which was a nice bonus. It’s also picked up by Google Search and other platforms. Lastly, since I can embed CSS into the SVG file, it also supports dark modes via a prefers-color-scheme media query.

I used an object tag to embed the favicon file above, to ensure that the animation played correctly on page load. I noticed some inconsistencies between browsers with respect to animated SVG support using an img tag.