Revamp icons (#2383)

I took our website's SVG favicon and plopped it on a round
white rectangle in Affinity Designer. The I exported it as an SVG and
wrote a script that uses imagemagick to convert to the various sizes and
formats we need.

Closes #2307

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/favicon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 2250 2250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M2029.18,672.912c-0,-249.515 -202.574,-452.089 -452.089,-452.089l-904.176,0c-249.515,0 -452.089,202.574 -452.089,452.089l0,904.176c0,249.515 202.574,452.089 452.089,452.089l904.176,-0c249.515,-0 452.089,-202.574 452.089,-452.089l-0,-904.176Z" style="fill:#fff;"/><path d="M1748.89,1058.72c-28.26,-0 -47.092,-16.57 -47.092,-50.58l0,-195.345c0,-124.707 -51.376,-193.601 -184.095,-193.601l-61.651,0l0,131.683l18.839,-0c52.23,-0 77.061,28.779 77.061,80.23l0,172.672c0,74.998 22.262,105.521 71.07,121.218c-48.808,14.827 -71.07,46.22 -71.07,121.218l0,128.197c0,35.753 0,70.636 -9.418,106.39c-9.418,33.14 -24.831,64.534 -46.237,91.567c-11.987,15.701 -25.688,28.78 -41.098,40.991l-0,17.44l61.647,-0c132.72,-0 184.097,-68.895 184.097,-193.601l-0,-195.345c-0,-34.883 17.975,-50.58 47.091,-50.58l35.108,0l-0,-131.684l-34.252,0l0,-0.87Z" style="fill-rule:nonzero;"/><path d="M1329.33,818.057l-190.087,-0c-4.282,-0 -7.705,-3.489 -7.705,-7.849l0,-14.824c0,-4.362 3.423,-7.849 7.705,-7.849l190.943,-0c4.28,-0 7.705,3.487 7.705,7.849l0,14.824c0,4.36 -4.282,7.849 -8.561,7.849Z" style="fill-rule:nonzero;"/><path d="M1361.87,1006.42l-138.711,-0c-4.282,-0 -7.708,-3.491 -7.708,-7.851l-0,-14.824c-0,-4.359 3.426,-7.849 7.708,-7.849l138.711,0c4.283,0 7.705,3.49 7.705,7.849l0,14.824c0,3.49 -3.422,7.851 -7.705,7.851Z" style="fill-rule:nonzero;"/><path d="M1416.67,912.236l-277.423,0c-4.282,0 -7.705,-3.487 -7.705,-7.848l0,-14.826c0,-4.36 3.423,-7.848 7.705,-7.848l276.567,0c4.282,0 7.707,3.488 7.707,7.848l0,14.826c0,3.488 -2.569,7.848 -6.851,7.848Z" style="fill-rule:nonzero;"/><path d="M919.188,860.762c18.837,0 37.676,1.745 55.657,6.105l-0,-35.757c-0,-50.58 25.687,-80.23 77.063,-80.23l18.837,-0l-0,-131.683l-61.651,0c-132.72,0 -184.093,68.894 -184.093,193.601l0,64.532c29.967,-10.463 61.651,-16.568 94.187,-16.568Z" style="fill-rule:nonzero;"/><path d="M1474.9,1335.15c-13.701,-110.754 -97.614,-203.194 -205.501,-224.124c-29.967,-6.103 -59.938,-6.978 -89.049,-1.744c-0.856,-0 -0.856,-0.873 -1.712,-0.873c-47.094,-100.288 -148.13,-166.566 -257.731,-166.566c-109.6,-0 -209.78,64.535 -257.731,164.823c-0.856,-0 -0.856,0.872 -1.712,0.872c-30.824,-3.49 -61.65,-1.747 -92.475,6.104c-106.174,26.16 -186.662,116.857 -201.218,226.738c-1.712,11.337 -2.569,22.673 -2.569,33.141c0,33.136 22.263,63.659 54.8,68.02c40.244,6.106 75.35,-25.29 74.494,-65.404c-0,-6.106 -0,-13.084 0.856,-19.187c6.85,-55.814 48.806,-102.904 103.605,-115.987c17.126,-4.361 34.251,-5.231 50.519,-2.614c52.232,6.977 103.606,-20.059 125.869,-67.149c16.27,-34.884 41.957,-65.409 76.207,-81.978c37.672,-18.314 80.487,-20.927 119.876,-6.974c41.097,14.824 71.921,46.218 90.76,85.461c19.693,38.374 29.111,65.407 71.069,70.64c17.124,2.614 65.074,1.743 83.056,0.871c35.106,-0 70.213,12.209 95.044,37.499c16.266,17.441 28.254,39.244 33.393,63.661c7.705,39.244 -1.713,78.486 -24.832,108.137c-16.27,20.93 -38.532,36.626 -63.363,43.604c-11.987,3.49 -23.975,4.36 -35.962,4.36l-189.232,0c-37.672,0 -67.642,-30.52 -67.642,-68.894l-0,-255.519c-0,-10.462 -8.561,-19.182 -18.837,-19.182l-26.544,-0c-52.233,0.87 -94.187,60.173 -94.187,122.96l-0,229.358c-0,68.021 53.942,122.961 120.731,122.961c0,0 297.119,-0.874 301.399,-0.874c68.499,-6.976 131.863,-42.73 174.673,-97.671c42.814,-53.196 62.507,-122.963 53.946,-194.47Z" style="fill-rule:nonzero;"/></svg>

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}}" />