Wider browser support for dynamic favicon

src/index.html

@@ -17,10 +17,15 @@
 	<meta name="mobile-web-app-capable" content="yes" />
 	<meta name="theme-color" content="#222222" />
 	
+	<!-- Icons -->
 	<link rel="apple-touch-startup-image" href="/iris/assets/app-icon_512.png" />
 	<link rel="apple-touch-icon" sizes="192x192" href="/iris/assets/logo-app_192.png" />
 	<link rel="apple-touch-icon" sizes="512x512" href="/iris/assets/logo-app_512.png" />
-	<link id="favicon" rel="shortcut icon" type="image/ico" href="/iris/assets/app-icon_64.png" />
+
+	<link class="favicon" rel="shortcut icon" type="image/ico" href="/iris/assets/favicon.png" />
+	<link class="favicon" rel="shortcut icon" type="image/x-icon" href="/iris/assets/favicon.png" />
+	<link class="favicon" rel="shortcut-icon" href="/iris/assets/favicon.png" />
+
 	<link rel="mask-icon" href="/iris/assets/app-icon.svg" color="#08d58f" />
 
 	<!-- Loading screen styles -->

src/js/helpers.js

@@ -147,22 +147,25 @@ export let toJSON = function(data){
 /**
  * Set the app's favicon to a specific image.
  * 
- * @param file String
- * @return Boolean 
+ * @param filename String
  */
-export let setFavicon = function(favicon){
-	console.log(favicon);
-	let link = document.createElement('link'),
-	oldLink = document.getElementById('favicon');
-	link.id = 'favicon';
-	link.rel = 'shortcut icon';
-	link.href = "/iris/assets/"+favicon;
+export let setFavicon = function(filename){
+	let links = document.getElementsByClassName('favicon');
+	for (let link of links){
 
-	if (oldLink) {
-		document.head.removeChild(oldLink);
+		// Construct new <links>
+		let new_link = document.createElement('link');
+		new_link.className = link.className;
+		new_link.rel = link.rel;
+		new_link.href = "/iris/assets/"+filename;
+		if (link.type){
+			new_link.type = link.type;
+		} 
+
+		// Remove the old one and add the new one
+		document.head.removeChild(link);
+		document.head.appendChild(new_link);
 	}
-
-	document.head.appendChild(link);
 }
 
 

src/js/services/mopidy/middleware.js

@@ -259,6 +259,7 @@ const MopidyMiddleware = (function(){
 
             case 'MOPIDY_DISCONNECTED':
                 store.dispatch(uiActions.createNotification({type: 'bad', content: 'Mopidy disconnected'}));
+                helpers.setFavicon('favicon_error.png');
                 break;
 
             case 'MOPIDY_DEBUG':
@@ -312,6 +313,12 @@ const MopidyMiddleware = (function(){
 
             case 'MOPIDY_PLAY_STATE':
                 store.dispatch(uiActions.setWindowTitle(null, action.play_state));
+
+                if (action.play_state == 'playing'){
+                    helpers.setFavicon('favicon.png');
+                } else {
+                    helpers.setFavicon('favicon_paused.png');
+                }
                 next(action);
                 break
 

src/js/services/ui/middleware.js

@@ -35,16 +35,6 @@ const UIMiddleware = (function(){
                     var play_state = store.getState().mopidy.play_state;
                 }
 
-                if (play_state == 'playing'){
-                    helpers.setFavicon('favicon.png');
-                } else {
-                    helpers.setFavicon('favicon_paused.png');
-                }
-
-                if (!store.getState().mopidy.connected){
-                    helpers.setFavicon('favicon_error.png');
-                }
-
                 if (action.title){
                     var title = action.title;
                 } else {

src/js/views/Settings.js

@@ -136,7 +136,7 @@ class Settings extends React.Component {
 
 		return (
 			<span className={colour+'-text'}>
-				<Icon className={className} name={icon} />{status}
+				<Icon className={className} name={icon} /> {status}
 			</span>
 		);
 	}

src/scss/global/_forms.scss

@@ -429,6 +429,10 @@ select {
 			display: block;
 			padding: 10px 14px 10px 0;
 		}
+
+		.icon {
+			margin-bottom: -3px;
+		}
 	}
 
 	.label {