From one high resolution image of your logo, you can easily create the favicon variations necessary for wide browser support.

The modern array of favicons includes three image assets:

  • the standard ico which contains 16x16, 32x32, and 64x64
  • a PNG at 180x180
  • a PNG at 196x196

The relevant HTML is:

<!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->  
<link rel="apple-touch-icon-precomposed" href="favicon-180.png">  
<link rel="icon" href="favicon-196.png">  

The following bash script will create optimized files from your source image.

#!/bin/bash
# @copyright Daily Raisin LLC
# @role generate the favicon images needed nowadays
# @usage: favicon.sh SOURCE.PNG DESTINTATION_DIRECTORY/

# OSX dependencies:
#   brew install imagemagick
#   brew install pngcrush
#   brew install png2ico
# PATH=~/brew/bin:$PATH

if [ $# -eq 1 ] && [ $1 = "--help" ]; then  
  echo 'Usage: favicon.sh [src.png] [dest/]';
  exit 0;
fi

if [ $# -ne 2 ]; then  
  echo 'Usage: favicon.sh [src.png] [dest/]';
  exit 1;
fi;

SRC=$1  
DEST=$2

for DIM in 16 32 64 180 196  
do  
    convert -resize ${DIM}x${DIM} ${SRC} tmp-favicon-${DIM}.png
    pngcrush -rem allb -brute -reduce tmp-favicon-${DIM}.png tmp-favicon-${DIM}-crushed.png
    mv tmp-favicon-${DIM}-crushed.png tmp-favicon-${DIM}.png
done

# put png icons into the ico
png2ico --colors 16 tmp-favicon.ico tmp-favicon-16.png tmp-favicon-32.png tmp-favicon-64.png

# move pngs to destination directory
for DIM in 180 196  
do  
    mv tmp-favicon-${DIM}.png $DEST/favicon-${DIM}.png
done

# move ico to destination directory
mv tmp-favicon.ico $DEST/favicon.ico

# remove unused source pngs
for DIM in 16 32 64  
do  
    rm tmp-favicon-${DIM}.png
done