Quick answer
Current Angular workspaces copy the public directory into the build output by default. Existing workspaces may also use angular.json asset patterns, including the historical src/favicon.ico-to-root mapping.
- Last verified
- July 31, 2026
- Evidence
- Primary documentation plus a route-specific implementation example
- Primary sources
- 2
Project paths and constraints
Current Angular workspaces copy the public directory into the build output by default. Existing workspaces may also use angular.json asset patterns, including the historical src/favicon.ico-to-root mapping.
Asset copying is controlled by workspace configuration. Older and newly generated projects can use different source folders, so the build config—not a remembered convention—is authoritative.
Connected next stepHow to Add a Favicon in Vue and Vite for the closest prerequisite or comparison.
Declare favicon metadata once
Declare the complete icon set in src/index.html so it appears before the Angular application boots. Do not wait for a component to inject ordinary site-wide favicon links.
Keep the link elements in the index file configured by the active build target. Check angular.json before assuming src/index.html or a remembered favicon location applies to this workspace.
Connected next stepSvelteKit Favicon Guide: Static Files & App HTML for the next connected implementation decision.
Build, deploy, and verify
Inspect the configured outputPath after ng build, then test the deployed base href. Confirm that root-relative URLs have not escaped an application hosted below a path prefix.
If the ICO exists in src but not in the outputPath, its asset rule is missing or targets another folder. Correct the copy rule before changing markup.
Connected next stepOpen the most relevant production tool and verify the decision with a working output.
Trace Angular assets from workspace to outputPath
Read the selected project's build options and locate its assets, index, outputPath, baseHref, and deployUrl settings. Then run the production configuration and confirm that the public directory or explicit favicon glob produced real files in the browser output.
Serve the compiled directory with the intended path prefix and open a nested client route. If the favicon request returns the Angular shell, repair the server fallback or asset copy rule; changing the component tree will not create a missing static file.
Angular asset copying and deploy URLs
Treat the workspace configuration as the source of truth. Confirm whether the project copies the public directory or explicit asset globs, then verify that every icon and manifest reaches the configured outputPath.
When the application uses a non-root deploy URL, compare base href, asset URLs and server rewrites. An icon left in the source tree but absent from the browser build cannot be repaired by changing its link tag.
Production file tree and code: Angular browser output contract
The workspace asset configuration must copy these files into the browser output. Keep the declarations in the configured index document rather than injecting them from an application component.
public/
├── favicon.svg
├── favicon.ico
├── apple-touch-icon.png
└── site.webmanifest
src/index.html
angular.json<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Review the headings, sources, implementation artifact, and update record for this guide as structured JSON.
Download guide evidence ↓- Guide
- Angular Favicon Guide: Assets, HTML & Build Output
- Coverage
- Client behavior can change by browser, operating system, platform version, cache state and deployment configuration. Unperformed manual observations are not claimed.
Questions, answered
Should I put favicon.ico in public or src?+
Use the path copied by this workspace's assets configuration. Current projects commonly copy public, while older workspaces may retain an explicit src/favicon.ico rule.
Why does ng serve work when production does not?+
The production configuration can use a different output path, base href, asset list, or host rewrite. Inspect the selected build target and its emitted browser files.