Create Website Favorite Icon and Apple Touch Icons with ImageMagick

I love ImageMagick! ImageMagick makes common image manipulation simple and fast without the need to use an image program like Photoshop etc.

As a web developer I often need to create favorite icons along with apple-touch-icons. The following example will demonstrate how to convert your image into the appropriate formats for incorporation into your website.

ImageMagick Conversion

To convert your image simply use the commands provided below to generate your icons.

convert logo.png -define icon:auto-resize=64,48,32,16 favicon.ico
convert logo.png -resize 57x57 apple-touch-icon.png
convert logo.png -resize 57x57 apple-touch-icon-57x57.png
convert logo.png -resize 72x72 apple-touch-icon-72x72.png
convert logo.png -resize 76x76 apple-touch-icon-76x76.png
convert logo.png -resize 114x114 apple-touch-icon-114x114.png
convert logo.png -resize 120x120 apple-touch-icon-120x120.png
convert logo.png -resize 144x144 apple-touch-icon-144x144.png
convert logo.png -resize 152x152 apple-touch-icon-152x152.png
convert logo.png -resize 180x180 apple-touch-icon-180x180.png

HTML Example

After you have created your icons you can incorporate them into your websites <head> section. Generally the icons should be located in your site root directory.

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />

Hope you find this example useful.