Generates all known types and sizes icons from PNG image. Uses ImageMagick.

Input: square logo in png. You can also keep near the source files with resolution prefix e.g. source.16x16.png.

Output:

• favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
• favicon.png (64x64) — modern browsers;
• apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
• apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
• apple-touch-icon-72x72.png (72x72) — iPad non-retina;
• apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
• apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
• apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
• apple-touch-icon-144x144.png (144x144) — iPad retina;
• apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
• windows-tile-144x144.png (144x144) — Windows 8 tile;
• coast-icon-228x228.png (228x228) - Coast browser;
• firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
• firefox-icon-30x30.png (30x30) - Firefox OS;
• firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
• firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
• firefox-icon-60x60.png (60x60) - Firefox OS;
• firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
• firefox-icon-90x90.png (90x90) - Firefox OS;
• firefox-icon-120x120.png (120x120) - Firefox OS;
• firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
• firefox-icon-256x256.png (256x256) - Firefox on Android / Windows.

Adds changes to html file.

This plugin requires Grunt ~0.4.1 and ImageMagick.

Installing ImageMagick:

on Mac:

brew install imagemagick

on Linux:

apt-get install imagemagick

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-favicons --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-favicons');

In your project's Gruntfile, add a section named favicons to the data object passed into grunt.initConfig().

grunt.initConfig({
  favicons: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

Type: String Default value: ''

Path to HTML you want to add links to icons.

Type: String Default value: ''

The path to the folder that contains the icons.

Type: Boolean Default value: false

Use true color favicon.ico or 256 сolor. True color are larger.

Type: Boolean Default value: true

When is false Safari on iOS < 7 add any effects to the icon.

Type: String Default value: auto Values: auto|none|#COLOR

iOS icon can't be transparent. It needs background. If option set to auto color is selected automatically. none leaves transparency.

Type: Integer Default value: 15

Padding in iOS icons. In percents.

Type: Boolean Default value: true

Add Windows 8 tile icon.

Type: Boolean Default value: false

Add 228x228 icon for Coast browser.

Type: Boolean Default value: true

Make white-only icon on Windows 8 tile.

Type: String Default value: auto Values: auto|none|#COLOR

Background color for Windows 8 tile. If option set to auto color is selected automatically. none leaves transparency.

Type: Boolean Default value: false

Add icons for Firefox OS and Firefox on Android and Windows.

Type: String Default value: ''

Path to Firefox manifest you want to add links to icons.

Type: Boolean Default value: false

Make Firefox OS icons rounded.

If you reduce the image to 16x16, it will blured. To avoid this, you can put near source image the prefixes. For example: source image called logo.png. If you put nearly logo.16x16.png then it will be used.

In this example, the default options are used to create favicon.ico, favicon.png, apple touch icons and windows 8 tile.

grunt.initConfig({
  favicons: {
    options: {},
    icons: {
      src: 'src/logo.png',
      dest: 'build/images'
    }
  },
})

grunt.initConfig({
  favicons: {
    options: {
      trueColor: true,
      precomposed: true,
      appleTouchBackgroundColor: "#e2b2c2",
      coast: true,
      windowsTile: true,
      tileBlackWhite: false,
      tileColor: "auto",
      html: 'build/out/index.html',
      HTMLPrefix: "/images/icons/"
    },
    icons: {
      src: 'src/logo.png',
      dest: 'build/images/icons'
    }
  },
})

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Author: Vladimir Perekladov

Website: gleero.com

E-mail: [email protected]

Big thanks to: ro-ka, debugwand and gausie for contributing!

• #14 Add Firefox icon 120x120;
• #17 Append 70x70, 150x150 and 310x310 for MS tiles;
• Append Apple touch icon 60x60 for iOS 7;
• HTML link sizes order;
• All Apple touch icons contain;
• Linebreaks in HTML;
• #16, #15.

• Small bugfix (#12, #13).

• Add iOS icons padding;
• Support rounded Firefox OS icons.

• Small bugfix;
• #4 Supports php-tags in HTMLPrefix;
• #5 The task on startup removes all possible icons tags from html;
• #8 Firefox OS and Firefox for Android and Windows.

• #3 If destination folder does not exist, create it and continue.

• Add 76x76 for iPad non-retina iOS 7;
• Add 152x152 for iPad retina iOS 7;
• Disable non-precomposed icons for iOS 7 (is no longer supported).

• Add source image prefix;
• 228х228 Coast browser support;
• Readme.md fix.