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-196x196.png
(196x196) - Android Homescreen.
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
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');
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: 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.
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: gleero@gmail.com
Big thanks for contributing:
- #28 Add Android Homescreen app icon.
-
#21 Add
sharp
option for sharping icons.
- #24 Apple and regular favicons are now optional.
- Improved HTML tags clearing.
- #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.
- 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.