A foundational overview of how to build an adaptive favicon.

Google’s web.dev is a resource for web developers, offering guidance, tips, and best practices for building websites and web applications. The site covers a range of topics including performance, accessibility, security, and development tools, all aimed at helping developers create user experiences. With a focus on the latest web technologies and standards, web.dev provides tutorials, coding labs, and articles authored by industry experts, making it a destination for developers looking to stay current in the evolving web landscape.

web.dev

A custom favicon is a great way to polish a web project. Traditionally this has been done with the .ico file type, but recently browsers have allowed use of SVG, a vector format. Using progressive enhancement you can serve well supported .ico favicons, and upgrade to an .svg if available.

Building an adaptive favicon

Clever use of SVGs with CSS to make an adaptive favicon.

TL;DR
SVG are now a support format for favicons in Chrome, Firefox, and Safari, allowing for additional customization such as changing the appearance based on the user’s preference for light or dark theme in the browser.
They can be served alongside ICO files for backwards compatibility.