Emoji Favicon for Angular
Add an emoji favicon to Angular 14+ (standalone or module-based) in one minute.
<link rel="icon" href="https://emojifavicons.com/rocket">How to add an emoji favicon to Angular
Edit src/index.html
Angular’s HTML shell is src/index.html. Replace the existing <link rel="icon"> line.
<!-- src/index.html --> <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" />
Remove src/favicon.ico
Angular CLI bundles src/favicon.ico by default. Delete it and remove the matching entry from angular.json.
Popular emoji favicons for Angular
Click any emoji to see the Angular-specific install snippet.
Troubleshooting
ng serve still shows old favicon
Restart ng serve. Angular caches index.html in dev.
Production build missing favicon
Confirm the entry is in src/index.html, not a component template.
Angular Universal SSR issue
The link lives in the HTML shell, served by the Node server. Restart the SSR process after the change.
Service worker caching old icon
Bump your service worker version, or set navigationUrls to exclude /favicon.ico.
Material or PrimeNG overriding
Component libraries do not override <head> tags.
Frequently asked questions
Does it work with Angular 18 / 19?
Yes. The HTML shell approach is stable since Angular 2.
Does it work with Angular Universal?
Yes — the server renders index.html with the link intact.
Can I set it dynamically via the Title service?
Use a small service wrapping document.querySelector(‘link[rel=icon]’) to swap it at runtime.
Will this affect Lighthouse score?
No impact — favicon is a tiny SVG, unaffected by performance budgets.