Norse Polytheistic Mythology
    Wondering what’s next for npm?Check out our public roadmap! »

    grunt-favicons

    0.8.0 • Public • Published

    grunt-favicons

    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.

    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;
    • homescreen-192x192.png (192x192) - 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:

    cinst imagemagick.app

    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');

    The "favicons" task

    Overview

    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.
        },
      },
    })

    Options

    options.html

    Type: String Default value: ''

    Path to HTML you want to add links to icons.

    options.truncateHTML

    Type: Boolean Default value: false

    Truncate the HTML file before adding links.

    options.HTMLPrefix

    Type: String Default value: ''

    The path to the folder that contains the icons.

    options.apple

    Type: Boolean Default value: true

    Generate apple icons.

    options.regular

    Type: Boolean Default value: true

    Generate regular icons.

    options.trueColor

    Type: Boolean Default value: false

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

    options.sharp

    Type: Float Default value: 0

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

    options.precomposed

    Type: Boolean Default value: true

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

    options.precomposed

    options.appleTouchBackgroundColor

    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.

    options.appleTouchBackgroundColor

    options.appleTouchPadding

    Type: Integer Default value: 15

    Padding in iOS icons. In percents.

    options.windowsTile

    Type: Boolean Default value: true

    Add Windows 8 tile icon.

    options.coast

    Type: Boolean Default value: false

    Add 228x228 icon for Coast browser.

    options.tileBlackWhite

    Type: Boolean Default value: true

    Make white-only icon on Windows 8 tile.

    options.tileBlackWhite

    options.tileColor

    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.

    options.firefox

    Type: Boolean Default value: false

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

    options.firefoxManifest

    Type: String Default value: ''

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

    options.firefoxRound

    Type: Boolean Default value: false

    Make Firefox OS icons rounded.

    options.firefoxRound

    options.androidHomescreen

    Type: Boolean Default value: false

    Make Android Homescreen app icon.

    options.indent

    Type: String Default value: \t

    String value for the indentation to be used for each link in the resulting HTML. Defaults to a tab character.

    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.

    options.getLowResolutionImagePath

    Type: Function Default value:

    getLowResolutionImagePath: function (srcFilePath, size) {
        var extname = path.extname(srcFilePath);
        return path.join(path.dirname(srcFilePath), path.basename(srcFilePath, extname) + '.' + size + extname);
    }

    Change low resolution image path (default template of naming).

    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.

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

    Custom Options

    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'
        }
      },
    })

    Contributing

    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.

    Feedback

    Author: Vladimir Perekladov

    Website: gleero.com

    E-mail: gleero@gmail.com

    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;
    • Readme.md fix.

    githalytics.com alpha

    Install

    npm i grunt-favicons

    DownloadsWeekly Downloads

    481

    Version

    0.8.0

    License

    none

    Last publish

    Collaborators

    • avatar