Favicon updated to use 4 different sizes

-Instead of using a single file for the favicon, there are now 4 size options for a more modern favicon experience as inspired by this article: https://www.emergeinteractive.com/insights/detail/The-Essentials-of-FavIcons/
-Old default favicon file has been replaced with 4 different sized pngs
-Not all sizes need to be set. If any of the new settings are left blank or the filename does not exist, that favicon size will be skipped

app.js

@@ -49,7 +49,24 @@ if (settings.webserver.cors.enabled == true) {
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'pug');
 
-app.use(favicon(path.join(__dirname, settings.shared_pages.favicon)));
+var default_favicon = '';
+
+// loop through the favicons
+Object.keys(settings.shared_pages.favicons).forEach(function(key, index, map) {
+  // remove the public directory from the path if exists
+  if (settings.shared_pages.favicons[key] != null && settings.shared_pages.favicons[key].indexOf('public/') > -1)
+    settings.shared_pages.favicons[key] = settings.shared_pages.favicons[key].replace(/public\//g, '');
+
+  // check if the favicon file exists
+  if (!db.fs.existsSync(path.join('./public', settings.shared_pages.favicons[key])))
+    settings.shared_pages.favicons[key] = '';
+  else if (default_favicon == '')
+    default_favicon = settings.shared_pages.favicons[key];
+});
+
+if (default_favicon != '')
+  app.use(favicon(path.join('./public', default_favicon)));
+
 app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: true }));

lib/settings.js

@@ -98,9 +98,23 @@ exports.shared_pages = {
   "theme": "Exor",
   // page_title: The text to display at the end of the HTML title tag and also displayed in the page header when the "shared_pages.page_header.home_link" setting is set to "title"
   "page_title": "eIquidus",
-  // favicon: The path to an icon file that is displayed in a browser window/tab and serves as branding for your website. Its main purpose is to help visitors locate your page easier when they have multiple tabs open
-  //          NOTE: The path root is /
-  "favicon": "public/favicon.ico",
+  // favicons: a collection of image or icon files that are displayed in a browser window/tab and serve as branding for your website. Their main purpose is to help visitors locate your page easier when they have multiple tabs open
+  //          Modern favicon sizes were inspired by this web article: https://www.emergeinteractive.com/insights/detail/The-Essentials-of-FavIcons/
+  //          NOTE: If any of the favicons are left blank or not set to a valid file, they will be disabled and unused
+  "favicons": {
+    // favicon32: The path to a 32x32 image or icon file
+    //            NOTE: The path root is /public
+    "favicon32": "favicon-32.png",
+    // favicon128: The path to a 128x128 image or icon file
+    //            NOTE: The path root is /public
+    "favicon128": "favicon-128.png",
+    // favicon180: The path to a 180x180 image or icon file
+    //            NOTE: The path root is /public
+    "favicon180": "favicon-180.png",
+    // favicon192: The path to a 192x192 image or icon file
+    //            NOTE: The path root is /public
+    "favicon192": "favicon-192.png"
+  },
   // logo: The path to an image file that is displayed on the api page as well as in one of the top panels when enabled
   //       This logo can also be displayed in the header when the "shared_pages.page_header.home_link" setting is set to "logo" and the "shared_pages.page_header.home_link_logo" setting is blank or an invalid file
   //       NOTE: The path root is /public
@@ -1702,6 +1716,18 @@ exports.loadSettings = function loadSettings() {
     if (Object.byString(json_settings, 'richlist') != null) delete json_settings.richlist;
     if (Object.byString(json_settings, 'movement') != null) delete json_settings.movement;
 
+    // fix old deprecated settings from v1.100
+    if (json_settings.shared_pages.favicons == null && json_settings.shared_pages.favicon != null && fs.existsSync(json_settings.shared_pages.favicon)) {
+      // create a new empty favicons object
+      json_settings.shared_pages.favicons = {};
+
+      // map the old favicon to the first entry in the new location
+      json_settings = fix_deprecated_setting(json_settings, 'shared_pages.favicon', 'shared_pages.favicons.favicon32');
+
+      // delete old setting
+      delete json_settings.shared_pages.favicon;
+    }
+
     // loop through all settings from the settings.json file
     for (var current_setting in json_settings) {
       // merge settings from settings.json with the defaults from settings.js

settings.json.template

@@ -97,9 +97,23 @@
     "theme": "Exor",
     // page_title: The text to display at the end of the HTML title tag and also displayed in the page header when the "shared_pages.page_header.home_link" setting is set to "title"
     "page_title": "eIquidus",
-    // favicon: The path to an icon file that is displayed in a browser window/tab and serves as branding for your website. Its main purpose is to help visitors locate your page easier when they have multiple tabs open
-    //          NOTE: The path root is /
-    "favicon": "public/favicon.ico",
+    // favicons: a collection of image or icon files that are displayed in a browser window/tab and serve as branding for your website. Their main purpose is to help visitors locate your page easier when they have multiple tabs open
+    //          Modern favicon sizes were inspired by this web article: https://www.emergeinteractive.com/insights/detail/The-Essentials-of-FavIcons/
+    //          NOTE: If any of the favicons are left blank or not set to a valid file, they will be disabled and unused
+    "favicons": {
+      // favicon32: The path to a 32x32 image or icon file
+      //            NOTE: The path root is /public
+      "favicon32": "favicon-32.png",
+      // favicon128: The path to a 128x128 image or icon file
+      //            NOTE: The path root is /public
+      "favicon128": "favicon-128.png",
+      // favicon180: The path to a 180x180 image or icon file
+      //            NOTE: The path root is /public
+      "favicon180": "favicon-180.png",
+      // favicon192: The path to a 192x192 image or icon file
+      //            NOTE: The path root is /public
+      "favicon192": "favicon-192.png"
+    },
     // logo: The path to an image file that is displayed on the api page as well as in one of the top panels when enabled
     //       This logo can also be displayed in the header when the "shared_pages.page_header.home_link" setting is set to "logo" and the "shared_pages.page_header.home_link_logo" setting is blank or an invalid file
     //       NOTE: The path root is /public

views/layout.pug

@@ -5,6 +5,14 @@ html(lang='en')
     meta(name='viewport' content='width=device-width, initial-scale=1')
     meta(http-equiv='Content-Language', content='en')
     title=page_title_prefix + ' - ' + settings.shared_pages.page_title
+    if settings.shared_pages.favicons.favicon32 != ''
+      link(rel='icon', href=settings.shared_pages.favicons.favicon32, sizes='32x32')
+    if settings.shared_pages.favicons.favicon128 != ''
+      link(rel='icon', href=settings.shared_pages.favicons.favicon128, sizes='128x128')
+    if settings.shared_pages.favicons.favicon180 != ''
+      link(rel='icon', href=settings.shared_pages.favicons.favicon180, sizes='180x180')
+    if settings.shared_pages.favicons.favicon192 != ''
+      link(rel='icon', href=settings.shared_pages.favicons.favicon192, sizes='192x192')
     link(rel='stylesheet', href='/css/themes/' + settings.shared_pages.theme.toLowerCase() + '/bootstrap.min.css' + (themeHash == null ? '' : '?h=' + themeHash))
     link(rel='stylesheet', href='https://use.fontawesome.com/releases/v5.15.4/css/all.css')
     if active == 'markets' || active == 'richlist'