Prevent Chrome from requesting the favicon for every route change

There is this old bug in Chrome that causes it to request the favicon for every route change in Remix.

In production, this isn't a problem since the favicon is cached. However, in development, it clutters the network logs especially when setting unstable_shouldReload to false and expecting no resources to be fetched.

To fix in development, we can an inline Data URL version of the icon or a placeholder one.

Here's what I use to render an inline dark square favicon in development:

export const links: LinksFunction = () => {
  return [
    {
      rel: "icon",
      href:
        process.env.NODE_ENV === "development"
          ? "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAkSURBVHgB7cwxAQAACAJBNAj9W2oIFoa/ADe2T4FViICAoCV4ujsBeUD8BqkAAAAASUVORK5CYII="
          : "/favicon.png",
      type: "image/png",
    },
  ];
};

I advice against using that in the production enviroment as it'll add 500 bytes (or whatever the size of your encoded favicon) to the document for the initial page load for returning users that would've been cached otherwise.