Skip to content

Commit

Permalink
#24 Apple and regular favicons are now optional
Browse files Browse the repository at this point in the history
  • Loading branch information
@gleero
gleero committed Apr 1, 2014
1 parent b38092e commit 3a2434c
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 120 deletions.
6 changes: 4 additions & 2 deletions Gruntfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@ module.exports = function(grunt) {
precomposed: true,
appleTouchBackgroundColor: "#a0b4bb",
coast: true,
apple: false,
regular: false,
windowsTile: true,
tileBlackWhite: false,
tileColor: 'auto'
Expand Down Expand Up @@ -107,9 +109,9 @@ module.exports = function(grunt) {
grunt.registerTask('stage1', ['clean', 'copy', 'favicons:stage1', 'nodeunit:stage1']);
grunt.registerTask('stage2', ['clean', 'copy', 'favicons:stage2', 'nodeunit:stage2']);
grunt.registerTask('stage3', ['clean', 'copy:php', 'copy:manifest', 'favicons:stage3', 'nodeunit:stage3']);
grunt.registerTask('stage4', ['clean', 'favicons:stage4', 'favicons:stage4', 'nodeunit:stage4']);
grunt.registerTask('stage4', ['clean', 'favicons:stage4', 'nodeunit:stage4']);

grunt.registerTask('test', ['jshint', 'stage1', 'stage2', 'stage3', "clean"]);
grunt.registerTask('test', ['jshint', 'stage1', 'stage2', 'stage3', 'stage4', "clean"]);
grunt.registerTask('default', ['test']);

};
17 changes: 16 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,18 @@ 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`
Expand Down Expand Up @@ -140,7 +152,6 @@ Default value: `false`

Add 228x228 icon for [Coast browser](http://coastbyopera.com/).


#### options.tileBlackWhite
Type: `Boolean`
Default value: `true`
Expand Down Expand Up @@ -236,6 +247,10 @@ Big thanks to: [ro-ka](https://github.com/ro-ka), [kfiku](https://github.com/kfi

## Release History

### 2014-04-01 v0.6.2

* [#24](https://github.com/gleero/grunt-favicons/issues/24) Apple and regular favicons are now optional.

### 2014-03-05 v0.6.1

* Improved HTML tags clearing.
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "grunt-favicons",
"description": "Generate favicon.ico and icons for iOS, Android, Windows 8 and Firefox (OS)",
"version": "0.6.1",
"version": "0.6.2",
"homepage": "https://github.com/gleero/grunt-favicons",
"author": {
"name": "Vladimir Perekladov",
Expand Down
194 changes: 104 additions & 90 deletions tasks/favicons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@ module.exports = function(grunt) {
tileBlackWhite: true,
tileColor: "auto", // none, auto, #color
firefox: false,
apple: true,
regular: true,
firefoxRound: false,
firefoxManifest: ""
});
Expand Down Expand Up @@ -103,8 +105,8 @@ module.exports = function(grunt) {
$('link[rel="apple-touch-icon-precomposed"]').remove();
$('meta').each(function(i, elem) {
var name = $(this).attr('name');
if(name && (name === 'msapplication-TileImage' ||
name === 'msapplication-TileColor' ||
if(name && (name === 'msapplication-TileImage' ||
name === 'msapplication-TileColor' ||
name.indexOf('msapplication-square') >= 0)) {
$(this).remove();
}
Expand Down Expand Up @@ -141,90 +143,96 @@ module.exports = function(grunt) {
var ext = path.extname(source);
var basename = path.basename(source, ext);
var dirname = path.dirname(source);
var prefix = options.precomposed ? "-precomposed" : "";
var additionalOpts = options.appleTouchBackgroundColor !== "none" ?
[ "-background", '"' + options.appleTouchBackgroundColor + '"', "-flatten"] : [];
grunt.log.write('Resizing images for "' + source + '"... ');
['16x16', '32x32', '48x48'].forEach(function(size) {
var p = path.join(dirname, basename + "." + size + ext);
var saveTo = path.join(f.dest, size + '.png');
var src = source;
if (fs.existsSync(p)) {
src = p;
}
convert([src, '-resize', size, saveTo]);
files.push(saveTo);
});
grunt.log.ok();

// favicon.ico
grunt.log.write('favicon.ico... ');
convert(files.concat([
"-alpha on",
"-background none",
options.trueColor ? "" : "-bordercolor white -border 0 -colors 64",
path.join(f.dest, 'favicon.ico')
]));
grunt.log.ok();

// 64x64 favicon.png higher priority than .ico
grunt.log.write('favicon.png... ');
convert([source, '-resize', "64x64", path.join(f.dest, 'favicon.png')]);
grunt.log.ok();

////// PNG's for iOS and Android icons
if (options.regular) {

// regular png
['16x16', '32x32', '48x48'].forEach(function(size) {
var p = path.join(dirname, basename + "." + size + ext);
var saveTo = path.join(f.dest, size + '.png');
var src = source;
if (fs.existsSync(p)) {
src = p;
}
convert([src, '-resize', size, saveTo]);
files.push(saveTo);
});
grunt.log.ok();

// favicon.ico
grunt.log.write('favicon.ico... ');
convert(files.concat([
"-alpha on",
"-background none",
options.trueColor ? "" : "-bordercolor white -border 0 -colors 64",
path.join(f.dest, 'favicon.ico')
]));
grunt.log.ok();

// Convert options for transparent and flatten
if (options.appleTouchBackgroundColor === "auto") {
options.appleTouchBackgroundColor = generateColor(source);
// 64x64 favicon.png higher priority than .ico
grunt.log.write('favicon.png... ');
convert([source, '-resize', "64x64", path.join(f.dest, 'favicon.png')]);
grunt.log.ok();
}
var additionalOpts = options.appleTouchBackgroundColor !== "none" ?
[ "-background", '"' + options.appleTouchBackgroundColor + '"', "-flatten",] : [];

var prefix = options.precomposed ? "-precomposed" : "";
////// PNG's for iOS and Android icons

// 57x57: iPhone non-retina, Android 2.1+
grunt.log.write('apple-touch-icon.png... ');
convert(combine(source, f.dest, "57x57", "apple-touch-icon.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();
if (options.apple) {
// Convert options for transparent and flatten
if (options.appleTouchBackgroundColor === "auto") {
options.appleTouchBackgroundColor = generateColor(source);
}

if (options.precomposed) {
grunt.log.write('apple-touch-icon' + prefix + '.png... ');
convert(combine(source, f.dest, "57x57", "apple-touch-icon" + prefix + ".png", additionalOpts, options.appleTouchPadding));
// 57x57: iPhone non-retina, Android 2.1+
grunt.log.write('apple-touch-icon.png... ');
convert(combine(source, f.dest, "57x57", "apple-touch-icon.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();
}

// 60x60: iPhone iOS 7 without size
grunt.log.write('apple-touch-icon-60x60-precomposed.png... ');
convert(combine(source, f.dest, "60x60", "apple-touch-icon-60x60-precomposed.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 72x72: iPad non-retina, iOS 6 and lower
grunt.log.write('apple-touch-icon-72x72' + prefix + '.png... ');
convert(combine(source, f.dest, "72x72", "apple-touch-icon-72x72" + prefix + ".png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 76x76: iPad non-retina, iOS 7 and higher
grunt.log.write('apple-touch-icon-76x76-precomposed.png... ');
convert(combine(source, f.dest, "76x76", "apple-touch-icon-76x76-precomposed.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 114x114: iPhone retina, iOS 6 and lower
grunt.log.write('apple-touch-icon-114x114' + prefix + '.png... ');
convert(combine(source, f.dest, "114x114", "apple-touch-icon-114x114" + prefix + ".png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 120x120: iPhone retina, iOS 7 and higher
grunt.log.write('apple-touch-icon-120x120-precomposed.png... ');
convert(combine(source, f.dest, "120x120", "apple-touch-icon-120x120-precomposed.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 144x144: iPad retina, iOS 6 and lower
grunt.log.write('apple-touch-icon-144x144' + prefix + '.png... ');
convert(combine(source, f.dest, "144x144", "apple-touch-icon-144x144" + prefix + ".png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 152x152: iPad retina, iOS 7 and higher
grunt.log.write('apple-touch-icon-152x152-precomposed.png... ');
convert(combine(source, f.dest, "152x152", "apple-touch-icon-152x152-precomposed.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();
if (options.precomposed) {
grunt.log.write('apple-touch-icon' + prefix + '.png... ');
convert(combine(source, f.dest, "57x57", "apple-touch-icon" + prefix + ".png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();
}

// 60x60: iPhone iOS 7 without size
grunt.log.write('apple-touch-icon-60x60-precomposed.png... ');
convert(combine(source, f.dest, "60x60", "apple-touch-icon-60x60-precomposed.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 72x72: iPad non-retina, iOS 6 and lower
grunt.log.write('apple-touch-icon-72x72' + prefix + '.png... ');
convert(combine(source, f.dest, "72x72", "apple-touch-icon-72x72" + prefix + ".png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 76x76: iPad non-retina, iOS 7 and higher
grunt.log.write('apple-touch-icon-76x76-precomposed.png... ');
convert(combine(source, f.dest, "76x76", "apple-touch-icon-76x76-precomposed.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 114x114: iPhone retina, iOS 6 and lower
grunt.log.write('apple-touch-icon-114x114' + prefix + '.png... ');
convert(combine(source, f.dest, "114x114", "apple-touch-icon-114x114" + prefix + ".png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 120x120: iPhone retina, iOS 7 and higher
grunt.log.write('apple-touch-icon-120x120-precomposed.png... ');
convert(combine(source, f.dest, "120x120", "apple-touch-icon-120x120-precomposed.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 144x144: iPad retina, iOS 6 and lower
grunt.log.write('apple-touch-icon-144x144' + prefix + '.png... ');
convert(combine(source, f.dest, "144x144", "apple-touch-icon-144x144" + prefix + ".png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();

// 152x152: iPad retina, iOS 7 and higher
grunt.log.write('apple-touch-icon-152x152-precomposed.png... ');
convert(combine(source, f.dest, "152x152", "apple-touch-icon-152x152-precomposed.png", additionalOpts, options.appleTouchPadding));
grunt.log.ok();
}

// 228x228: Coast
if (options.coast) {
Expand Down Expand Up @@ -335,26 +343,30 @@ module.exports = function(grunt) {
}

// iOS
elements += "\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"152x152\" href=\"" + options.HTMLPrefix + "apple-touch-icon-152x152-precomposed.png\">\n";
elements += "\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"120x120\" href=\"" + options.HTMLPrefix + "apple-touch-icon-120x120-precomposed.png\">\n";
if (options.apple) {
elements += "\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"152x152\" href=\"" + options.HTMLPrefix + "apple-touch-icon-152x152-precomposed.png\">\n";
elements += "\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"120x120\" href=\"" + options.HTMLPrefix + "apple-touch-icon-120x120-precomposed.png\">\n";

elements += "\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"76x76\" href=\"" + options.HTMLPrefix + "apple-touch-icon-76x76-precomposed.png\">\n";
elements += "\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"60x60\" href=\"" + options.HTMLPrefix + "apple-touch-icon-60x60-precomposed.png\">\n";
elements += "\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"76x76\" href=\"" + options.HTMLPrefix + "apple-touch-icon-76x76-precomposed.png\">\n";
elements += "\t<link rel=\"apple-touch-icon-precomposed\" sizes=\"60x60\" href=\"" + options.HTMLPrefix + "apple-touch-icon-60x60-precomposed.png\">\n";

elements += "\t<link rel=\"apple-touch-icon" + prefix + "\" sizes=\"144x144\" href=\"" + options.HTMLPrefix + "apple-touch-icon-144x144" + prefix + ".png\">\n";
elements += "\t<link rel=\"apple-touch-icon" + prefix + "\" sizes=\"114x114\" href=\"" + options.HTMLPrefix + "apple-touch-icon-114x114" + prefix + ".png\">\n";
elements += "\t<link rel=\"apple-touch-icon" + prefix + "\" sizes=\"144x144\" href=\"" + options.HTMLPrefix + "apple-touch-icon-144x144" + prefix + ".png\">\n";
elements += "\t<link rel=\"apple-touch-icon" + prefix + "\" sizes=\"114x114\" href=\"" + options.HTMLPrefix + "apple-touch-icon-114x114" + prefix + ".png\">\n";

elements += "\t<link rel=\"apple-touch-icon" + prefix + "\" sizes=\"72x72\" href=\"" + options.HTMLPrefix + "apple-touch-icon-72x72" + prefix + ".png\">\n";
elements += "\t<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"" + options.HTMLPrefix + "apple-touch-icon.png\">\n";
elements += "\t<link rel=\"apple-touch-icon" + prefix + "\" sizes=\"72x72\" href=\"" + options.HTMLPrefix + "apple-touch-icon-72x72" + prefix + ".png\">\n";
elements += "\t<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"" + options.HTMLPrefix + "apple-touch-icon.png\">\n";
}

// Coast browser
if (options.coast) {
elements += "\t<link rel=\"icon\" sizes=\"228x228\" href=\"" + options.HTMLPrefix + "coast-icon-228x228.png\" />\n";
}

// Default
elements += "\t<link rel=\"shortcut icon\" href=\"" + options.HTMLPrefix + "favicon.ico\" />\n";
elements += "\t<link rel=\"icon\" type=\"image/png\" sizes=\"64x64\" href=\"" + options.HTMLPrefix + "favicon.png\" />\n";
if (options.regular) {
elements += "\t<link rel=\"shortcut icon\" href=\"" + options.HTMLPrefix + "favicon.ico\" />\n";
elements += "\t<link rel=\"icon\" type=\"image/png\" sizes=\"64x64\" href=\"" + options.HTMLPrefix + "favicon.png\" />\n";
}

// Windows 8 tile. In HTML version background color will be as meta-tag

Expand All @@ -378,9 +390,11 @@ module.exports = function(grunt) {
}

// Cleanup
['16x16', '32x32', '48x48'].forEach(function(size) {
fs.unlink(path.join(f.dest, size + '.png'));
});
if (options.regular) {
['16x16', '32x32', '48x48'].forEach(function(size) {
fs.unlink(path.join(f.dest, size + '.png'));
});
}

});

Expand Down
32 changes: 6 additions & 26 deletions test/test_stage4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ exports.favicons = {
var metaIcon = 0;
$('meta').each(function(i, elem) {
var name = $(this).attr('name');
if(name && (name === 'msapplication-TileImage' ||
name === 'msapplication-TileColor' ||
if(name && (name === 'msapplication-TileImage' ||
name === 'msapplication-TileColor' ||
name.indexOf('msapplication-square') >= 0)) {
metaIcon ++;
}
Expand All @@ -40,34 +40,14 @@ exports.favicons = {
test.expect(1);
var $ = cheerio.load(grunt.file.read(htmlPath));
var linkIcon = 0;
$('link').each(function(i, elem) {
var rel = $(this).attr('rel');
if(rel && rel.indexOf('apple-touch-icon') >= 0) {
linkIcon ++;
}
});

test.ok(linkIcon === 8, 'link apple icons length shount be 8; but is ' + linkIcon);
test.done();
},

// testing if in secund run clear and generates all link other icons
htmlloiExists: function(test) {
test.expect(1);
var $ = cheerio.load(grunt.file.read(htmlPath));
var linkIcon = 0;
$('link').each(function(i, elem) {
var rel = $(this).attr('rel');
if(rel && (rel === 'shortcut icon' ||
rel === 'icon')) {
$('meta').each(function(i, elem) {
var name = $(this).attr('name');
if(name && name.indexOf('msapplication') >= 0) {
linkIcon ++;
}
});

console.log(linkIcon);

test.ok(linkIcon === 3, 'link icons length shount be 3; but is ' + linkIcon);
test.ok(linkIcon === 5, 'link msapplication icons length shount be 5; but is ' + linkIcon);
test.done();
}

};

0 comments on commit 3a2434c

Please sign in to comment.