Favicon 401 or 404 Error in Angular Single Page Applications (SPA)

This was an issue I recently encountered involving 401 & 404 HTTP errors generated for the Favicon.ico file in an Angular Single Page Application (SPA) that was built by a vendor that I’m servicing now for a customer.

Neither Chrome nor Microsoft Edge complained as much as Firefox did about the Favicon error. I can’t stand to see errors in applications so I had to find a way to solve this.

Luckily, after a bit of searching, I had found this discussion on StakeOverFlow about the Favicon throwing in error like this.

The Favicon Fix for Angular Apps

Use this “shortcut icon” tag instead of the favicon tag.

<link rel="shortcut icon" href="#">

This simple fix resolved my issue and I no longer see any 401 Unauthorized or 404 Not Found errors involving the favion.ico file in my Angular application.

As always, I hope this little snippet of knowledge helps someone. 😉

~Cyber Abyss

Author: Rick Cable / AKA Cyber Abyss

Veteran, Coder, Hacker and Founder of FinditClassifieds.com in 1997. Currently a senior full-stack software developer supporting multiple teams and products at a large healthcare organization.