Skip to content

Instantly share code, notes, and snippets.

@todd-elvers
Created November 29, 2020 20:09
Show Gist options
  • Save todd-elvers/b4a73eb5ebe177052925d1d3a2c5ec87 to your computer and use it in GitHub Desktop.
Save todd-elvers/b4a73eb5ebe177052925d1d3a2c5ec87 to your computer and use it in GitHub Desktop.
SVG to favicon.ico
#!/bin/bash
set -e
#######################
# Print command usage #
#######################
if [ -z "$1" ];
then
echo "Usage: ./svg-to-favicon.sh <path-to-svg> <destination-directory>"
exit 0
fi
if [ -z "$2" ];
then
echo "Usage: ./svg-to-favicon.sh <path-to-svg> <destination-directory>"
exit 0
fi
#####################
# Dependency checks #
#####################
if ! command -v inkscape &> /dev/null; then
echo ERROR - Missing "inkscape", please run the following:
echo brew install inkscape
exit 1
fi
if ! command -v convert &> /dev/null; then
echo ERROR - Missing "imagemagick", please run the following:
echo brew install imagemagick
exit 1
fi
if ! command -v pngquant &> /dev/null; then
echo ERROR - Missing "pngquant", please run the following:
echo brew install pngquant
exit 1
fi
###############
# Script body #
###############
svg=$1
dest=$2
sizes=(16 24 32 48 72 96 144 152 192 196)
temp=./.favicon-temp
# Cleanup any past failed runs
rm -rf $temp
mkdir $temp
# Generate PNGs
echo Making bitmaps from your svg...
for i in ${sizes[@]}; do
inkscape $svg --export-filename="$temp/$i.png" --export-width=$i --export-height=$i
done
# Compress PNGs
echo Compressing...
pngquant -f --ext .png $temp/*.png --posterize 4 --speed 1
# Convert PNGs -> favicon.ico
echo Converting to favicon.ico...
convert "$temp/*.png" "$dest/favicon.ico"
# Delete PNGs
rm -rf $temp
# Build message containing all dimensions the favicon.ico was created from
# Useful for copying to manifest.json files in the /public/ dir
message=""
for i in ${sizes[@]}; do
message="$i"x"$i "$message
done
echo
echo Success - favicon.ico contains the following formats:
echo "${message}"
@todd-elvers
Copy link
Author

Purpose

To generate a favicon.ico from an SVG with support for different sizes.

Requirements

brew install imagemagick inkscape pngquant

How to run it

sudo ./svg-to-favicon.sh <path-to-svg> <destination-directory>

After running this you'll find a .favicon.ico file in the destination directory.

Custom sizes

To customize the sizes that are encoded into the resulting favicon.ico simply edit the sizes variable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment