How to convert a square SVG to all-size ICO?

Question

I've drawn an icon in InkScape and would like to export it to an ICO file that would include sprites for all the reasonable resolutions (16x16, 32x32, ... 256x256 etc). How can this be done (without using huge and expensive software like Photoshop, CorelDraw etc)?

Answer 1

A command line solution:

1. Export your SVG master.svg to PNG with Inkscape:

# Install on Ubuntu
sudo apt-get install inkscape
# Other systems: make sure Inkscape is in your PATH

inkscape -w 16 -h 16 -o 16.png master.svg
inkscape -w 32 -h 32 -o 32.png master.svg
inkscape -w 48 -h 48 -o 48.png master.svg

2. Convert the PNG images to ICO with ImageMagick:

# Install on Ubuntu
sudo apt-get install imagemagick

convert 16.png 32.png 48.png icon.ico

3. Optional - Make sure your ICO contains everything:

$ identify icon.ico
icon.ico[1] ICO 16x16 16x16+0+0 32-bit sRGB 21.2KB 0.000u 0:00.000
icon.ico[0] ICO 32x32 32x32+0+0 32-bit sRGB 21.2KB 0.000u 0:00.000
icon.ico[0] ICO 48x48 48x48+0+0 32-bit sRGB 21.2KB 0.000u 0:00.000

Answer 2

You can use ImageMagick right away:

convert -density 384 icon.svg -define icon:auto-resize icon.ico

[Edit]

Since ImageMagick version 7, you need to add magick in front of the command (see doc on CLI), so the command line is now:

magick -density 384 icon.svg -define icon:auto-resize icon.ico

You can also check this answer for more information: https://stackoverflow.com/a/16922387/1603480

Answer 3

Bash version...

#!/bin/bash

set -ex

svg=$1

size=(16 32 24 48 72 96 144 152 192 196)

out="$(mkdir -d)"

echo Making bitmaps from your svg...

for i in ${size[@]}; do
  inkscape $svg --export-png="$out/$i.png" -w$i -h$i --without-gui
done

echo Compressing...

## Replace with your favorite (e.g. pngquant)
# optipng -o7 "$out/*.png"
pngquant -f --ext .png "$out/*.png" --posterize 4 --speed 1

echo Converting to favicon.ico...

convert "$out/*.png" favicon.ico

# Clean-up
rm -rf "$out/"

echo Done

Usage: ./favicon.sh your-square-svg-file.svg

Requires: inkscape imagemagick optipng (optional) from your package manager.

I found it easier to re-create this for the bash shell since Win10 and Inkscape weren't getting along. This was tested within Windows Subsystem for Linux but it should also work on Mac.

Used this reference to choose the sizes I cared about: https://github.com/audreyr/favicon-cheat-sheet. Adjust the size array to your specific needs.

Answer 4

I would suggest this approach:

1) create a script to export the SVG to any required size. I've coded this .bat script to help me create an Android icon

@echo off
set file="%~f1"
set path=%~dp1
set inkscape="C:\Program Files\Inkscape\inkscape.exe"

echo Le icone saranno salvate in %path%
echo Produzione icone applicative

echo %file% --export-png="%path%/ic32.png" -w32 -h32 > %~dp1/commands.txt
echo %file% --export-png="%path%/ic48.png" -w48 -h48 > %~dp1/commands.txt
echo %file% --export-png="%path%/ic72.png" -w72 -h72 > %~dp1/commands.txt
echo %file% --export-png="%path%/ic96.png" -w96 -h96 > %~dp1/commands.txt
echo %file% --export-png="%path%/ic144.png" -w144 -h144 > %~dp1/commands.txt
echo %file% --export-png="%path%/ic192.png" -w192 -h192 > %~dp1/commands.txt
echo %file% --export-png="%path%/ic512.png" -w512 -h512 > %~dp1/commands.txt
%inkscape% --shell < %~dp1/commands.txt
erase "%~dp1/commands.txt"

echo Procedura terminata

NOTE:

• the defined %inkscape% var should be adequate to your Inkscape install path
• the script echoes all export commands to a temp file to a better management of inkscape process. The "shell" cli param accepts more commands using a single instance instead of spawn an instance per command.

With this parameter, Inkscape will enter an interactive command line shell mode. In this mode, you type in commands at the prompt and Inkscape executes them, without you having to run a new copy of Inkscape for each command. This feature is mostly useful for scripting and server uses: it adds no new capabilities but allows you to improve the speed and memory requirements of any script that repeatedly calls Inkscape to perform command line tasks (such as export or conversions). Each command in shell mode must be a complete valid Inkscape command line but without the Inkscape program name, for example "file.svg --export-pdf=file.pdf". (see inkscape manual)

2) Add to the above script the convert syntax stated in philippe-b answer which merges all the generated PNGs to a single ICO file

3) Optionally, remove all exported PNGs as they are no more needed

Answer 5

This website is my go to for favicon generation as it includes the icons for the Add To Homescreen for most devices (Windows, macOS, Android, iOS) https://realfavicongenerator.net/

Answer 6

Required tools: inkscape and gimp

1. inkscape: export your svg to a png 64x64.
2. gimp: create a new project with a transparent background and layer size of 64x64 and import the png image to the layer.
3. duplicate the layer, go to "Layer" > "Scale layer" > choose 32x32
4. duplicate the last layer again and repeat the scaling for 16x16, 8x8
5. export the image to .ico and you will see all layers that will be embedded in the single .ico file. (make sure you don't have empty layers)

Answer 7

To convert SVG to ICO file, you can use: https://redketchup.io/icon-editor and the option: "Create Icon from Image".

Answer 8

Here is the solution of @pillippe_b wrapped into one BASH function:

function svg2ico {
  basename=${1%.svg}
  inkscape -w 16 -h 16 -e "$basename_16.png" "$1"
  inkscape -w 32 -h 32 -e "$basename_32.png" "$1"
  inkscape -w 48 -h 48 -e "$basename_48.png" "$1"
  convert -verbose "$basename_16.png" "$basename_32.png" "$basename_48.png" "$basename.ico"
}

Only the resulting .ico file remains. This requires Inkscape and ImageMagick be installed:

sudo apt-get install inkscape imagemagick

Answer 9

While most online tools failed this task (and converted to a single resolution .ico), I just came across one that worked fine: https://anyconv.com/svg-to-ico-converter/

It converted my .svg file into an .ico with 9 different resolutions, from 16x16 up to 256x256.

Answer 10

Inkscape is nice but I already have it on Windows and it would eat a up a lot of extra space on my WSL environment. Thanks to the previous tip which I upvoted, I used Imagemagick convert directly, to resize to different resolutions from e.g. source.svg on the command line:

convert -resize 16x16 -background none source.svg 16.ico
convert -resize 32x32 -background none source.svg 32.ico

Which is also simple enough to script. Note that this includes one resolution only. As per the accepted answer, for multiple resolutions you can convert to several png files first and then combine them all, e.g. convert 16.png 32.png 48.png 64.png 128.png favicon.ico.

It is necessary to use -background none because the default is white "if none is specified or found in the image". Of course, remove it, if you do actually have a background to keep.

It is pretty cool to be able to use convert to do things like precisely resize a JPG image while converting it to PNG, using a similar command to above.

For example:

convert -resize 700 path/to/original.jpg path/to/resized.jpg

Will resize original.jpg to a width of 700 pixels, while keeping the aspect ratio, into a new file resized.jpg. One of the most intuitive command-line tools I've used!