CODEWITHSUNDEEP
iconsimagemagick
Linas Valiukas
Linas Valiukas

Reputation: 1376

Recipe for creating Windows ICO files with ImageMagick?

I would like to create .ico icon for my Windows application dynamically (from the SVG file) by using ImageMagick. How do I do that?

Microsoft lists various color depth and size requirements for the icon. ImageMagick has the -depth and -colors options, but I'm not sure how to use them correctly in this case.

Additionaly, it looks like Vista+ supports 256x256 hi-res icon embedded into the very same .ico which can (should? must?) be a compressed PNG. How do I "join" the Windows XP icons and this new Vista icon into a single .ico file?

Upvotes: 38

Views: 19692

Answers (10)

PolarBear
PolarBear

Reputation: 1267

I have been struggling with the same problem. I have an SVG with the image of my icon and I need to create an icon.ico file from it. Let me describe the solutions I found:

Step 1: Determine what resolutions to include inside the icon.ico file.

There are no clear guidelines about that. Even Microsoft ships its software with inconsistent icon resolutions. There is a question about that. Therefore, I think the best we can do about it is to use IconsExtract from Nirsoft. With such tool, you can check the resolutions included in icons of popular modern Windows programs.

Step 2: Create .png files for every resolution you want to include inside your icon.ico file.

Many answers suggest to use Inkscape, but you can do everything with ImageMagick in the following way (just in case, I checked that the resulted images are the same as if you used inkscape):

magick.exe convert -size 16x16 -background transparent -depth 8 MyIconImage.svg 16.png
...
magick.exe convert -size 256x256 -background transparent -depth 8 MyIconImage.svg 256.png

However, if you still want to use Inkscape, here's the command:

inkscape.exe MyIconImage.svg -w 16 -h 16 -o 16.png

Some answers also suggest using ImageMagick's icon:auto-resize command line argument to avoid creating separate PNG files for every resolution. I don't recommend using it because to get the best quality it is better to avoid resizing as it is less accurate than rendering SVG file into each resolution separately.

Step 3: Assemble your icon.ico file.

magick.exe convert 16.png 20.png 24.png 32.png 40.png 48.png 64.png 256.png -compress jpeg icon.ico

-compress jpeg is used as a workaround for a specific issue in ImageMagick, as described in the following comment.
You can see details about created icon.ico file using the following command:

magick.exe identify icon.ico

Powershell script "CreateIcoFromSvg.ps1"

Let me provide a powershell script which automates above-mentioned steps:

# You can download ImageMagick from: https://imagemagick.org/script/download.php
$imageMagick = "$PSScriptRoot/ImageMagick-7.1.0-portable-Q16-x64/magick.exe"

$svgIcon = "MySvgIcon.svg"
$iconResolutions = 16,20,24,32,40,48,64,256

# Create 16.png, ..., 256.png image files
$pngImages = @()
Foreach($r in $iconResolutions) {
    & $imageMagick convert -size "${r}x${r}" -background transparent -depth 8 $svgIcon "${r}.png"
    $pngImages += "${r}.png"
}

# Combine all PNG image files into an icon.ico file
& $imageMagick convert $pngImages -compress jpeg "icon.ico"

# Remove PNG files
Foreach($image in $pngImages) {
    Remove-Item $image
}

Upvotes: 9

Christopher Oezbek
Christopher Oezbek

Reputation: 26373

Update in 2022

I recently realized that using by using convert you actually can't solve this task because convert turns all the input images into bmps and change the color depth of the images.

I have thus updated my script to use icotool (sudo apt install icoutils):

#!/bin/bash

for size in 16 24 32 48 64 96 128 256; do
    inkscape --export-filename $size.png -w $size -h $size logo.svg >/dev/null 2>/dev/null
done

for size in 16 24 32 48; do

  convert -colors 256 +dither $size.png png8:$size-8.png
  convert -colors 16  +dither $size-8.png $size-4.png

done

convert 16.png 24.png 32.png 48.png 16-8.png 24-8.png 32-8.png 48-8.png 16-4.png 24-4.png 32-4.png 48-4.png 64.png 96.png 128.png 256.png logo.ico

icotool -c -o logo.ico 16.png 24.png 32.png 48.png 16-8.png 24-8.png 32-8.png 48-8.png 16-4.png 24-4.png 32-4.png 48-4.png 64.png 96.png -r 128.png -r 256.png

rm 16.png 24.png 32.png 48.png 16-8.png 24-8.png 32-8.png 48-8.png 16-4.png 24-4.png 32-4.png 48-4.png 64.png 96.png 128.png 256.png

Original Answer

Building on all previous answers and correcting the following mistakes:

  • Don't use -color=256, as you need 32-bit color versions for all sizes with modern Windows versions (Vista+)
  • Necessary sizes in Windows are 16, 24, 32, 48, 64, 128, 256. Most scripts forgot those. I am unsure if 96 is really needed, but it doesn't hurt.
  • You need to include 4-bit and 8-bit palette versions for the sizes 16, 24, 32 and 48 (apparently to support Remote Desktop applications in particular)

All in one bash script (starting from logo.svg and producing logo.ico):

#!/bin/bash

for size in 16 24 32 48 64 96 128 256; do
    inkscape --export-filename $size.png -w $size -h $size logo.svg >/dev/null 2>/dev/null
done

for size in 16 24 32 48; do

  convert -colors 256 +dither $size.png png8:$size-8.png
  convert -colors 16  +dither $size-8.png $size-4.png

done

convert 16.png 24.png 32.png 48.png 16-8.png 24-8.png 32-8.png 48-8.png 16-4.png 24-4.png 32-4.png 48-4.png 64.png 96.png 128.png 256.png logo.ico

rm 16.png 24.png 32.png 48.png 16-8.png 24-8.png 32-8.png 48-8.png 16-4.png 24-4.png 32-4.png 48-4.png 64.png 96.png 128.png 256.png

Upvotes: 5

Riccardo Volpe
Riccardo Volpe

Reputation: 1623

To create an ICO file from a SVG while keeping aspect ratio:

  1. look for SVG proportions (eg. 1920x1080)
  2. for a max 256px wide icon, do the proportion: [1920:1080=256:x] -> x=(1080*256)/1920=144

  3. finally, use ImageMagick convert command:

    convert -background none -resize 256x144 -gravity center -extent 256x144 image.svg image.ico

Upvotes: 1

user4427511
user4427511

Reputation: 

magick convert in.jpg -define icon:auto-resize=16,48,256 -compress zip out.ico

http://imagemagick.org/script/command-line-options.php#define

Upvotes: 12

Smylers
Smylers

Reputation: 1713

Bash one-liner to convert logo.svg into logo.ico, using Inkscape to export the png images at various sizes:

eval convert \
  '<(inkscape -e /dev/stderr logo.svg -w '{16,24,32,48,64,128,256}' 2>&1 > /dev/null)' \
  logo.ico

Inspired by Malcolm MacLeod's answer, but avoiding the explicit loop and the temporary files.

The stderr and redirection is to avoid Inkscape's success message on stdout (“Bitmap saved as: /dev/stdout”) ending up in the image data.

Upvotes: 2

hnasarat
hnasarat

Reputation: 191

I cleaned up Malcolm's solution, fixed a bug, and also made the script output tiffs so you can run tiff2icns in osx.

#! /bin/bash
# converts the passed-in svgs to tiff and ico

if [[ $# -eq 0 ]]; then
    echo "Usage: $0 svg1 [svg2 [...]]"
    exit 0
fi

temp=$(mktemp -d)
declare -a res=(16 24 32 48 64 128 256 512)
for f in $*; do
    mkdir -p $temp/$(dirname $f)
    for r in "${res[@]}"; do
        inkscape -z -e $temp/${f}${r}.png -w $r -h $r $f
    done
    resm=( "${res[@]/#/$temp/$f}" )
    resm=( "${resm[@]/%/.png}" )
    for filetype in ico tiff; do
        convert "${resm[@]}" ${f%%.*}.$filetype
    done
done
rm -rf $temp

Upvotes: 10

rogerdpack
rogerdpack

Reputation: 66771

Here's the standard recipe from the FAQ, modified to have all the resolutions mentioned in the msdn link (except those under "Additional sizes...") (the other answer didn't have all resolutions desired)

 convert input.png -bordercolor white -border 0 ( -clone 0 -resize 16x16 ) ( -clone 0 -resize 24x24 ) ( -clone 0 -resize 32x32 ) ( -clone 0 -resize 40x40 ) ( -clone 0 -resize 48x48 ) ( -clone 0 -resize 64x64 ) ( -clone 0 -resize 256x256 ) -delete 0 -alpha off -colors 256 output.ico

Upvotes: 4

Simon Woodhead
Simon Woodhead

Reputation: 561

Modifying hnasarat's answer for windows users. The easiest way to is install InkScape and ImageMagick using Chocolatey and then run the following in a batch file. (It is not as flexible as the other answers you just pass in one svg but it pumps out all the favicons recommended in Favicon Cheat Sheet.

@ECHO off

IF "%1"=="" (
    ECHO You must provide an svg file
    EXIT /b
) 

IF NOT EXIST favicons MD favicons

SET "sizes=16 24 32 48 57 64 72 96 120 128 144 152 195 228 256 512"

FOR %%s IN (%sizes%) DO (
    inkscape -z -e favicons/favicon-%%s.png -w %%s -h %%s %1
)

convert favicons/favicon-16.png favicons/favicon-24.png favicons/favicon-32.png favicons/favicon-48.png favicons/favicon-64.png favicons/favicon.ico

Upvotes: 1

Malcolm MacLeod
Malcolm MacLeod

Reputation: 674

It doesn't seem like ImageMagick alone can do this as it does not handle SVG resizing in a sane way (but instead resizes the SVG only after rasterizing which produces a horrid result)

By using inkscape to do the conversion it appears to be possible though, e.g. The following one liner should give you a usable icon with all icon sizes:

mkdir temp; declare -a res=(16 24 32 48 64 128 256); for f in *.svg; do for r in "${res[@]}"; do inkscape -z -e temp/${f}${r}.png -w $r -h $r $f; done; resm=( "${res[@]/#/temp/$f}" ); resm=( "${resm[@]/%/.png}" ); convert "${resm[@]}" ${f%%.*}.ico; done; rm -rf temp;

The above will not however give you 8 and 4 bit icons within the file (I think these are only needed for older windows versions that are no longer supported) It should be possible with a bit more work to have it do these if you need them.

Upvotes: 11

RobV
RobV

Reputation: 28646

ImageMagick has a recipe for this in their documentation, see FavIcon Web Page Link Thumbnail

Essentially you run the following:

convert image.png  -bordercolor white -border 0 \
          \( -clone 0 -resize 16x16 \) \
          \( -clone 0 -resize 32x32 \) \
          \( -clone 0 -resize 48x48 \) \
          \( -clone 0 -resize 64x64 \) \
          -delete 0 -alpha off -colors 256 favicon.ico

You can modify this to include larger resolutions as necessary and to change things like border, transparency settings etc.

Upvotes: 36

Related Questions