¿Cómo convertir un SVG cuadrado a ICO de tamaño completo?


24

Dibujé un ícono en InkScape y me gustaría exportarlo a un archivo ICO que incluiría sprites para todas las resoluciones razonables (16x16, 32x32, ... 256x256, etc.). ¿Cómo se puede hacer esto (sin usar un software enorme y costoso como Photoshop, CorelDraw, etc.)?


2
Una búsqueda rápida me dice que no hay forma de exportar incluso un solo ICO de InkScape, pero hay muchas sugerencias sobre cómo hacerlo con software adicional gratuito, como GIMP. ¿Marcó esas opciones? Si no funcionaron para usted, ¿puede decir por qué no?
usr2564301

@RadLexus lo que probé es una serie de herramientas en línea y todas, por lo que pude entender, significan crear ICOns de tamaño único.
Ivan

55
¿Entonces quieres saber cómo crear ICO de varios tamaños? Pruebe las opciones en esta respuesta de Stack Overflow: stackoverflow.com/questions/4354617/… (nuevamente, encontrado por una simple consulta de Google ...).
usr2564301

1
Hay una extensión de Inkscape que parece exportarse como archivo ico , pero no tengo tiempo en este momento para probar si funciona.
Paolo Gibellini

Si ha encontrado alguno de los siguientes para responder a su pregunta, márquelo como la respuesta aceptada.
DᴀʀᴛʜVᴀᴅᴇʀ

Respuestas:


24

Puede usar ImageMagick de inmediato:

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

3
¿Por qué esa densidad?
naught101

1
No sé, acabo de pegar esto desde otro lado.
heltonbiker

@ naught101 aquí está la documentación para el indicador de densidad, aunque parece que es un paso bastante innecesario a menos que esté haciendo algo muy específico con tamaños de imagen, ppp y la rasterización de imagen intermedia de los mismos. imagemagick.org/script/command-line-options.php#density
CreationTribe

77
Úselo convert -background none icon.svg -define icon:auto-resize icon.icopara mantener un fondo transparente.
Robert Hume

2
magick convert -background none icon.svg -define icon:auto-resize icon.icotrabajó para mi.
intotecho

15

Una solución de línea de comando:

1) Exporte su SVG a PNG con InkScape

2) Cambie el tamaño de esta imagen PNG al tamaño que desee con ImageMagick:

magick convert master.png -resize 16x16 16.png
magick convert master.png -resize 32x32 32.png
magick convert master.png -resize 48x48 48.png

3) Convierta las imágenes PNG a ICO:

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

4) 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

También puede usar un lote simple o un archivo de shell para simplificar el trabajo.
Paolo Gibellini

3
¿No sería mejor (incluso un poco más complicado) exportar los muchos tamaños png directamente desde SVG en lugar de cambiar el tamaño de PNG ya rasterizados?
heltonbiker

1
En caso de que alguien más sienta curiosidad, el "..." no es literal. Representa otros tamaños de archivo png para incluir en el archivo favicon.ico.
Nostalg.io

@ Nostalg.io Buen comentario, gracias! Edité la respuesta.
philippe_b

5

Versión Bash ...

#!/bin/bash

set -ex

svg=$1

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

echo Making bitmaps from your svg...

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

echo Compressing...

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

echo Converting to favicon.ico...

convert $(ls -v favicon-*.png) favicon.ico

## Clean-up maybe?
# rm favicon-*.png

echo Done

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

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

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

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


4

Sugeriría este enfoque:

1) cree un script para exportar el SVG a cualquier tamaño requerido. Codifiqué 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 hace eco de todos los comandos de exportación a un archivo temporal para una mejor gestión del proceso de Inkscape. El cli param "shell" acepta más comandos usando una sola instancia en lugar de generar una instancia por comando.

Con este parámetro, Inkscape ingresará a 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 característica es principalmente útil para las secuencias de comandos y los usos del servidor: no agrega nuevas capacidades, pero le permite mejorar los requisitos de velocidad y memoria de cualquier secuencia de comandos 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 Inkscape válida completa pero sin el nombre del programa Inkscape, por ejemplo "file.svg --export-pdf = file.pdf". ( ver manual de inkscape )

2) Agregue al script anterior la sintaxis de conversión indicada en la respuesta de philippe-b que combina todos los PNG generados en un solo archivo ICO

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


1

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/

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.