SVG to favicon.ico

svg-to-favicon.sh

#!/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}"

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.