Revamp icons

ci/README.md

@@ -67,6 +67,10 @@ This directory contains scripts used for the development of code-server.
 - [./ci/dev/watch.ts](./dev/watch.ts) (`yarn watch`)
   - Starts a process to build and launch code-server and restart on any code changes.
   - Example usage in [./doc/CONTRIBUTING.md](../doc/CONTRIBUTING.md).
+- [./ci/dev/gen_icons.sh](./ci/dev/gen_icons.sh) (`yarn icons`)
+  - Generates the various icons from a single `.svg` favicon in
+    `src/browser/media/favicon.svg`.
+  - Requires [imagemagick](https://imagemagick.org/index.php)
 
 ## build
 

ci/dev/gen_icons.sh

@@ -0,0 +1,21 @@
+#!/bin/sh
+set -eu
+
+main() {
+  cd src/browser/media
+
+  # We need .ico for backwards compatibility.
+  # The other two are the only icon sizes required by Chrome and
+  # we use them for stuff like apple-touch-icon as well.
+  # https://web.dev/add-manifest/
+  #
+  # This should be enough and we can always add more if there are problems.
+
+  # -background defaults to white but we want it transparent.
+  # https://imagemagick.org/script/command-line-options.php#background
+  convert -background transparent -resize 256x256 favicon.svg favicon.ico
+  convert -background transparent -resize 192x192 favicon.svg pwa-icon-192.png
+  convert -background transparent -resize 512x512 favicon.svg pwa-icon-512.png
+}
+
+main "$@"

package.json

@@ -26,7 +26,8 @@
     "lint": "./ci/dev/lint.sh",
     "test": "./ci/dev/test.sh",
     "ci": "./ci/dev/ci.sh",
-    "watch": "VSCODE_IPC_HOOK_CLI= NODE_OPTIONS=--max_old_space_size=32384 ts-node ./ci/dev/watch.ts"
+    "watch": "VSCODE_IPC_HOOK_CLI= NODE_OPTIONS=--max_old_space_size=32384 ts-node ./ci/dev/watch.ts",
+    "icons": "./ci/dev/gen_icons.sh"
   },
   "main": "out/node/entry.js",
   "devDependencies": {

src/browser/media/manifest.json

@@ -6,31 +6,11 @@
   "background-color": "#fff",
   "description": "Run editors on a remote server.",
   "icons": [
-    {
-      "src": "{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-96.png",
-      "type": "image/png",
-      "sizes": "96x96"
-    },
-    {
-      "src": "{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-128.png",
-      "type": "image/png",
-      "sizes": "128x128"
-    },
     {
       "src": "{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
-    {
-      "src": "{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-256.png",
-      "type": "image/png",
-      "sizes": "256x256"
-    },
-    {
-      "src": "{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-384.png",
-      "type": "image/png",
-      "sizes": "384x384"
-    },
     {
       "src": "{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png",
       "type": "image/png",

src/browser/pages/error.html

@@ -11,9 +11,11 @@
       content="style-src 'self'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
     <title>{{ERROR_TITLE}} - code-server</title>
-    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.svg"/>
+    <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico"/>
     <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
-    <link rel="apple-touch-icon" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-384.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" />
     <link href="{{CS_STATIC_BASE}}/dist/register.css" rel="stylesheet" />
     <meta id="coder-options" data-settings="{{OPTIONS}}" />
   </head>

src/browser/pages/login.html

@@ -11,9 +11,11 @@
       content="style-src 'self'; script-src 'self' 'unsafe-inline'; manifest-src 'self'; img-src 'self' data:; font-src 'self' data:;"
     />
     <title>code-server login</title>
-    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.svg"/>
+    <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico"/>
     <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
-    <link rel="apple-touch-icon" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-384.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" />
     <link href="{{CS_STATIC_BASE}}/dist/register.css" rel="stylesheet" />
     <meta id="coder-options" data-settings="{{OPTIONS}}" />
   </head>

src/browser/pages/vscode.html

@@ -24,12 +24,14 @@
     <meta id="vscode-remote-nls-configuration" data-settings="{{NLS_CONFIGURATION}}" />
 
     <!-- Workbench Icon/Manifest/CSS -->
-    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico" type="image/x-icon" />
+    <link rel="icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.svg"/>
+    <link rel="alternate icon" href="{{CS_STATIC_BASE}}/src/browser/media/favicon.ico"/>
     <link rel="manifest" href="{{CS_STATIC_BASE}}/src/browser/media/manifest.json" crossorigin="use-credentials" />
     <!-- PROD_ONLY
     <link data-name="vs/workbench/workbench.web.api" rel="stylesheet" href="{{CS_STATIC_BASE}}/lib/vscode/out/vs/workbench/workbench.web.api.css">
     END_PROD_ONLY -->
-    <link rel="apple-touch-icon" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-384.png" />
+    <link rel="apple-touch-icon" sizes="192x192" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-192.png" />
+    <link rel="apple-touch-icon" sizes="512x512" href="{{CS_STATIC_BASE}}/src/browser/media/pwa-icon-512.png" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
 
     <meta id="coder-options" data-settings="{{OPTIONS}}" />