Back when I first started making websites, you simply created an icon called favicon.ico, added a meta tag to your page and that was pretty much it. The most difficult part was designing such a small piece of artwork that worked and also then converting that to a .ico file.
Nowadays, there are several different sizes to consider if you want to be a Favicon completist (like Craig Burgess). Luckily, the Favifan has created an Automator action that can be used to generate all of these for you.
There’s currently 11 different Favicon sizes to create which supports things from iOS, Android and Windows. Safari even has an SVG variant called mask-icon but I can’t really see the benefit of using this currently when compared to a PNG. There’s that many of them, I’ve ended up adding them to their own folder to keep them tidy. Windows has its own quirks which means adding a browserconfig.xml file.
You can read more about the history of Favicons
Since iOS, iPadOS and macOS have dark mode, Safari has implemented functionality that allows you to change the appearance of your website based on whether the user’s operating system is set to light or dark mode.
I used the article on WebKit’s website to get started with the basics. It was pretty straightforward and didn’t have to refactor too much of my site to get this working how I wanted.