How To Create A Transparent Favicon From a PNG using Imagemagick

Because I always forget this command

Posted by John Thomas 9-May-2017

This is how to create a multi-resolution favicon with a transparent background using Imagemagick. Imagemagick has some documentation that gets us most of the way there, but we need to tweak the commands slightly to preserve the transparent background.

Requirements:

  • Your PNG has a transparent background
  • Your PNG has a square resolution that is at least 64x64 pixels.

Here is the command:

convert logo.png  \
  \( -clone 0 -resize 16x16 \) \
  \( -clone 0 -resize 32x32 \) \
  \( -clone 0 -resize 48x48 \) \
  \( -clone 0 -resize 64x64 \) \
  -delete 0 -alpha on favicon.ico