Notes on Favicons

Favicon Serendipity

Last updated

One thing you should know about me, I can't stand errors or warnings in the browser console (or after composer or npm installs, for that matter).

And, while testing the beginnings of this little project, dev tools kept showing me a hateful and mean 404 error about a missing favicon.ico. So, I dutifully headed over to a generator site and threw together a little green circle containing the letters NG. It gave me the favicon, but also a collection of png images and a manifest. Fancy.

Favicon picture of a green circle with the letters NG inside

But, this generated favicon.ico was larger than any other element on the page. That wouldn't do. So, I started looking into optimizing favicon.ico images. Yowsa. None of that looked fun.

But, as fate would have it, my trusty Newsblur served up an article by DanQ about reducing the size of his home page. In the post, Dan explicitly talks about how inefficient favicon.ico bitmaps are. Better yet, he dropped the bombshell (to me anyway) that browsers don't make you use those silly bitmaps anymore.

And, from my own prior research, I happened to have this page open, but as yet unread.

So, with those pieces of information, I was able to get the favicon for the garden down from 15.7k to 502 bytes.