ANSWER

Quick answer

Nuxt serves files in public at root URLs without build processing. A file at public/favicon.ico becomes /favicon.ico, which makes the directory appropriate for icons, robots.txt, and the web manifest.

Last verified
July 31, 2026
Evidence
Primary documentation plus a route-specific implementation example
Primary sources
2
01

Put stable files in public

Nuxt serves files in public at root URLs without build processing. A file at public/favicon.ico becomes /favicon.ico, which makes the directory appropriate for icons, robots.txt, and the web manifest.

Keep generated favicon filenames stable and copy the complete package into public unless a CDN or base URL requires a different arrangement.

Connected next stepHow to Add a Favicon to React and Vite for the closest prerequisite or comparison.

02

Declare the shared head metadata

For static site-wide metadata, add icon link objects under app.head in nuxt.config. For reactive or component-level metadata, use Nuxt’s head composables while avoiding duplicate rel=icon declarations.

If app.cdnURL or app.baseURL is configured, verify whether literal root-relative icon paths need to be constructed from runtime configuration.

Connected next stepHow to Add a Favicon in Astro: Public Files and Layouts for the next connected implementation decision.

03

Build and test the production output

Inspect the generated or server-rendered head, request every icon URL, and validate the manifest after deployment. A working development server does not prove the hosting base path is correct.

Connected next stepOpen the most relevant production tool and verify the decision with a working output.

BUILD

Production file tree and code: Nuxt public files and global head config

Files under public keep direct URLs; nuxt.config.ts owns fixed site-wide declarations. Use a composable only when the favicon genuinely changes with application state.

FILE TREE
public/
├── favicon.svg
├── favicon.ico
├── apple-touch-icon.png
└── site.webmanifest
nuxt.config.ts
TYPESCRIPT
export default defineNuxtConfig({
  app: { head: { link: [
    { rel: 'icon', href: '/favicon.svg', type: 'image/svg+xml' },
    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
    { rel: 'manifest', href: '/site.webmanifest' },
  ] } }
})
DOWNLOADABLE EVIDENCE

Review the headings, sources, implementation artifact, and update record for this guide as structured JSON.

Download guide evidence ↓
Primary references
Evidence scope
Guide
How to Add a Favicon in Nuxt: Public Files and Head Tags
Coverage
Client behavior can change by browser, operating system, platform version, cache state and deployment configuration. Unperformed manual observations are not claimed.
Q&A

Questions, answered

Does Nuxt process files in public?+

No. Nuxt serves or copies public files without build transformation.

Should I use app.head or useHead?+

Use app.head for fixed global metadata and useHead when the metadata genuinely needs reactive application logic.