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 "$@"