Bash script to generate favicon and other icons for website

generate.sh

#!/usr/bin/env bash

# based on 
# https://github.com/audreyr/favicon-cheat-sheet
# https://realfavicongenerator.net/faq
# generated text files just for refrence, big sizes based on lighthouse test

SIZES="16 24 32 48 64 120 144 150 152 180 192 256 384 512"
COLOR="FFFFFF"
MANIFEST='"icons": ['
FOLDER='public'
OUT=logo-$1
mkdir $OUT

# inkscape -f $1 -w 16 -h 16 -e ./logo-$1/favicon.ico

for size in $SIZES
do
  echo $size; 
  inkscape -f $1 -w $size -h $size -e ./$OUT/logo-$size.png
  optipng -o7 ./logo-$1/logo-$size.png
  MANIFEST=$MANIFEST'{
  "src": "./'$FOLDER'/logo-'$size'.png",
  "sizes": "'$size'x'$size'",
  "type": "image/png"
}, '
done
MANIFEST=$MANIFEST']'
convert ./$OUT/logo-16.png ./$OUT/logo-24.png ./$OUT/logo-32.png ./$OUT/logo-48.png ./$OUT/logo-64.png ./$OUT/favicon.ico

echo '<link rel="apple-touch-icon" sizes="180x180" href="/'$FOLDER'/logo-180.png">
<link rel="icon" type="image/png" sizes="32x32" href="/'$FOLDER'/logo-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/'$FOLDER'/logo-16.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#'$COLOR'">
' > ./logo-$1/head.html

echo '<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/'$FOLDER'/logo-150.png"/>
            <TileColor>#'$COLOR'</TileColor>
        </tile>
    </msapplication>
</browserconfig>
' > ./logo-$1/browserconfig.xml

echo $MANIFEST | sed 's/, \]/\]/' > ./logo-$1/manifest.icons.json

./generate.sh sushi.svg