Update logo

Author: code-asher

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="<style>
-@media (prefers-color-scheme: dark) {
-  * {
-    fill: white;
-  }
-}
-</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%<rect id="favicon"%$favicon_dark_style<rect id="favicon"%
-EOF
-  )" favicon.svg > 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="<style>@media (prefers-color-scheme: dark) {* { fill: white; }}</style>"
+  cp favicon.svg favicon-dark-support.svg
+  sed "s%<path%$favicon_dark_style\n  <path%" favicon.svg > favicon-dark-support.svg
 }
 
 main "$@"

flake.nix

@@ -14,6 +14,7 @@
         in {
           devShells.default = pkgs.mkShell {
             nativeBuildInputs = with pkgs; [
+              imagemagick
               nodejs
               python3
               pkg-config

src/browser/media/favicon-dark-support.svg

@@ -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,