Add favicons to Next.js App Router (upload logo, paste snippet, done)
Use a complete favicon pack instead of chasing one-off files. This guide shows where to place files in public/ and where to paste the head snippet in Next.js.
If you are adding favicons to a Next.js app, the two problems are always the same: file placement and correct <head> tags.
Use this workflow:
- Generate a full pack and snippet: Favicon Generator
- Verify the live result: Favicon Checker
Step 1: generate a favicon pack
Open the Favicon Generator and upload a square logo (512x512 is a good baseline). Download the ZIP.
If you use a non-root folder (recommended), set the base path to something like /favicons so your files stay organized.
Step 2: copy files into public/
In Next.js, anything in public/ is served at the site root.
If you picked /favicons, your structure should look like this:
public/
favicons/
favicon.ico
favicon-16.png
favicon-32.png
favicon-48.png
favicon-64.png
favicon-96.png
favicon-128.png
favicon-256.png
favicon-512.png
apple-touch-icon.png
site.webmanifest
browserconfig.xml
If your generator pack uses different names, keep the names; do not rename files unless you also update the snippet.
Step 3: paste the snippet into your <head>
If your app already has an app/layout.tsx that renders <html> and <head>, paste the snippet inside that <head>.
Example shape:
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
{/* Paste the favicon snippet here */}
</head>
<body>{children}</body>
</html>
);
}
The Favicon Generator includes an html-snippet.txt file. Use it; it is easy to get the ordering or paths wrong by hand.
Step 4: avoid Next.js icon conflicts
Next.js can also serve icons from special files like app/favicon.ico or app/icon.png. That is fine, but if you also add manual <link rel="icon"> tags you can end up with two competing sources of truth.
Pick one approach:
- Use generated files in
public/+<link>snippet, or - Use Next.js special icon files and remove manual tags
Step 5: verify on a clean browser profile
Favicons are cached aggressively. Verify like this:
- Open an incognito window
- Hard reload
- Check the page title tab icon
Then run the Favicon Checker against your production URL to confirm:
- which icon URLs are discovered
- which URLs return errors
- which sizes are actually reachable
Common mistakes
The base path does not match the deployed folder
If the snippet references /favicons/favicon-32.png but you deployed to /, you will get broken icons.
Only deploying favicon.ico
iOS and PWAs will not use it for everything. Deploy the full set.
Assuming it updated because "it works locally"
Local dev is not a cache test. Always verify on the live URL.
Related tools
- Need a standalone ICO? PNG to ICO
- Have an old ICO and need PNGs? ICO to PNG
- Debug missing or broken links: Favicon Checker