Generate Favicons and Apple Touch Icons

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#!/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"<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

 

References:

How to Add a Favicon to your Site
Adding an Icon for iPhone, iPad & Android to Your Website
Don’t Forget About Favicons on Retina Screens
Apple: Custom Icon and Image Creation Guidelines
Microsoft: Customizing the Site Icon
ImageMagick Favicon Recipe

Leave a Reply

Your email address will not be published. Required fields are marked *