Convert .svg to multisize .ico in bulk

Question

I have a lot of .svg icons that each need to be converted to an .ico file that contains multiple resolutions. The background needs to be transparent.

These are the resolutions I need inside each .ico file:

16x16px
24x24px
32x32px
48x48px
64x64px
128x128px
256x256px

How do I do this in bulk? I'm on Windows 10.

Software info: I have access to the whole Adobe CC package. A free solution would be preferred.

Answer 1

First you need to install imagemagick and svg2png

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" < /dev/null 2> /dev/null

brew install imagemagick

brew install svg2png

Second, you need to run script, which creates multiple png and pack them into ico file.

cd your_folder_with_icons
FILES=*.svg
for f in $FILES
do
    FULL_FILENAME=$f
    FILENAME=${FULL_FILENAME##*/}
    echo ${FILENAME%%.*}
    svg2png $FULL_FILENAME ${FILENAME%%.*}"_256.png" -w 256
    svg2png $FULL_FILENAME ${FILENAME%%.*}"_128.png" -w 128
    svg2png $FULL_FILENAME ${FILENAME%%.*}"_64.png" -w 64
    svg2png $FULL_FILENAME ${FILENAME%%.*}"_48.png" -w 48
    svg2png $FULL_FILENAME ${FILENAME%%.*}"_32.png" -w 32
    svg2png $FULL_FILENAME ${FILENAME%%.*}"_24.png" -w 24
    svg2png $FULL_FILENAME ${FILENAME%%.*}"_16.png" -w 16
    magick convert ${FILENAME%%.*}"_256.png" ${FILENAME%%.*}"_128.png" ${FILENAME%%.*}"_64.png" ${FILENAME%%.*}"_48.png" ${FILENAME%%.*}"_32.png" ${FILENAME%%.*}"_24.png" ${FILENAME%%.*}"_16.png" ${FILENAME%%.*}.ico
done

Profit!

Update for windows with Inkscape:

Install inkscape, install imagemagick, create folder with svg icons, create convert.bat in this folder, paste code, run convert.bat

@Echo off&SetLocal EnableDelayedExpansion

Set inkscape="C:\Program Files\Inkscape\bin\inkscape.com"
Set magick="C:\Program Files\ImageMagick-7.0.7-Q16\magick.exe"

Set "Pattern= "
Set "Replace=_"

For %%a in ("* *.svg") Do (
    Set "File=%%~a"
    Ren "%%a" "!File:%Pattern%=%Replace%!"
)

for %%f in (*.svg) do (
    for %%r in (256 128 64 48 32 24 16) Do (
        %inkscape% ^
          --export-background-opacity=0 ^
          --export-height=%%r ^
          --export-type=png ^
          --export-filename="%%~nf_%%rx%%r.png" ^
          "%%~f"  
    )
    mogrify -units "PixelsPerInch" -density 96 %%~nf_*.png

    %magick% convert %%~nf_16x16.png ^
                     %%~nf_24x24.png ^
                     %%~nf_32x32.png ^
                     %%~nf_64x64.png ^
                     %%~nf_128x128.png ^
                     %%~nf_256x256.png %%~nf.ico
)

Answer 2

Windows batch file, which creates multiple sized .PNGs and merge them to one .ICO file:

@echo off

set inkScape="C:\SOFTWARE\GRAPHIC\INKSCAPE\inkscape.exe"
set imageMagick="C:\**SOFTWARE**\DEVELOPER\IMAGEMAGICK\magick.exe"
set fileName=favicon
set importType=svg
set exportType=png
set exportDpi=300
set imageSizes=(16 24 32 48 57 60 64 70 72 76 96 114 120 128 144 150 152 180 192 196 256 300 320 400 450 460 480 512 600)

for %%s in %imageSizes% do (
 %inkScape% -z -f %~dp0%fileName%.%importType% -w %%s -h %%s -e %~dp0%fileName%-%%sx%%s.%exportType% -d %exportDpi%
 echo CREATED: %fileName%-%%sx%%s.%exportType%
 set e=%fileName%-%%sx%%s.%exportType%
 call :concat (e)
)

%imageMagick% %exportFileNames%"%~dp0%fileName%.ico"
echo MERGED IN: %fileName%.ico

pause goto :eof


:concat (e) (
 set exportFileNames=%exportFileNames%"%~dp0%e%" 
)

If you don't need the .PNG files, you can delete (or remove) them by del FILE or you save all PNGs inside a directory you can remove (after %imageMagick% %exportFileNames%"%~dp0%fileName%.ico").

Hope it helps somebody. :)

EDIT: I forgot to say that InkScape (v.9.92.4.win.64bit) and ImageMagick (v.7.0.8-49-Q16-x64) must be installed before.

Answer 3

Telegraphics have excellent Photoshop plug-in for this purpose.

1. Download version of the Telegraphics ICO (Windows Icon) Format plugin that suits your system.
2. Install plug-in by copying it to Photoshop plug-ins directory, restart Photoshop.
3. Start Photoshop and check if under Help -> About Plug-Ins is a ICO plug-in mentioned.
4. Create new document 256x256 px. Place your PNG image as smart object. Adjust size and position of object, if needed.
5. File -> Save As.. and choose ICO format.
6. Change size of image to smaller and repeat previous step.

As you understand, you can easy create Action for this if manual adjustment of the PNG is not needed and run it as a script for all sizes.

Answer 4

How about this web app: https://convertico.com/svg-to-ico/    

Answer 5

Use grunt with following plugin. https://github.com/andismith/grunt-responsive-images

Don't forget to install Graphic magic http://sourceforge.net/projects/graphicsmagick/files/graphicsmagick/

 responsive_images: {
      dev: {
        options: {
          sizes: [
            {
              width: 360,
              name: 'small'
            },
            {
              width: 1600,
              name: 'large'
            }
          ]
        },
        files: [
          {
            expand: true,
            src: ['image/master-product-collection/**/*.{jpg,gif,png}'],
            cwd: 'src/',
            custom_dest: 'src/image/products/{%= width %}/'
          }
        ]
      }
    }

Even i was having the same issue at the beginning, resolved using grunt :-)