The 42 byte transparent GIF saw ample use in web development a quarter century ago, when it was used to create pixel perfect <table> layouts. Some things have changed for the better.
<link rel="icon" href="data:image/gif;base64,R0lGODlhAQABAAAAADs="> <link
rel="shortcut icon"
href='data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">%3ccircle cx="25" cy="50" r="20"/>%3ccircle cx="75" cy="50" r="20"/>%3c/svg>'
/> <link rel=icon href=data:>
With the bonus you've probably already remembered how to reconstruct this on demand just by reading this comment. It is "invalid" data but so is your example on Safari and Firefox instead of Chromium based browsers. It doesn't matter as much because that problem is local and silent in the logs, unlike the request.However it's pretty bad on narrow screens. I wish there was some progressive enhancement via modern CSS, or at least just dark mode.