Fix default icon set display

.env.example

@@ -35,9 +35,10 @@ SITE_AUTHOR=""
 OG_IMAGE="https://radio.example.com/assets/icons/og.png"
 OG_IMAGE_WIDTH=""
 OG_IMAGE_HEIGHT=""
-# Set true if you have dropped a full favicon set into ICONS_DIR
-# (apple-touch-icon.png, favicon-32x32.png, favicon-16x16.png, site.webmanifest).
-SHOW_ICONS=false
+# Render the favicon / touch-icon links. The repo ships a default set in
+# ICONS_DIR (favicon-96x96.png, favicon.svg, favicon.ico, apple-touch-icon.png,
+# site.webmanifest, web-app-manifest-*.png) — replace them with your own.
+SHOW_ICONS=true
 ICONS_DIR="assets/icons"
 # Browser UI colors.
 THEME_COLOR="#e21d31"

assets/js/player.js

@@ -215,24 +215,42 @@
   }
 
   /* ------------------------------------------------------------- artwork */
-  // Point the OpenGraph image and the favicon at the current album art.
+  // Point the OpenGraph image + browser tab favicon at the current album art.
+  // The static set is removed (including the SVG favicon, which Firefox would
+  // otherwise prefer) and replaced with a single album-art icon; the originals
+  // are kept so resetMeta() can restore them when the stream goes offline.
+  // apple-touch-icon and the web manifest are left alone (home-screen / PWA).
+  var ICON_SEL = 'link[rel~="icon"], link[rel="shortcut icon"]';
+  var _origIcons = null;
+  var _origOg = null;
+
   function updateMeta(url) {
     if (!CFG.dynamicMeta || !url) return;
+    if (_origOg === null && el.ogImage) _origOg = el.ogImage.getAttribute('content') || '';
     if (el.ogImage) el.ogImage.setAttribute('content', url);
-    // Update any existing favicon / touch-icon links...
-    var icons = document.querySelectorAll('link[rel~="icon"], link[rel="apple-touch-icon"], link[rel="shortcut icon"]');
-    for (var i = 0; i < icons.length; i++) {
-      if (icons[i].id !== 'dyn-favicon') icons[i].setAttribute('href', url);
+
+    var head = document.head, existing = head.querySelectorAll(ICON_SEL), i;
+    if (_origIcons === null) {
+      _origIcons = [];
+      for (i = 0; i < existing.length; i++) _origIcons.push(existing[i]);
+    }
+    for (i = 0; i < existing.length; i++) {
+      if (existing[i].parentNode) existing[i].parentNode.removeChild(existing[i]);
     }
-    // ...and (re)create a dedicated icon link — a fresh <link> is the most
-    // reliable way to make browsers actually repaint the favicon.
-    var old = document.getElementById('dyn-favicon');
-    if (old && old.parentNode) old.parentNode.removeChild(old);
     var link = document.createElement('link');
     link.id = 'dyn-favicon';
     link.rel = 'icon';
     link.href = url;
-    document.head.appendChild(link);
+    head.appendChild(link);
+  }
+
+  // Put the station's own favicon + OG image back (e.g. when off air).
+  function resetMeta() {
+    if (_origIcons === null) return;
+    var head = document.head, cur = head.querySelectorAll(ICON_SEL), i;
+    for (i = 0; i < cur.length; i++) if (cur[i].parentNode) cur[i].parentNode.removeChild(cur[i]);
+    for (i = 0; i < _origIcons.length; i++) head.appendChild(_origIcons[i]);
+    if (el.ogImage && _origOg !== null) el.ogImage.setAttribute('content', _origOg);
   }
 
   function setArt(url, album) {
@@ -379,6 +397,7 @@
     if (el.title)  el.title.textContent  = offName;
     if (el.art)   { el.art.setAttribute('src', offArt); el.art.title = ''; }
     resetTint();                                    // neutral look while off air
+    resetMeta();                                    // station favicon + OG back
     if (CFG.offlineStreamUrl) setSource(CFG.offlineStreamUrl, CFG.offlineLoop);
     updateMediaSession({ title: offName, artist: '', album: '' }, offArt);
   }

config.php

@@ -117,7 +117,7 @@ if (!defined('RADIO_CONFIG_LOADED')) {
             'og_width'    => radio_env('OG_IMAGE_WIDTH', ''),
             'og_height'   => radio_env('OG_IMAGE_HEIGHT', ''),
             'icons_dir'   => rtrim(radio_env('ICONS_DIR', 'assets/icons'), '/'),
-            'show_icons'  => radio_env_bool('SHOW_ICONS', false),
+            'show_icons'  => radio_env_bool('SHOW_ICONS', true),
             'theme_color' => radio_env('THEME_COLOR', radio_env('THEME_ACCENT', '#e21d31')),
             'tile_color'  => radio_env('TILE_COLOR', radio_env('THEME_COLOR', '#5e656e')),
         ],

partials/head.php

@@ -50,9 +50,11 @@ $iconsDir = cfg('seo.icons_dir');
 <?php endif; ?>
 
 <?php if (cfg('seo.show_icons')): ?>
+  <link rel="icon" type="image/png" href="<?= e($iconsDir) ?>/favicon-96x96.png" sizes="96x96"/>
+  <link rel="icon" type="image/svg+xml" href="<?= e($iconsDir) ?>/favicon.svg"/>
+  <link rel="shortcut icon" href="<?= e($iconsDir) ?>/favicon.ico"/>
   <link rel="apple-touch-icon" sizes="180x180" href="<?= e($iconsDir) ?>/apple-touch-icon.png"/>
-  <link rel="icon" type="image/png" sizes="32x32" href="<?= e($iconsDir) ?>/favicon-32x32.png"/>
-  <link rel="icon" type="image/png" sizes="16x16" href="<?= e($iconsDir) ?>/favicon-16x16.png"/>
+  <meta name="apple-mobile-web-app-title" content="<?= e(cfg('site.name')) ?>"/>
   <link rel="manifest" href="<?= e($iconsDir) ?>/site.webmanifest"/>
 <?php endif; ?>