Updating My Favicon, Courtesy of Randall Munroe
I may earn commissions from purchases made through affiliate links in this post.
Since 2017, my personal website’s favicon was a yin-yang symbol that I added on a whim.
I didn’t think about it again for a long time. Until I published a post on serving videos instead of GIFs, and one Reddit comment helpfully pointed out how absurdly large my favicon was:
And yet that webpage has a 170kb favicon - a 256x256 image with essentially 3 colors but stored in an uncompressed 24 bit format.
I appreciated the callout! I thought about changing my favicon to my initials or something like that, but then I remembered a sketch that I got from Randall Munroe, the author of xkcd and What If?: Serious Scientific Answers to Absurd Hypothetical Questions.
When I was in college, he visited to give a talk. Afterwards, I asked him to autograph a printout of #876, which references Plato’s Cave from The Republic (I was a philosophy major). I also asked if he could draw Rodin’s The Thinker, and he graciously did it. Here’s a scan:
I cropped out the sketch and used RealFaviconGenerator to generate images from it. There are multiple ones for different scenarios, and they range from 479 bytes to 15 KB. Much better than the original 170 KB.
The sketch is maybe a bit too detailed for a favicon, but I love it anyway.
Interesting Favicons
Updating my favicon made me think about the interesting things I’ve seen regarding favicons.
Gmail and Whatsapp show unread counts, and Google Calendar shows the current date.
Tinycon is a library for showing alert bubbles. Which inspired Piecon for showing progress pie charts.
There’s also Tiny Mirror, which turns the favicon into a webcam video!
Many browsers have added support for SVG favicons, which allows for things like dark mode support through the prefers-color-scheme media query.
Even the favicon origin story is interesting. A Microsoft engineer named Bharat Shyam snuck the feature into Internet Explorer. He waited until a junior program manager was in charge before requesting permission to add it, knowing that a junior person would be less likely to block it. Thanks to that bit of mischief, the internet became a little more fun.