Remix Tutorial
Emoji Favicon for Remix
Add an emoji favicon to Remix (and Remix Run v2 / React Router 7) via the root loader links export.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to Remix
1
Edit app/root.tsx
Export a links function that adds the favicon.
// app/root.tsx
import type { LinksFunction } from '@remix-run/node';
export const links: LinksFunction = () => [
{ rel: 'icon', type: 'image/svg+xml', href: 'https://emojifavicons.com/rocket' },
{ rel: 'apple-touch-icon', href: 'https://emojifavicons.com/apple-touch-icon/rocket' },
];2
Remove public/favicon.ico
Delete the starter favicon so Remix does not double-serve.
Popular emoji favicons for Remix
Click any emoji to see the Remix-specific install snippet.
Troubleshooting
Remix not re-rendering the link
Restart remix dev. Remix caches the root links map.
Fly / Vercel / Netlify missing the favicon
Absolute URLs work everywhere. Avoid relative paths in links.
React Router 7 migration broke it
The links export is identical in React Router 7. No changes needed.
TypeScript complaining
Import LinksFunction from your adapter, or cast as any.
Frequently asked questions
Does it work with Remix’s data loader model?
Yes. links is a synchronous export, evaluated at route-match time.
Can I set it per-route?
Yes — each route can export its own links.
Does it work with React Router 7 (the Remix successor)?
Yes — the same links API carries over.
Will this work with Remix’s SPA mode?
Yes — the link lives in the HTML shell.