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

75
votes

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?

3
imagemagickfavicon
Can you show a sample ICO file please? – Pekka
This command, which is "like yours" seemed to work fine here: $ convert -resize 1 28x128 images/note.png -transparent white -colors 256 favicon.ico – rogerdpack
I think I'm missing some bits: convert convert: No encode delegate for this image format (favicon.ico) [No such file or directory]. Apparently Debian Jessie lacks ICO support in ImageMagick. This worked for me: icotool -c -o favicon.ico FILENAME. See randomhacks.co.uk/how-to-convert-a-png-to-ico-file-ubuntu-linux – Tino

3 Answers

44
votes

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.

26
votes

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"

An entry is added to context menu

4
votes

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.