Remix Favicon Generator

Anything under public/ is copied to the client build root, so public/favicon.ico is served at /favicon.ico. That alone is not enough for a complete set: browsers still need link tags for PNG sizes, the apple-touch-icon, and a manifest, and those tags come from route modules rather than from a static HTML file.

The root route is the right place. Its links() return value is aggregated with every other matched route and rendered by <Links /> in the document shell, so a declaration there covers every page including error boundaries that still render inside the root layout.

Same layout whether the package.json still says remix or already says react-router.

import { Links, Meta, Outlet, Scripts } from "react-router";
// Remix v2: import those from "@remix-run/react" instead.

export function links() {
  return [
    { rel: "icon", href: "/favicon.ico", sizes: "any" },
    {
      rel: "icon",
      type: "image/png",
      sizes: "32x32",
      href: "/favicon-32x32.png",
    },
    { rel: "apple-touch-icon", href: "/apple-touch-icon.png" },
    { rel: "manifest", href: "/site.webmanifest" },
  ];
}

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

Paths are root-absolute against public/. Dropping <Links /> from the shell silently drops every route's link declarations, including the favicon.