Generate Favicons and Apple Touch Icons

# 25 July 2013

Here is a script to generate different sizes and formats of favicon as well as apple touch icons for different tablets and phones. It uses the convert program which is part of ImageMagick.

As a starting point, create a square PNG with dimensions > 144px. I went with 512px. The script generates the different favicons for IOS, Android and desktop browsers as well as outputting the HTML to put in your header.

#!/bin/sh

convert favicon.png  -bordercolor white -border 0 \
          \( -clone 0 -resize 16x16 \) \
          \( -clone 0 -resize 24x24 \) \
          \( -clone 0 -resize 32x32 \) \
          \( -clone 0 -resize 48x48 \) \
          \( -clone 0 -resize 64x64 \) \
          -delete 0 -alpha off -colors 256 favicon.ico

HTML=""
for SIZE in 57 72 114 144
do
    for SUFFIX in "" "-precomposed"
    do
    FILENAME=apple-touch-icon-${SIZE}x${SIZE}${SUFFIX}.png
    convert -resize x$SIZE favicon.png $FILENAME
    if [ "$SIZE" -ne "57" ]
    then
        HTML=$HTML"&lt;link href=\"${FILENAME}\" rel=\"apple-touch-icon${SUFFIX}\" sizes=\"${SIZE}x${SIZE}\" />\n"
    fi
    done
done

# Don't need the dimensions explicit for the 57x57 icon
mv apple-touch-icon-57x57.png apple-touch-icon.png
mv apple-touch-icon-57x57-precomposed.png apple-touch-icon-precomposed.png
HTML='

<link href="apple-touch-icon.png" rel="apple-touch-icon" />
\n

<link href="apple-touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" />
\n'$HTML
echo $HTML