Converting GIF's, PNG's and JPG's to .ICO files using Imagemagick

From: JPG, To: ICO;

/usr/bin/convert -resize x16 -gravity center -crop 16x16+0+0 input.jpg \
-transparent white -colors 256 output/favicon.ico 

This is the output for the command line.

From: GIF's, PNG To: ICO;

/usr/bin/convert -resize x16 -gravity center -crop 16x16+0+0 input.png \
-flatten -colors 256 output/favicon.ico 

I am having issues with transparency. I can't seem to get the right code for it, i have tried -channel alpha -negate, etc

This creates an image and when i apply to the site, it works with Firefox but none of the other browsers. IE, Chrome, Opera and Safari all hate it for some reason, it is a simple favicon.ico file. My conclusion is it must be my command somewhere is breaking. Please help?

Solution 1:

Add this option to convert:

-background transparent

However, keep in mind that your original image must actually have an alpha channel. PNGs may have an alpha channel, JPEGs do not.

Solution 2:

To convert PNG to ICO, setting the sizes you want, and preserving transparency:
(works for ImageMagick 7.0 or newer)

convert -background transparent "favicon.png" -define icon:auto-resize=16,24,32,48,64,72,96,128,256 "favicon.ico"

In this example, the ico file will have 9 entries: 16x16 px, 24x24 px, etc (assuming it is square)

Hint: If you are on Windows 7, you can save the code below to a REG file and apply it to the registry. This will create an entry in the context menu of PNG files called "Convert to ICO". When you right-click file.png and select this command, file.png.ico will be generated in the same folder.

InstallConvertToIcoCtxMenu.reg
(remember to replace the ImageMagick path with the path where it is installed on your computer)

Windows Registry Editor Version 5.00

; Created with Default Programs Editor
; http://defaultprogramseditor.com/

; Edit Verb
[HKEY_CURRENT_USER\Software\Classes\pngfile\shell\ConvertToICO]
@="Convert to ICO"
[HKEY_CURRENT_USER\Software\Classes\pngfile\shell\ConvertToICO\command]
@="\"C:\\Program Files\\ImageMagick\\7.0.3-Q16\\convert.exe\" -background transparent \"%1\" -define icon:auto-resize=16,24,32,48,64,72,96,128,256 \"%1.ico\""
[HKEY_CURRENT_USER\Software\Classes\pngfile\shell\ConvertToICO]
"Icon"="C:\\Program Files\\ImageMagick\\7.0.3-Q16\\convert.exe,0"

Solution 3:

One solution to the ICO problem would be not using it:

<link rel=icon href=/favicon.png>

Works in all browsers, and you get to use saner file format with better compression.