Grunt App Icons

Will create icons for your project.

Favicon
Touch Icons
iOS Icons
Android Icons

Installation

npm install grunt-app-icons --save-dev

grunt.loadNpmTasks('grunt-app-icons');

Example Configuration

appIcons: {
  all: {
    src: 'src/icon/app-icon.png',
    dest: 'src/icon/',
    options: {
      createDirectories: true,
      type: ['all']
    }
  },
  www: {
    src: 'src/icon/app-icon.png',
    dest: 'www/',
    options: {
      type: ['touch', 'favicon'] // android, ios, ios6
    }
  }
}

Note that the ios type no longer includes icons that are required only for iOS 6 and earlier. For apps that support earlier versions of iOS, be sure to include both the ios and ios6 types, otherwise icons will only be generated for iOS 7 and newer.

Advanced Configuration

Additional arguments may be passed to the convert command as needed as an array or function. The %size% placeholder is interpolated with the wxh dimensions of the icon being processed. For example, to apply a scalable overlay to the icons (where 120x120 is the size of the SVG):

appIcons: {
  mobile_beta: {
    src: 'src/icon/app-icon.png',
    dest: 'src/icon/',
    options: {
      createDirectories: true,
      type: ['ios', 'ios6', 'android'],
      args: [
        '-background', 'none',
        '-size', '120x120',
        'src/icon/app-icon-beta-overlay.svg',
        '-resize', '%size%',
        '-composite'
      ]
    }
  }
}

Similarly, to create rounded corners on Android:

appIcons: {
  mobile_beta: {
    src: 'src/icon/app-icon.png',
    dest: 'src/icon/',
    options: {
      createDirectories: true,
      type: ['android'],
      args: function (size) {
        if (size) {
          var dimensions = size.split('x');
          var cornerRadius = Math.round(100 * dimensions[0] * 20 / 114) / 100;

          return [
            // Create a 1px transparent border around the image to improve
            // antialiasing
            '(',
              '-size', '%size%',
              'xc:none',
              '-draw', 'fill white rectangle 1,1 ' + (dimensions[0] - 2) + ',' + (dimensions[1] - 2),
            ')',
            '-compose', 'CopyOpacity',
            '-composite',

            // Mask off the four corners
            '(',
              '+clone',
              '-alpha', 'extract',
              '-draw', 'fill black rectangle 1,1 ' + cornerRadius + ',' + cornerRadius + ' fill white circle ' + cornerRadius + ',' + cornerRadius + ' ' + cornerRadius + ',1',
              '(',
                '+clone', '-flip',
              ')', '-compose', 'Multiply', '-composite',
              '(',
                '+clone', '-flop',
              ')', '-compose', 'Multiply', '-composite',
            ')',
            '-alpha', 'off',
            '-compose', 'CopyOpacity',
            '-composite'
          ];
        }
        return [];
      }
    }
  }
}

Note that the favicon type does not support size interpolation and uses a significantly different convert command than the other icons that are simple resize operations.

Html

<link rel="icon" sizes="192x192" href="touch-icon-192x192.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

License

grunt-app-icons is licensed with the MIT license.