diff --git a/src/app/app.ts b/src/app/app.ts
index ae2ce0e..9a03d87 100644
--- a/src/app/app.ts
+++ b/src/app/app.ts
@@ -1,8 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, effect, inject } from '@angular/core';
+import { Title } from '@angular/platform-browser';
import { RouterOutlet } from '@angular/router';
import { NavbarComponent } from './navbar/navbar.component';
import { MediaPlayerComponent } from './media-player/media-player.component';
import { FooterComponent } from './footer/footer.component';
+import { StationConfigService } from './services/station-config.service';
@Component({
selector: 'app-root',
@@ -11,4 +13,23 @@ import { FooterComponent } from './footer/footer.component';
templateUrl: './app.html',
styleUrl: './app.scss',
})
-export class App {}
+export class App {
+ private titleService = inject(Title);
+ private stationConfig = inject(StationConfigService);
+
+ constructor() {
+ effect(() => {
+ const config = this.stationConfig.config();
+ const fullName = `${config.name_primary} ${config.name_secondary}`.trim();
+ this.titleService.setTitle(fullName);
+
+ // Update favicon to use the station's logo_url.
+ // Meta.updateTag() is unreliable for favicons in some browsers,
+ // so we update the element directly.
+ const faviconEl = document.querySelector('link[rel="icon"]') as HTMLLinkElement | null;
+ if (faviconEl && config.logo_url) {
+ faviconEl.href = config.logo_url;
+ }
+ });
+ }
+}
diff --git a/src/index.html b/src/index.html
index f91a1d5..9221940 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
- RadioStation
+ KMountain Flower Radio