Where do I put the favicon in a Remix project?

In the public folder, which Remix serves from the site root, so public/favicon.ico becomes /favicon.ico. Return the icon link tags from the links export in app/root.tsx.

How do I add favicon links in Remix?

Export a links function from app/root.tsx that returns an array of link descriptor objects (rel, href, sizes), and ensure the component is rendered inside . Remix injects them into the document.

Why isn't my Remix favicon showing?

Check that is rendered in the head of root.tsx, that the icon files live in public/ (not bundled), and that the hrefs match the filenames. Then hard-refresh to clear the cached favicon.

Should the favicon links go in root.tsx or a route?

In the root route (app/root.tsx) so every page inherits them. Route-level links only apply to that route, which is rarely what you want for a site-wide favicon.

All platforms

Favicon for Remix

How to add a favicon in Remix

To add a favicon in Remix, place your icon files in the public folder (served at the site root) and return the <link> tags from the links export in your root route (app/root.tsx). Remix renders those links into the document head via the Links component, and public/ files resolve at /.

What you need

favicon.ico plus PNG favicons (32x32), a 180x180 apple-touch-icon, and 192/512 PWA icons.
The public folder, which Remix serves from the site root.
A links export in app/root.tsx (rendered by <Links />) to declare the icon tags.

Step-by-step: add a favicon in Remix

Generate your icon set. Use Logo2Favicon to create favicon.ico, the PNG sizes, the Apple touch icon, the PWA icons, a maskable icon, and the manifest - in your browser, nothing uploaded.
Add the files to public/. Copy favicon.ico, favicon-32x32.png, apple-touch-icon.png, and site.webmanifest into the public folder. Remix serves these from /.
Return them from the links export. In app/root.tsx, add the icon objects to the array returned by export const links, then make sure <Links /> is rendered inside <head>.
Build and verify. Run the build and confirm the tab icon and that /favicon.ico and /site.webmanifest return 200.

app/root.tsx (return icon links from the links export):

export const links = () => [
  { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
  { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' },
  { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
  { rel: 'manifest', href: '/site.webmanifest' },
];

Common mistakes to avoid

Forgetting to render <Links /> inside <head> in root.tsx, so the link export never reaches the document.
Importing icons through the bundler instead of placing them in public/, which changes the URL and 404s /favicon.ico.
Declaring icon links in a child route rather than the root, so they only apply to that route.
Forgetting the manifest, so Android home-screen and PWA installs fall back to a generic glyph.

Free forever, no sign-up

Generate a complete icon set for Remix

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for Remix. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where do I put the favicon in a Remix project?: In the public folder, which Remix serves from the site root, so public/favicon.ico becomes /favicon.ico. Return the icon link tags from the links export in app/root.tsx.
How do I add favicon links in Remix?: Export a links function from app/root.tsx that returns an array of link descriptor objects (rel, href, sizes), and ensure the <Links /> component is rendered inside <head>. Remix injects them into the document.
Why isn't my Remix favicon showing?: Check that <Links /> is rendered in the head of root.tsx, that the icon files live in public/ (not bundled), and that the hrefs match the filenames. Then hard-refresh to clear the cached favicon.
Should the favicon links go in root.tsx or a route?: In the root route (app/root.tsx) so every page inherits them. Route-level links only apply to that route, which is rarely what you want for a site-wide favicon.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.