Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including grunt-favicons-windows with all npm packages installed. Try it out:

require("grunt/package.json"); // grunt is a peer dependency. var gruntFaviconsWindows = require("grunt-favicons-windows")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

grunt-favicons-windows v0.6.6

Generate favicon.ico and icons for iOS, Android, Windows 8 and Firefox (OS). This build works better on Windows.


Build Status NPM version

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.


  • 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;
  • homescreen-196x196.png (196x196) - Android Homescreen.

Adds changes to html file.

Getting Started

This plugin requires Grunt ~0.4.1 and ImageMagick.

Installing ImageMagick:

on Mac:

brew install imagemagick

on Linux:

apt-get install imagemagick

On Windows:


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:


The "favicons" task


In your project's Gruntfile, add a section named favicons to the data object passed into 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: true

Generate apple icons.


Type: Boolean Default value: true

Generate regular icons.


Type: Boolean Default value: false

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

Type: Float Default value: 0

Adaptively sharpen pixels. Increase effect near edges. 0 — disable.


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.



Type: Boolean Default value: false

Make Android Homescreen app icon.

Low resolution

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.

Usage Examples

Default Options

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

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

Custom Options

  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



Big thanks for contributing:

Release History

2014-04-18 v0.6.4

  • #28 Add Android Homescreen app icon.

2014-04-01 v0.6.3

  • #21 Add sharp option for sharping icons.

2014-04-01 v0.6.2

  • #24 Apple and regular favicons are now optional.

2014-03-05 v0.6.1

  • Improved HTML tags clearing.

2013-12-19 v0.6.0

  • #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.

2013-12-11 v0.5.1

2013-11-30 v0.5.0

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

2013-11-26 v0.4.0

  • 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.

2013-10-11 v0.3.2

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

2013-10-02 v0.3.0

  • 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).

2013-09-09 v0.2.0

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free