Creating a Favicon with ImageMagick

The short answer

ImageMagick is a command-line image processing suite that can convert a logo file, whether a PNG or an SVG, into a favicon.ico file. A single ICO file can hold several pixel sizes of the same icon. ImageMagick's ICO writer can generate those sizes in one step through the icon:auto-resize option. The result is always a raster icon. Even when you start from vector artwork, ImageMagick draws it as pixels at each target size. It does not carry the vector paths into the ICO file.

In practice, ImageMagick is a convenient way to package a finished logo mark into the legacy ICO format. It is not a vector editor. It does not produce an editable or scalable SVG favicon.

A typical conversion command

In ImageMagick 7 the main command is magick. Older ImageMagick 6 installations use convert instead. The general pattern for building a multi-size ICO from a square source image looks like this:

magick logo.png -background none -define icon:auto-resize=16,32,48 favicon.ico

The values after icon:auto-resize are the square pixel sizes to embed. Small sizes such as 16, 32 and 48 are common choices for browser tabs and shortcuts. The ICO format tops out at 256 by 256 pixels per embedded image. The -background none setting asks ImageMagick to keep transparent areas transparent instead of filling them with a solid color.

To confirm which sizes ended up inside the file, you can inspect it with ImageMagick's identify tool:

magick identify favicon.ico

Starting from an SVG logo

ImageMagick can read SVG files, but it hands the drawing work to a renderer. Depending on how ImageMagick was built and what is installed, that renderer may be an external library or ImageMagick's own internal SVG reader. Different renderers can handle gradients, filters, text and other advanced SVG features differently. The same SVG can therefore produce slightly different results on different machines.

Because SVG has no fixed pixel size, it helps to set a rendering density before the input file. This rasterizes the artwork at a generous resolution before it is scaled down. Otherwise ImageMagick may render it small and then enlarge or soften it. The -density option must come before the input filename to take effect:

magick -background none -density 384 logo.svg -define icon:auto-resize=16,32,48 favicon.ico

The density value above is only an illustration. No tested optimum was supplied for this article. The right value depends on the artwork's declared dimensions and on how much detail you need at the largest embedded size.

Vector artwork, embedded rasters and previews

A file ending in .svg is not proof that it contains editable vector paths. Some SVG files simply wrap an embedded bitmap image. Others are exported previews with little real path data. If the source SVG holds an embedded raster, ImageMagick will only resample that bitmap. You gain none of the crispness that true vector shapes would give. Checking the file in a vector editor, or reading its markup for path and shape elements rather than an embedded image element, tells you what you actually have.

Once the ICO is built, it is a set of pixel images. Keep the original vector master as the editable source. Treat the ICO, and any PNG exports, as delivery files that are regenerated from that master when the logo changes.

Where ImageMagick fits and where it does not

Task | ImageMagick's role

Packaging several sizes into one favicon.ico | Well suited; icon:auto-resize does this in one command

Rendering an SVG logo to PNG or ICO | Possible; output quality depends on the SVG renderer in use

Producing an SVG favicon | Not its job; an SVG favicon is the vector file itself, prepared in a vector editor

Simplifying a detailed logo for very small sizes | Not automated; automatic downscaling cannot redesign artwork for legibility

Many current browsers can use an SVG file directly as a favicon. In that case the vector file is served as is and ImageMagick is not involved. ImageMagick's main value is producing the ICO fallback, plus any fixed-size PNG icons a project still needs.

Detailed logos often lose legibility at very small pixel sizes. Fine lines, small text and thin gaps can blur together. Automatic resizing only scales what is there. A simplified mark, such as a monogram or a single shape from the logo, usually needs to be prepared in the vector artwork first. That editorial step comes before any ImageMagick command.

Rights to the artwork

Converting a logo with ImageMagick is a technical step. It does not change who owns the artwork. Being able to download a logo file is not the same as having permission to modify it, crop it into a favicon, or use it to represent a site. Favicons for your own brand or a client's brand are routine. Building one from someone else's logo, trademark or licensed typeface needs the owner's permission.

Gaps in this overview

• No specific ImageMagick version, build configuration or SVG renderer was confirmed for this article. Option behavior should be checked against the documentation for your installed version.
• No conversion tests or visual comparisons were performed. Statements about output quality are general principles, not measured results.
• The size and density values shown are illustrative examples, not verified recommendations for any particular logo.