How to change the icon in taskbar (connected & disconnected icon) and add tooltip

Question

I am using angular to design an app. I would like to change the app icon when it is connected (app icon with tick) or disconnected (app icon with x mark). I also like to have the tooltip to show connected to app or disconnected to app when mouse over to the app icon. If can add image in tooltip will be better (tick for connected, x mark for disconnected)

Here is the example from oneDrive

I tried some code in app.component.ts but still cannot. Am I missing some setting?

ngOnInit() {
const favicon = document.querySelector('link[rel="icon"]') as HTMLLinkElement;
this.loadingService.loadingSub.pipe(takeUntil(this.unsubscribe)).pipe(delay(0)).subscribe(x => this.loading = x);

this.appService.isAuthenticatedChecked.pipe(takeUntil(this.unsubscribe)).subscribe(result => {
  
  if (result) {
    this.isLoggedIn = true;
    favicon.href = 'assets/icons/connected.ico';
  } else {
    this.isLoggedIn = false;
    favicon.href = 'assets/icons/disconnected.ico';
  }
  console.log("blalbalbalbalblab, the isLoggedIn is " + this.isLoggedIn);
});

}