要求

Question

I've been using ImageMagick, but it produces a very blurry result.

convert -density 300 ../images/favicons/procensus.svg -background transparent -colors 256 -define icon:auto-resize favicon2.ico

It seems to be rendering the image at 300 density, then resizing that with a Gaussian filter for all the other sizes in the icon.

What I actually want it to do is re-render with shape-rendering="crispEdges" at each pixel size in the favicon.

I want ImageMagick (or whatever other tool) to re-render the SVG at each provided density of .ico.

Note that this tool should only be a tool I can use at package build time: an open-source piece of installable software for Linux.

Answer 1

要求

在类UNIX操作系统（Linux，MacOS等）上，下载并安装以下内容：

ImageMagick的
RSVG变频
pngquant

脚本

将以下内容另存为build.sh：

#!/bin/bash

# Relative path to location of SVG file to make into ICO file.
ICON_PATH=../../images/edible.svg

ICON_BASE=$(basename "$ICON_PATH")
ICON_DIR=$(dirname "$ICON_PATH")
ICON_FILE="${ICON_BASE%*.}"
ICON_EXT="${ICON_BASE##*.}"

FAVICON_FILE=favicon
FAVICON_EXT=.ico

# This uses rsvg-convert to create crisp PNG icons.
for size in 16 32 64 128 150 192 512; do
  ICON_OUT=$ICON_FILE-${size}.png
  DIMENSIONS=${size}x${size}
  rsvg-convert -w $size -p 300 -d 300 $ICON_PATH > $ICON_OUT

  # Use ImageMagick to center the image and make it square.
  convert $ICON_OUT -gravity center -background transparent \
    -resize $DIMENSIONS -extent $DIMENSIONS temp-$ICON_OUT

  # Use 8-bit colour to reduce the file size.
  pngquant 256 < temp-$ICON_OUT > $FAVICON_FILE-$DIMENSIONS.png
done

# Merge the 16- and 32-pixel versions into a multi-sized ICO file.
convert \
  $FAVICON_FILE-16x16.png \
  $FAVICON_FILE-32x32.png \
  -colors 256 ../$FAVICON_FILE$FAVICON_EXT

# Create Android icons.
mv $FAVICON_FILE-192x192.png android-chrome-192x192.png
mv $FAVICON_FILE-512x512.png android-chrome-512x512.png

# Create MS tile icon.
mv $FAVICON_FILE-150x150.png mstile-150x150.png

# Clean up the temporary files.
rm ${ICON_FILE}*png temp-${ICON_FILE}*png

编辑文件并将ICON_PATH变量更改为要转换的SVG文件的位置，例如：

ICON_PATH=../images/favicons/procensus.svg

运行脚本：

./build.sh

在当前目录中创建了各种图标。

注意：请务必在运行此命令之前备份文件，因为它会删除处理时创建的PNG文件。

浏览器配置

将以下文件另存为browserconfig.xml：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Answer 2

使用测试SVG，我设法使用此命令获取多尺寸ico文件 - 您可以根据需要更改大小。

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

Answer 3

我已经开始配置shape-rendering="crispEdges"并正在执行：

sudo apt install libbatik-java
rasterizer favicon.svg -d favicon-16.png -h 16 -w 16
rasterizer favicon.svg -d favicon-32.png -h 32 -w 32
rasterizer favicon.svg -d favicon-48.png -h 48 -w 48
rasterizer favicon.svg -d favicon-64.png -h 64 -w 64

convert favicon-16.png favicon-32.png favicon-48.png favicon-64.png favicon.ico

但看起来图像magick不支持该属性。

我仍然在寻找更优雅的答案。

Answer 4

试试这支衬垫。我认为是不言自明的。

convert -density 300 -define icon:auto-resize=256,128,96,64,48,32,16 -background none input.svg out.ico

How to convert an image file from SVG to a multi-size ICO without blur (sharp)

4 个答案:

要求

脚本

浏览器配置