¿Cómo convertir un SVG cuadrado a ICO de todos los tamaños?

Una solución de línea de comando:

1. Exporta tu SVG master.svga PNG con Inkscape:

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

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

2. Convierta las imágenes PNG a ICO con ImageMagick:

# Install on Ubuntu
sudo apt-get install imagemagick

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

3. Opcional: asegúrese de que su ICO contenga todo:

$ 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

Puede usar ImageMagick de inmediato:

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

[Editar]

Desde la versión 7 de ImageMagick, debe agregar magickantes del comando (consulte el documento en CLI ), por lo que la línea de comando ahora es:

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

También puede consultar esta respuesta para obtener más información: https://stackoverflow.com/a/16922387/1603480

Versión bash...

#!/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

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

Requiere: inkscape imagemagick optipng (opcional) de su administrador de paquetes.

Encontré más fácil volver a crear esto para bash shell ya que Win10 e Inkscape no se llevaban bien. Esto se probó en el subsistema de Windows para Linux, pero también debería funcionar en Mac.

Usé esta referencia para elegir los tamaños que me interesaban: https://github.com/audreyr/favicon-cheat-sheet . Ajuste la sizematriz a sus necesidades específicas.

Yo sugeriría este enfoque:

1) cree un script para exportar el SVG a cualquier tamaño requerido. He codificado este script .bat para ayudarme a crear un ícono de Android

@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

NOTA :

• el %inkscape% var definido debe ser adecuado para su ruta de instalación de Inkscape
• el script repite todos los comandos de exportación a un archivo temporal para una mejor gestión del proceso de Inkscape. El parámetro cli "shell" acepta más comandos usando una sola instancia en lugar de generar una instancia por comando.

Con este parámetro, Inkscape entrará en un modo de shell de línea de comando interactivo. En este modo, escribe comandos en el indicador e Inkscape los ejecuta, sin tener que ejecutar una nueva copia de Inkscape para cada comando. Esta función es principalmente útil para scripts y usos de servidor: no agrega nuevas capacidades, pero le permite mejorar la velocidad y los requisitos de memoria de cualquier script que llame repetidamente a Inkscape para realizar tareas de línea de comandos (como exportación o conversiones). Cada comando en modo shell debe ser una línea de comando de Inkscape completa y válida, pero sin el nombre del programa Inkscape, por ejemplo, "file.svg --export-pdf=file.pdf". ( ver manual de inkscape )

2) Agregue a la secuencia de comandos anterior la sintaxis de conversión indicada en la respuesta de philippe-b que fusiona todos los PNG generados en un solo archivo ICO

3) Opcionalmente, elimine todos los PNG exportados ya que ya no son necesarios

Este sitio web es mi opción para la generación de favicon, ya que incluye los íconos para Agregar a la pantalla de inicio para la mayoría de los dispositivos (Windows, macOS, Android, iOS) https://realfavicongenerator.net/

Para convertir un archivo SVG a ICO, puede usar: https://redketchup.io/icon-editor y la opción: "Crear icono a partir de una imagen".

Herramientas necesarias: inkscape y gimp

1. inkscape: exporta tu svg a un png 64x64.
2. gimp: cree un nuevo proyecto con un fondo transparente y un tamaño de capa de 64x64 e importe la imagen png a la capa.
3. duplique la capa, vaya a "Capa"> "Escala de capa"> elija 32x32
4. duplique la última capa nuevamente y repita la escala para 16x16, 8x8
5. exporte la imagen a .ico y verá todas las capas que se incrustarán en el único archivo .ico. (asegúrese de no tener capas vacías)

Si bien la mayoría de las herramientas en línea fallaron en esta tarea (y se convirtieron a un .ico de resolución única), encontré una que funcionó bien: https://anyconv.com/svg-to-ico-converter/

Convirtió mi archivo .svg en un .ico con 9 resoluciones diferentes, desde 16x16 hasta 256x256.

Aquí está la solución de @pillippe_benvuelto en una función BASH:

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"
}

Solo .icoqueda el archivo resultante. Esto requiere que Inkscape e ImageMagick estén instalados:

sudo apt-get install inkscape imagemagick

Inkscape es agradable, pero ya lo tengo en Windows y ocuparía mucho espacio adicional en mi entorno WSL . Gracias al consejo anterior que voté, usé Imagemagick convert directamente, para cambiar el tamaño a diferentes resoluciones, por ejemplo, source.svgen la línea de comando:

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

Que también es lo suficientemente simple como para escribir. Tenga en cuenta que esto incluye una sola resolución. Según la respuesta aceptada , para múltiples resoluciones, primero puede convertusar varios archivos png y luego combinarlos todos, por ejemplo convert 16.png 32.png 48.png 64.png 128.png favicon.ico.

Es necesario usar -background none porque el valor predeterminado es blanco "si no se especifica o se encuentra ninguno en la imagen". Por supuesto, elimínelo, si realmente tiene un fondo para conservar.

Es genial poder usarlo convertpara hacer cosas como cambiar el tamaño de una imagen JPG con precisión mientras la convierte a PNG, usando un comando similar al anterior.

Por ejemplo:

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

Redimensionará original.jpg a un ancho de 700 píxeles, manteniendo la relación de aspecto, en un nuevo archivo resized.jpg . ¡Una de las herramientas de línea de comandos más intuitivas que he usado!