TL;DR

Change the href in your favicon’s <link> element to be ng-href. Prosper.

Introduction

As someone who writes code, I often find myself Googling error codes and craftily worded searches in an attempt to find someone who has already solved my current problem.  Thanks to the Internet, this has a tremendous success rate, but obviously is not 100%.  So when my quirky queries do not yield success and I have to pick up my own slack again, I figure it might be nice to pass that knowledge back into the world.  Truth be told, my SEO isn’t going to help anyone find this answer in a timely matter, but if this does help you out, then great!

The Problem

I’m using Angular for a web application at work, and all told it’s been really great.  However, I noticed that the favicon was not being displayed in the browser tab, which was pretty annoying considering I had defined one in my HTML.  Oddly enough, I could see that the browser was requesting the favicon (both when defined as a local asset and a remote one), and when bookmarking a page of the app it successfully assigned the favicon to the bookmark entry, so what gives?

I suppose it’s also worth noting that our backend is a Java EE webserver, not something like Node/Express where there was considerably more Google results.  Also, for that same reason, I’m NOT using html5mode in AngularJS either, which may have contributed to this problem.

The Solution

I mentioned html5mode because I had suspected that while the favicon was defined in the index.html file, maybe the changing of the URL to include the hash for routing purposes was throwing the browser off (although the successful bookmarking was still nagging at me…)?  So I popped open the Dev Console and disabled javascript.  Sure enough, the favicon showed up. Re-enabled it, and it disappeared again.  So without the ability to change the server and Angular being the culprit, I figured I’d have to try and solve this within Angular.  I was about to write a directive to programmatically work with the little tab picture when I remembered one that was already built in: ngHref.  At that point I wondered: was it not working because the browser was moving a bit too quick for the application?  So I changed my <link> tag to use an ng-href element instead of the href, and ever since refreshing the page my favicon has been working flawlessly, both in the browser tab, and in the bookmarks!

EDIT: Thanks to a reader in the comments, it’s worth updating to note that this post was intended for AngularJs version(s) 1.x. I have very little experience and exposure to Angular 2/4 and cannot vouch for the syntax or correctness of this post.