Sharp: Add support for ICO format

Created on 8 Feb 2018 · 7Comments · Source: lovell/sharp

Hello,

Any plans to add support for ICO images? Particularly multi bmp or png ico images used for website favicons.

question

Source

michaelalhilly

👍1

Most helpful comment

It's not that hard with to-ico library:

const fsPromises = require('fs').promises
const sharp = require('sharp')
const toIco = require('to-ico')

generateFavicon('favicon.svg', 'favicon.ico')

async function generateFavicon(sourcePath, destPath) {
  const faviconDimensions = [16, 24, 32, 64]
  const metadata = await sharp(sourcePath).metadata()

  // Create buffer for each size
  const resizedBuffers = await Promise.all(faviconDimensions.map(dimension =>
    sharp(sourcePath, { density: dimension / Math.max(metadata.width, metadata.height) * metadata.density })
      .toBuffer()
  ))

  return fsPromises.writeFile(destPath, await toIco(resizedBuffers))
}

If you are not using SVG as an input, you may remove density and use .resize(dimension) in map callback

piotr-cz on 24 May 2019

👍3

All 7 comments

Hello, did you see #543?

lovell on 9 Feb 2018

Hi. I didn't. Are you saying having Imagemagick installed adds support for the BMP and ICO formats?

michaelalhilly on 9 Feb 2018

A globally-installed copy of libvips that has been compiled with support for *magick is required - see https://jcupitt.github.io/libvips/install.html

lovell on 9 Feb 2018

Got it! I took a look. This is great. Thanks!

michaelalhilly on 10 Feb 2018

It's not that hard with to-ico library:

const fsPromises = require('fs').promises
const sharp = require('sharp')
const toIco = require('to-ico')

generateFavicon('favicon.svg', 'favicon.ico')

async function generateFavicon(sourcePath, destPath) {
  const faviconDimensions = [16, 24, 32, 64]
  const metadata = await sharp(sourcePath).metadata()

  // Create buffer for each size
  const resizedBuffers = await Promise.all(faviconDimensions.map(dimension =>
    sharp(sourcePath, { density: dimension / Math.max(metadata.width, metadata.height) * metadata.density })
      .toBuffer()
  ))

  return fsPromises.writeFile(destPath, await toIco(resizedBuffers))
}

If you are not using SVG as an input, you may remove density and use .resize(dimension) in map callback

piotr-cz on 24 May 2019

👍3

The code is not working with the latest release of to-ico anymore. It should be the following:

const fs = require('fs');
const toIco = require('to-ico');

generateFavicon('src/assets/logo.png', 'public/favicon.ico');

function generateFavicon(sourcePath, destPath) {
  const image = fs.readFileSync(sourcePath);

  toIco([image], {
    sizes: [16, 24, 32, 48, 64],
    resize: true
  }).then( result => {
    fs.writeFileSync(destPath, result);
  });
}