Emoji Favicon for Next.js
Wire an emoji favicon into your Next.js app (App Router or Pages Router) in under a minute. Works with Vercel, self-host, and static export.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to Next.js
App Router: use the metadata API
In app/layout.tsx, export a metadata object with an icons field.
// app/layout.tsx
import type { Metadata } from 'next';
export const metadata: Metadata = {
icons: {
icon: 'https://emojifavicons.com/rocket',
apple: 'https://emojifavicons.com/apple-touch-icon/rocket',
},
};Pages Router: use _document or Head
In pages/_document.tsx (or <Head> per page), add the <link> tags manually.
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html>
<Head>
<link rel="icon" type="image/svg+xml" href="https://emojifavicons.com/rocket" />
<link rel="apple-touch-icon" href="https://emojifavicons.com/apple-touch-icon/rocket" />
</Head>
<body><Main /><NextScript /></body>
</Html>
);
}Remove the default /public/favicon.ico
Next.js serves /public/favicon.ico with higher priority. Delete it or rename it so your new favicon wins.
Popular emoji favicons for Next.js
Click any emoji to see the Next.js-specific install snippet.
Troubleshooting
Vercel still serving old favicon
Vercel caches the favicon at the edge for up to 24 hours. Force a new deployment or bust with ?v=2.
Hydration mismatch warning
Make sure the favicon URL is identical in server and client render. Do not compute it from window.
Static export missing apple-touch-icon
Static export only emits what it finds in public/. Keep the absolute URL to emojifavicons.com so it is fetched at runtime, not bundled.
Favicon breaks in middleware
Exclude /favicon.ico and the emoji URL pattern from your middleware matcher.
Cannot use in next.config metadata
Metadata must live in app/layout.tsx or _document.tsx. next.config.js does not accept icons.
Frequently asked questions
Does it work with Next 13 / 14 / 15?
Yes. The metadata API is stable since Next 13. All Next versions support the <Head> approach.
Does it work with Turbopack?
Yes. Favicon resolution is independent of the bundler.
Can I use a local file instead?
Yes — drop your SVG in app/icon.svg, but you lose dark-mode variants, shapes, and animation params that emojifavicons.com provides via URL.
Does it work with Vercel’s Image Optimization?
Favicons bypass Image Optimization. They ship as a single <link>.
What about dynamic per-route icons?
You can override metadata per-route in App Router. Each page.tsx or layout.tsx can export its own metadata.icons.
Does it work with the Next.js SSR + RSC model?
Yes. The favicon URL is rendered in the HTML shell, before hydration.