|
1 | 1 | #!/bin/sh |
2 | 2 | set -eu |
3 | 3 |
|
| 4 | +# Generate icons from a single favicon.svg. favicon.svg should have no fill |
| 5 | +# colors set. |
4 | 6 | main() { |
5 | 7 | cd src/browser/media |
6 | 8 |
|
7 | | - # We need .ico for backwards compatibility. |
8 | | - # The other two are the only icon sizes required by Chrome and |
9 | | - # we use them for stuff like apple-touch-icon as well. |
10 | | - # https://web.dev/add-manifest/ |
| 9 | + # We need .ico for backwards compatibility. The other two are the only icon |
| 10 | + # sizes required by Chrome and we use them for stuff like apple-touch-icon as |
| 11 | + # well. https://web.dev/add-manifest/ |
11 | 12 | # |
12 | 13 | # This should be enough and we can always add more if there are problems. |
13 | | - |
| 14 | + # |
| 15 | + # -quiet to avoid https://github.com/ImageMagick/ImageMagick/issues/884 |
14 | 16 | # -background defaults to white but we want it transparent. |
| 17 | + # -density somehow makes the image both sharper and smaller in file size. |
| 18 | + # |
15 | 19 | # https://imagemagick.org/script/command-line-options.php#background |
16 | | - convert -quiet -background transparent -resize 256x256 favicon.svg favicon.ico |
17 | | - # We do not generate the pwa-icon from the favicon as they are slightly different |
18 | | - # designs and sizes. |
19 | | - # See favicon.afdesign and #2401 for details on the differences. |
20 | | - convert -quiet -background transparent -resize 192x192 pwa-icon.png pwa-icon-192.png |
21 | | - convert -quiet -background transparent -resize 512x512 pwa-icon.png pwa-icon-512.png |
| 20 | + convert -quiet -background transparent \ |
| 21 | + -resize 256x256 -density 256x256 \ |
| 22 | + favicon.svg favicon.ico |
22 | 23 |
|
23 | | - # We use -quiet above to avoid https://github.com/ImageMagick/ImageMagick/issues/884 |
| 24 | + # Generate PWA icons. There should be enough padding to support masking. |
| 25 | + convert -quiet -border 60x60 -bordercolor white -background white \ |
| 26 | + -resize 192x192 -density 192x192 \ |
| 27 | + favicon.svg pwa-icon-192.png |
| 28 | + convert -quiet -border 160x160 -bordercolor white -background white \ |
| 29 | + -resize 512x512 -density 512x512 \ |
| 30 | + favicon.svg pwa-icon-512.png |
24 | 31 |
|
25 | | - # The following adds dark mode support for the favicon as favicon-dark-support.svg |
26 | | - # There is no similar capability for pwas or .ico so we can only add support to the svg. |
27 | | - favicon_dark_style="<style> |
28 | | -@media (prefers-color-scheme: dark) { |
29 | | - * { |
30 | | - fill: white; |
31 | | - } |
32 | | -} |
33 | | -</style>" |
34 | | - # See https://stackoverflow.com/a/22901380/4283659 |
35 | | - # This escapes all newlines so that sed will accept them. |
36 | | - favicon_dark_style="$(printf "%s\n" "$favicon_dark_style" | sed -e ':a' -e 'N' -e '$!ba' -e 's/\n/\\n/g')" |
37 | | - sed "$( |
38 | | - cat -n << EOF |
39 | | -s%<rect id="favicon"%$favicon_dark_style<rect id="favicon"% |
40 | | -EOF |
41 | | - )" favicon.svg > favicon-dark-support.svg |
| 32 | + # The following adds dark mode support for the favicon as |
| 33 | + # favicon-dark-support.svg There is no similar capability for pwas or .ico so |
| 34 | + # we can only add support to the svg. |
| 35 | + favicon_dark_style="<style>@media (prefers-color-scheme: dark) {* { fill: white; }}</style>" |
| 36 | + cp favicon.svg favicon-dark-support.svg |
| 37 | + sed "s%<path%$favicon_dark_style\n <path%" favicon.svg > favicon-dark-support.svg |
42 | 38 | } |
43 | 39 |
|
44 | 40 | main "$@" |
0 commit comments