How to Add a Favicon in Angular

To add a favicon in Angular, put your favicon.ico file in the folder that the Angular build copies as static assets. In projects generated by recent Angular CLI versions, that folder is public. In older projects, the file sits directly in src. Make sure that location is listed under assets in angular.json. Then reference the icon with a link rel="icon" tag in src/index.html. Finally, build the app and confirm that the icon appears in the output folder and in the browser tab.

Terms used in this guide

• Favicon: the small icon that browsers show in tabs, bookmarks and history lists.
• Raster image: an image made of a fixed grid of pixels. It loses sharpness when enlarged.
• Vector image: an image described by geometric paths and shapes, so it can be scaled without loss.
• ICO: a container format that can hold several raster images at different pixel sizes in one file. The browser picks the size that fits.
• SVG: a text-based vector format that browsers can render directly.
• Assets configuration: the list in angular.json that tells the Angular build which static files to copy into the compiled output.

Step 1: Prepare the icon from your logo artwork

Start from your vector master file rather than a screenshot or a web-sized PNG. At tab size, a full logo with a wordmark usually turns into an unreadable smudge. A simplified symbol, monogram or single letter from the identity tends to work better. This is a design recommendation, not a technical requirement. Export raster versions from the vector source and combine them into an ICO file. Small sizes such as 16×16 and 32×32 pixels are common choices. At those sizes, review each export and adjust the artwork so key edges land on whole pixels instead of blurring across two.

If you also plan to ship an SVG favicon, check the file before using it. An .svg extension does not prove the file is pure vector. It may wrap an embedded bitmap, which you can spot by opening it in a vector editor or a text editor. A file extension also says nothing about whether you have permission to reuse a logo, so confirm usage rights for any mark you did not create.

Step 2: Place the file in the correct folder

Look at your project structure to find which layout it uses. If a public folder at the project root already contains a default favicon.ico, the project uses the newer layout. If src contains favicon.ico, it uses the older one. The simplest change is to replace the default file with yours and keep the name favicon.ico. That way, the existing configuration and HTML tag keep working without edits.

Step 3: Confirm that angular.json copies the icon

Open angular.json and find the assets array under the build options of your application project. In the newer layout, the whole public folder is copied, so any file you add there is included automatically:

"assets": [
  {
    "glob": "**/*",
    "input": "public"
  }
]

In the older layout, files are usually listed one by one:

"assets": [
  "src/favicon.ico",
  "src/assets"
]

With the older layout, any new file you add next to favicon.ico, such as favicon.svg, must also be added to this array. Otherwise it will not be copied into the build. After you edit angular.json, stop and restart ng serve so the change takes effect.

Step 4: Reference the icon in index.html

Open src/index.html and make sure the head element contains a link to the icon. New projects include this tag by default:

<link rel="icon" type="image/x-icon" href="favicon.ico">

Keep the href relative, without a leading slash. A relative path resolves against the base href set in index.html, so it keeps working if the app is deployed under a subpath. A leading slash always points to the domain root and breaks in that case.

To offer a scalable vector icon as well, add an SVG link and keep the ICO link as a fallback. Browser support for SVG favicons is not universal:

<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/svg+xml" href="favicon.svg">

Step 5: Build and verify the result

• Run ng build and open the generated output folder under dist.
• Confirm that favicon.ico (and favicon.svg, if used) is present in the output.
• Open the built index.html and check that the link tags point to the correct file names.
• Serve the app, open it in a browser and look at the tab icon.
• In the browser developer tools, open the Network panel, reload the page and confirm that the favicon request succeeds rather than returning a not-found error.

Browsers cache favicons aggressively, so the old icon may still appear after a correct change. Test in a private window or after clearing the cache. You can also force a fresh download by renaming the file, or by appending a version query to the href, for example favicon.ico?v=2.

Troubleshooting

Symptom | Likely cause | Fix

Default Angular icon still shows | Browser cache, or the default file was not replaced | Replace the file, then test in a private window

Favicon returns not found | File not listed in assets, or saved in the wrong folder | Check the assets array and the file location, then restart ng serve

Icon works locally but not on the server | Absolute href combined with deployment under a subpath | Use a relative href that resolves against the base href

Icon looks blurry or illegible | Detailed logo artwork downscaled to tab size | Use a simplified mark and adjust edges at small pixel sizes

Gaps to check for your project

No project-specific details were available for this guide. Your exact Angular version, build configuration and hosting setup are unknown, and the steps above follow the default CLI layouts. If your angular.json differs, follow its assets configuration and the Angular documentation for your version. Icons for other platforms, such as home-screen icons or a web app manifest, have their own size and format requirements and are outside the scope of this guide.