What is the benefit of base64 encoding a favicon?

Question

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).

Answer 1

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.

Answer 2

Here's my last two days of reading in few a minute.

As of 2021, 93% of online browsers could view a SVG as an Favicon https://en.wikipedia.org/wiki/Usage_share_of_web_browsers

https://caniuse.com/link-icon-svg

.ICO is outdated way to create 'favicons' and requires you to make multiple small sizes of your image whereas .PNG can scale down from any size. It's easily the best lazy option for a quick icon. Because the viewing size of Icons are so small, any complex picture is undistinguishable. Making very simple designs optimal.

This is where .SVG shines.

https://www.iconfinder.com/

find image > inspect > open in new page > save image as

Paint 3D's Magic Select is free tool worth mentioning

This is by far the most informative and straight forward video on auto SVG

https://www.youtube.com/watch?v=10m_2bPXa1s

Now, we're left with a 4-8KBs of data. Which could be a 5th of your .PNGs size. Next we'll want to optimize it

https://www.youtube.com/watch?v=iVzW3XuOm7E

So we could skip a DOM request by having all the data in the head but that leads us here.

https://css-tricks.com/probably-dont-base64-svg/

Now say we're creating a Single Page Application and care about SEO. Not only do we score higher and reduce our load times but we offer a better experience for users with the lowest internet speeds.