diff --git a/ci/dev/gen_icons.sh b/ci/dev/gen_icons.sh index 9d27486dc..049e9eef0 100755 --- a/ci/dev/gen_icons.sh +++ b/ci/dev/gen_icons.sh @@ -1,44 +1,40 @@ #!/bin/sh set -eu +# Generate icons from a single favicon.svg. favicon.svg should have no fill +# colors set. 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/ + # 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. - + # + # -quiet to avoid https://github.com/ImageMagick/ImageMagick/issues/884 # -background defaults to white but we want it transparent. + # -density somehow makes the image both sharper and smaller in file size. + # # https://imagemagick.org/script/command-line-options.php#background - convert -quiet -background transparent -resize 256x256 favicon.svg favicon.ico - # We do not generate the pwa-icon from the favicon as they are slightly different - # designs and sizes. - # See favicon.afdesign and #2401 for details on the differences. - convert -quiet -background transparent -resize 192x192 pwa-icon.png pwa-icon-192.png - convert -quiet -background transparent -resize 512x512 pwa-icon.png pwa-icon-512.png + convert -quiet -background transparent \ + -resize 256x256 -density 256x256 \ + favicon.svg favicon.ico - # We use -quiet above to avoid https://github.com/ImageMagick/ImageMagick/issues/884 + # Generate PWA icons. There should be enough padding to support masking. + convert -quiet -border 60x60 -bordercolor white -background white \ + -resize 192x192 -density 192x192 \ + favicon.svg pwa-icon-192.png + convert -quiet -border 160x160 -bordercolor white -background white \ + -resize 512x512 -density 512x512 \ + favicon.svg pwa-icon-512.png - # The following adds dark mode support for the favicon as favicon-dark-support.svg - # There is no similar capability for pwas or .ico so we can only add support to the svg. - favicon_dark_style="" - # See https://stackoverflow.com/a/22901380/4283659 - # This escapes all newlines so that sed will accept them. - favicon_dark_style="$(printf "%s\n" "$favicon_dark_style" | sed -e ':a' -e 'N' -e '$!ba' -e 's/\n/\\n/g')" - sed "$( - cat -n << EOF -s% favicon-dark-support.svg + # The following adds dark mode support for the favicon as + # favicon-dark-support.svg There is no similar capability for pwas or .ico so + # we can only add support to the svg. + favicon_dark_style="" + cp favicon.svg favicon-dark-support.svg + sed "s% favicon-dark-support.svg } main "$@" diff --git a/flake.nix b/flake.nix index ea28a93b7..3a1f7efbc 100644 --- a/flake.nix +++ b/flake.nix @@ -14,6 +14,7 @@ in { devShells.default = pkgs.mkShell { nativeBuildInputs = with pkgs; [ + imagemagick nodejs python3 pkg-config diff --git a/src/browser/media/favicon-dark-support.svg b/src/browser/media/favicon-dark-support.svg index 06f1fa00d..d64bf32ed 100644 --- a/src/browser/media/favicon-dark-support.svg +++ b/src/browser/media/favicon-dark-support.svg @@ -1,7 +1,4 @@ - \ No newline at end of file + + + + diff --git a/src/browser/media/favicon.ico b/src/browser/media/favicon.ico index e721447bd..56078ead6 100644 Binary files a/src/browser/media/favicon.ico and b/src/browser/media/favicon.ico differ diff --git a/src/browser/media/favicon.svg b/src/browser/media/favicon.svg index 45388729b..01a01541e 100644 --- a/src/browser/media/favicon.svg +++ b/src/browser/media/favicon.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/src/browser/media/pwa-icon-192.png b/src/browser/media/pwa-icon-192.png index a6ee50311..3f28593b3 100644 Binary files a/src/browser/media/pwa-icon-192.png and b/src/browser/media/pwa-icon-192.png differ diff --git a/src/browser/media/pwa-icon-512.png b/src/browser/media/pwa-icon-512.png index ff42978ce..7df85f766 100644 Binary files a/src/browser/media/pwa-icon-512.png and b/src/browser/media/pwa-icon-512.png differ diff --git a/src/browser/media/pwa-icon.png b/src/browser/media/pwa-icon.png deleted file mode 100644 index d4f5188ff..000000000 Binary files a/src/browser/media/pwa-icon.png and /dev/null differ diff --git a/src/node/routes/vscode.ts b/src/node/routes/vscode.ts index ed0bfa606..62d7c80c4 100644 --- a/src/node/routes/vscode.ts +++ b/src/node/routes/vscode.ts @@ -190,6 +190,7 @@ router.get("/manifest.json", async (req, res) => { src: `{{BASE}}/_static/src/browser/media/pwa-icon-${size}.png`, type: "image/png", sizes: `${size}x${size}`, + purpose: "maskable", })), }, null,