What is the benefit of base64 encoding a favicon?

I've got this web app where the favicon is inlined in the HTML, e.g.,

<link rel="icon" href="data:image/x-icon;base64,A VERY VERY LONG STRING...">

However I can definitely see that both Chrome and Firefox (latest version as of this date) issue a request to favicon.ico at the root of my website anyway, e.g. http://example.com/favicon.ico

In case it matters:

1. The base64-encoded string embedded in the href attribute is quite big.
2. The favicon <link> tag is managed by react-helmet
3. The website itself isn't particularly slow. (Consistent good Apdex score throughout.)

I can only assume that the developers at the time (all gone now) wanted to inline the favicon to avoid an HTTP request and therefore wrote some "infrastructure" to support that: namely using a Webpack plugin to automatically base64 encode all assets imported as JavaScript modules (e.g. import favicon from './assets/favicon.ico').

Clearly this isn't working as it was intended but what strikes me the most is that the actual base64 string weights more than the favicon.ico file itself (20k vs 15k). So I'm not sure where the benefit is (if any).

While I don't know any better than you why the original developers designed it that way, it makes sense for offline file rendering of a simple all-in-one html file.

I actually just looked this up, because I am building a SUPER small all-in-one html file. I don't have to include an extra file if it's base 64 encoded into the single html file.