Improve tray icon images

1. Adds generator script
2. This script uses special packer that forces png compression,
   reducing the resulting .ico file sizes tremendously
3. Also uses optipng to reduce the size around 20% more
4. Since the sizes are reduced, we generate the icons for all
   non-custom dpi scaling values
5. Renames favicon.ico to sunshine.ico, since it's now used in
   other places such as tray icon

docs/source/conf.py

@@ -69,7 +69,7 @@
 # -- Options for HTML output -------------------------------------------------
 
 # images
-html_favicon = os.path.join(root_dir, 'src_assets', 'common', 'assets', 'web', 'images', 'favicon.ico')
+html_favicon = os.path.join(root_dir, 'src_assets', 'common', 'assets', 'web', 'images', 'sunshine.ico')
 html_logo = os.path.join(root_dir, 'sunshine.png')
 
 # Add any paths that contain custom static files (such as style sheets) here,

scripts/icons/convert_and_pack.sh

@@ -0,0 +1,61 @@
+#!/bin/bash
+
+if ! [ -x "$(command -v ./go-png2ico)" ]; then
+    echo "./go-png2ico not found"
+    echo "download the executable from https://github.com/J-Siu/go-png2ico"
+    echo "and drop it in this folder"
+    exit 1
+fi
+
+if ! [ -x "$(command -v ./oxipng)" ]; then
+    echo "./oxipng executable not found"
+    echo "download the executable from https://github.com/shssoichiro/oxipng"
+    echo "and drop it in this folder"
+    exit 1
+fi
+
+if ! [ -x "$(command -v inkscape)" ]; then
+    echo "inkscape executable not found"
+    exit 1
+fi
+
+icon_base_sizes=(16 64)
+icon_sizes_keys=() # associative array to prevent duplicates
+icon_sizes_keys[256]=1
+
+for icon_base_size in ${icon_base_sizes[@]}; do
+    # increment in 25% till 400%
+    icon_size_increment=$((icon_base_size / 4))
+    for ((i = 0; i <= 12; i++)); do
+        icon_sizes_keys[$((icon_base_size + i * icon_size_increment))]=1
+    done
+done
+
+# convert to normal array
+icon_sizes=${!icon_sizes_keys[@]}
+
+echo "using icon sizes:"
+echo ${icon_sizes[@]}
+
+src_vectors=("../../src_assets/common/assets/web/images/sunshine-locked.svg"
+             "../../src_assets/common/assets/web/images/sunshine-pausing.svg"
+             "../../src_assets/common/assets/web/images/sunshine-playing.svg"
+             "../../sunshine.svg")
+
+echo "using sources vectors:"
+echo ${src_vectors[@]}
+
+for src_vector in ${src_vectors[@]}; do
+    file_name=`basename "$src_vector" .svg`
+    png_files=()
+    for icon_size in ${icon_sizes[@]}; do
+        png_file="${file_name}${icon_size}.png"
+        echo "converting ${png_file}"
+        inkscape -w $icon_size -h $icon_size "$src_vector" --export-filename "${png_file}" &&
+        ./oxipng -o max --strip safe --alpha "${png_file}" &&
+        png_files+=("${png_file}")
+    done
+
+    echo "packing ${file_name}.ico"
+    ./go-png2ico "${png_files[@]}" "${file_name}.ico"
+done

src/confighttp.cpp

@@ -267,7 +267,7 @@ namespace confighttp {
     // todo - use mime_types map
     print_req(request);
 
-    std::ifstream in(WEB_DIR "images/favicon.ico", std::ios::binary);
+    std::ifstream in(WEB_DIR "images/sunshine.ico", std::ios::binary);
     SimpleWeb::CaseInsensitiveMultimap headers;
     headers.emplace("Content-Type", "image/x-icon");
     response->write(SimpleWeb::StatusCode::success_ok, in, headers);
@@ -755,7 +755,7 @@ namespace confighttp {
     server.resource["^/api/clients/unpair$"]["POST"] = unpairAll;
     server.resource["^/api/apps/close$"]["POST"] = closeApp;
     server.resource["^/api/covers/upload$"]["POST"] = uploadCover;
-    server.resource["^/images/favicon.ico$"]["GET"] = getFaviconImage;
+    server.resource["^/images/sunshine.ico$"]["GET"] = getFaviconImage;
     server.resource["^/images/logo-sunshine-45.png$"]["GET"] = getSunshineLogoImage;
     server.resource["^/node_modules\\/.+$"]["GET"] = getNodeModules;
     server.config.reuse_address = true;

src/system_tray.cpp

@@ -9,7 +9,7 @@
     #define WIN32_LEAN_AND_MEAN
     #include <accctrl.h>
     #include <aclapi.h>
-    #define TRAY_ICON WEB_DIR "images/favicon.ico"
+    #define TRAY_ICON WEB_DIR "images/sunshine.ico"
     #define TRAY_ICON_PLAYING WEB_DIR "images/sunshine-playing.ico"
     #define TRAY_ICON_PAUSING WEB_DIR "images/sunshine-pausing.ico"
     #define TRAY_ICON_LOCKED WEB_DIR "images/sunshine-locked.ico"

src_assets/common/assets/web/header.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sunshine</title>
-    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="/images/sunshine.ico">
     <link href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
     <link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
     <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>