Skip to content

GitLab

Commit 4d2ed2e9 authored by Hayden Bleasel's avatar Hayden Bleasel
Browse files

Merge pull request #56 from haydenbleasel/favicons-4 

Favicons 4
parents 80459d6a 3bde6f42
master v4.2.0 v4.1.0
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 915 additions and 605 deletions
+915 -605
.eslintrc 0 → 100644
+ 12
- 0
View file @ 4d2ed2e9
{
"ecmaFeatures": {
"arrowFunctions": true,
"blockBindings": true
},
"env": {
"node": true
},
"rules": {
"no-undef": 2
}
}
.gitignore
+ 2
- 3
View file @ 4d2ed2e9
......@@ -33,6 +33,5 @@ node_modules
### Custom ###
test/test.html
test/manifest.webapp
test/images-rfg/
test/favicons/
test/images/
test/files/
.travis.yml
+ 2
- 1
View file @ 4d2ed2e9
sudo: false
language: node_js
node_js: '0.10'
node_js: "stable"
bin/favicons.js deleted 100644 → 0
+ 0
- 3
View file @ 80459d6a
var favicons = require('../')
var argv = require('minimist')(process.argv.slice(2))
favicons(argv, console.log)
config/defaults.json 0 → 100644
+ 24
- 0
View file @ 4d2ed2e9
{
"appName": null,
"appDescription": null,
"developerName": null,
"developerURL": null,
"background": "#fff",
"path": "/",
"display": "standalone",
"orientation": "portrait",
"version": "1.0",
"logging": false,
"online": false,
"icons": {
"android": true,
"appleIcon": true,
"appleStartup": true,
"coast": true,
"favicons": true,
"firefox": true,
"opengraph": true,
"windows": true,
"yandex": true
}
}
config/files.json 0 → 100644
+ 89
- 0
View file @ 4d2ed2e9
{
"android": {
"android-chrome-manifest.json": {
"name": "Favicons",
"display": "standalone",
"orientation": "portrait",
"icons": [
{
"src": "android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png",
"density": "1.0"
},
{
"src": "android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
]
}
},
"firefox": {
"manifest.webapp": {
"version": "1.0",
"name": "Favicons",
"description": "Favicon generator for Node.js",
"icons": {
"60": "firefox_app_60x60.png",
"128": "firefox_app_128x128.png",
"512": "firefox_app_512x512.png"
},
"developer": {
"name": "Favicons",
"url": "http://favicons.io"
}
}
},
"windows": {
"browserconfig.xml": [
{ "name": "browserconfig", "children": [
{ "name": "msapplication", "children": [
{ "name": "tile", "children": [
{ "name": "square70x70logo", "attrs": { "src": "mstile-70x70.png" } },
{ "name": "square150x150logo", "attrs": { "src": "mstile-150x150.png" } },
{ "name": "wide310x150logo", "attrs": { "src": "mstile-310x150.png" } },
{ "name": "square310x310logo", "attrs": { "src": "mstile-310x310.png" } },
{ "name": "TileColor", "text": "#FFFFFF" }
]}
]}
]}
]
},
"yandex": {
"yandex-browser-manifest.json": {
"version": 1,
"api_version": 1,
"layout": {
"logo": "yandex-browser-50x50.png",
"color": "#FFFFFF",
"show_title": true
}
}
}
}
config/html.json 0 → 100644
+ 46
- 0
View file @ 4d2ed2e9
{
"android": [
"<link rel='icon' type='image/png' sizes='192x192' href='android-chrome-192x192.png'>",
"<link rel='manifest' href='android-chrome-manifest.json'>"
],
"appleIcon": [
"<link rel='apple-touch-icon' sizes='114x114' href='apple-touch-icon-114x114.png'>",
"<link rel='apple-touch-icon' sizes='120x120' href='apple-touch-icon-120x120.png'>",
"<link rel='apple-touch-icon' sizes='144x144' href='apple-touch-icon-144x144.png'>",
"<link rel='apple-touch-icon' sizes='152x152' href='apple-touch-icon-152x152.png'>",
"<link rel='apple-touch-icon' sizes='180x180' href='apple-touch-icon-180x180.png'>",
"<link rel='apple-touch-icon' sizes='57x57' href='apple-touch-icon-57x57.png'>",
"<link rel='apple-touch-icon' sizes='60x60' href='apple-touch-icon-60x60.png'>",
"<link rel='apple-touch-icon' sizes='72x72' href='apple-touch-icon-72x72.png'>",
"<link rel='apple-touch-icon' sizes='76x76' href='apple-touch-icon-76x76.png'>",
"<meta name='apple-mobile-web-app-capable' content='yes'>"
],
"appleStartup": [
"<link rel='apple-touch-startup-image' media='(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)' href='apple-touch-startup-image-1024x748.png'>",
"<link rel='apple-touch-startup-image' media='(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-1536x2008.png'>",
"<link rel='apple-touch-startup-image' media='(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-2048x1496.png'>",
"<link rel='apple-touch-startup-image' media='(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)' href='apple-touch-startup-image-320x460.png'>",
"<link rel='apple-touch-startup-image' media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-640x1096.png'>",
"<link rel='apple-touch-startup-image' media='(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-640x920.png'>",
"<link rel='apple-touch-startup-image' media='(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)' href='apple-touch-startup-image-768x1004.png'>"
],
"favicons": [
"<link rel='icon' type='image/png' sizes='228x228' href='favicon-228x228.png'>",
"<link rel='icon' type='image/png' sizes='16x16' href='favicon-16x16.png'>",
"<link rel='icon' type='image/png' sizes='230x230' href='favicon-230x230.png'>",
"<link rel='icon' type='image/png' sizes='32x32' href='favicon-32x32.png'>",
"<link rel='icon' type='image/png' sizes='96x96' href='favicon-96x96.png'>",
"<link rel='shortcut icon' href='favicon.ico'>"
],
"opengraph": [
"<meta property='og:image' content='open-graph.png'>"
],
"windows": [
"<meta name='msapplication-TileColor' content='#FFFFFF'>",
"<meta name='msapplication-TileImage' content='mstile-144x144.png'>",
"<meta name='msapplication-config' content='browserconfig.xml'>"
],
"yandex": [
"<link rel='yandex-tableau-widget' href='yandex-browser-manifest.json'>"
]
}
config/icons.json 0 → 100644
+ 176
- 0
View file @ 4d2ed2e9
{
"android": {
"android-chrome-144x144.png": {
"width": 144,
"height": 144
},
"android-chrome-192x192.png": {
"width": 192,
"height": 192
},
"android-chrome-36x36.png": {
"width": 36,
"height": 36
},
"android-chrome-48x48.png": {
"width": 48,
"height": 48
},
"android-chrome-72x72.png": {
"width": 72,
"height": 72
},
"android-chrome-96x96.png": {
"width": 96,
"height": 96
}
},
"appleIcon": {
"apple-touch-icon-114x114.png": {
"width": 114,
"height": 114
},
"apple-touch-icon-120x120.png": {
"width": 120,
"height": 120
},
"apple-touch-icon-144x144.png": {
"width": 144,
"height": 144
},
"apple-touch-icon-152x152.png": {
"width": 152,
"height": 152
},
"apple-touch-icon-180x180.png": {
"width": 180,
"height": 180
},
"apple-touch-icon-57x57.png": {
"width": 57,
"height": 57
},
"apple-touch-icon-60x60.png": {
"width": 60,
"height": 60
},
"apple-touch-icon-72x72.png": {
"width": 72,
"height": 72
},
"apple-touch-icon-76x76.png": {
"width": 76,
"height": 76
},
"apple-touch-icon.png": {
"width": 180,
"height": 180
}
},
"appleStartup": {
"apple-touch-startup-image-1024x748.png": {
"width": 1024,
"height": 768
},
"apple-touch-startup-image-1536x2008.png": {
"width": 1536,
"height": 2008
},
"apple-touch-startup-image-2048x1496.png": {
"width": 2048,
"height": 1496
},
"apple-touch-startup-image-320x460.png": {
"width": 320,
"height": 460
},
"apple-touch-startup-image-640x1096.png": {
"width": 640,
"height": 1096
},
"apple-touch-startup-image-640x920.png": {
"width": 640,
"height": 920
},
"apple-touch-startup-image-768x1004.png": {
"width": 768,
"height": 1004
}
},
"coast": {
"coast-228x228.png": {
"width": 228,
"height": 228
}
},
"favicons": {
"favicon-16x16.png": {
"width": 16,
"height": 16
},
"favicon-230x230.png": {
"width": 230,
"height": 230
},
"favicon-32x32.png": {
"width": 32,
"height": 32
},
"favicon-96x96.png": {
"width": 96,
"height": 96
},
"favicon.ico": {
"width": 16,
"height": 16
}
},
"firefox": {
"firefox_app_128x128.png": {
"width": 128,
"height": 128
},
"firefox_app_512x512.png": {
"width": 512,
"height": 512
},
"firefox_app_60x60.png": {
"width": 60,
"height": 60
}
},
"opengraph": {
"open-graph.png": {
"width": 1500,
"height": 1500
}
},
"windows": {
"mstile-144x144.png": {
"width": 144,
"height": 144
},
"mstile-150x150.png": {
"width": 270,
"height": 270
},
"mstile-310x150.png": {
"width": 558,
"height": 270
},
"mstile-310x310.png": {
"width": 558,
"height": 558
},
"mstile-70x70.png": {
"width": 128,
"height": 128
}
},
"yandex": {
"yandex-browser-50x50.png": {
"width": 50,
"height": 50
}
}
}
config/rfg.json 0 → 100644
+ 71
- 0
View file @ 4d2ed2e9
{
"api_key": "586975d64501c4a6cafabfdfd146f799f028a046",
"master_picture": {
"type": "inline",
"content": ""
},
"files_location": {
"type": "path",
"path": ""
},
"favicon_design": {
"desktop_browser": {},
"ios": {
"picture_aspect": "background_and_margin",
"margin": "4",
"background_color": "#FFFFFF",
"startup_image": {
"background_color": "#FFFFFF"
}
},
"windows": {
"picture_aspect": "no_change",
"background_color": "#FFFFFF"
},
"firefox_app": {
"picture_aspect": "circle",
"keep_picture_in_circle": "true",
"circle_inner_margin": "5",
"background_color": "#FFFFFF",
"manifest": {
"app_name": "Favicons",
"app_description": "Favicon generator for Node.js",
"developer_name": "Favicons",
"developer_url": "http://favicons.io"
}
},
"android_chrome": {
"picture_aspect": "shadow",
"manifest": {
"name": "Favicons",
"display": "standalone",
"orientation": "portrait"
},
"theme_color": "#FFFFFF"
},
"coast": {
"picture_aspect": "background_and_margin",
"background_color": "#FFFFFF",
"margin": "12%"
},
"open_graph": {
"picture_aspect": "background_and_margin",
"background_color": "#FFFFFF",
"margin": "12%",
"ratio": "1.91:1"
},
"yandex_browser": {
"background_color": "#FFFFFF",
"manifest": {
"show_title": true,
"version": "1.0"
}
}
},
"settings": {
"compression": "3",
"scaling_algorithm": "Mitchell",
"error_on_image_too_small": true
},
"versioning": false
}
data/config.json deleted 100644 → 0
+ 0
- 69
View file @ 80459d6a
{
"data": {
"favicon_generation": {
"api_key": "f26d432783a1856427f32ed8793e1d457cc120f1",
"master_picture": {
"type": "inline"
},
"files_location": {
"type": "root"
},
"favicon_design": {
"desktop_browser": {},
"ios": {
"picture_aspect": "background_and_margin",
"margin": "4",
"background_color": "#ddd",
"startup_image": {
"master_picture": {},
"background_color": "#ddd"
}
},
"windows": {
"picture_aspect": "white_silhouette",
"background_color": "#ddd"
},
"firefox_app": {
"picture_aspect": "circle",
"keep_picture_in_circle": "true",
"circle_inner_margin": "5",
"background_color": "#ddd",
"manifest": {}
},
"android_chrome": {
"picture_aspect": "shadow",
"manifest": {
"display": "standalone",
"orientation": "portrait"
},
"theme_color": "#ddd"
},
"coast": {
"picture_aspect": "background_and_margin",
"background_color": "#ddd",
"margin": "12%"
},
"open_graph": {
"picture_aspect": "background_and_margin",
"background_color": "#ddd",
"margin": "12%",
"ratio": "1.91:1"
},
"yandex_browser": {
"background_color": "#ddd",
"manifest": {
"show_title": true
}
}
},
"settings": {
"compression": "3",
"scaling_algorithm": "Mitchell",
"error_on_image_too_small": true
}
}
},
"headers": {
"Content-Type": "application/json"
}
}
data/defaults.json deleted 100644 → 0
+ 0
- 37
View file @ 80459d6a
{
"files": {
"src": null,
"dest": null,
"html": null,
"iconsPath": null,
"androidManifest": null,
"browserConfig": null,
"firefoxManifest": null,
"yandexManifest": null
},
"icons": {
"android": true,
"appleIcon": true,
"appleStartup": true,
"coast": true,
"favicons": true,
"firefox": true,
"opengraph": true,
"windows": true,
"yandex": true
},
"settings": {
"appName": null,
"appDescription": null,
"developer": null,
"developerURL": null,
"background": "#ddd",
"index": null,
"url": null,
"silhouette": false,
"version": 1.0,
"config": null,
"logging": false
},
"favicon_generation": null
}
data/tags.json deleted 100644 → 0
+ 0
- 17
View file @ 80459d6a
{
"add": [],
"remove": [
"link[rel='shortcut icon']",
"link[rel='icon']",
"link[rel^='apple-touch-icon']",
"link[rel='manifest']",
"link[rel='yandex-tableau-widget']",
"link[rel='apple-touch-startup-image']",
"meta[name^='msapplication']",
"meta[name='mobile-web-app-capable']",
"meta[name='theme-color']",
"meta[name='apple-mobile-web-app-capable']",
"meta[property='og:image']",
"link[rel='favicons']"
]
}
helpers.js 0 → 100644
+ 262
- 0
View file @ 4d2ed2e9
/*jslint node:true, nomen:true*/
(function () {
'use strict';
var path = require('path'),
fs = require('fs'),
_ = require('underscore'),
color = require('tinycolor2'),
cheerio = require('cheerio'),
colors = require('colors'),
jsonxml = require('jsontoxml'),
sizeOf = require('image-size'),
Jimp = require('jimp'),
NRC = require('node-rest-client').Client,
xmlconfig = { prettyPrint: true, xmlHeader: true, indent: ' ' };
module.exports = function (options) {
Array.prototype.contains = function(element) {
return this.indexOf(element.toLowerCase()) > -1;
};
function print(context, message) {
var newMessage = '';
if (options.logging && message) {
_.each(message.split(' '), function (item) {
newMessage += ' ' + ((/^\d+x\d+$/gm).test(item) ? colors.magenta(item) : item);
});
console.log('[Favicons] '.green + context.yellow + ':' + newMessage + '...');
}
}
function relative(name) {
return path.join(options.path, name);
}
return {
General: {
background: function (hex) {
print('General:background', 'Parsing colour ' + hex);
var rgba = color(hex).toRgb();
return Jimp.rgbaToInt(rgba.r, rgba.g, rgba.b, rgba.a * 255);
},
source: function (source, callback) {
var sourceset = [];
print('General:source', 'Source type is ' + typeof source);
if (typeof source === 'object') {
_.each(source, function (file, size) {
sourceset.push({ size: size, file: file });
});
} else if (typeof source === 'string') {
sourceset = [{ size: sizeOf(source), file: source }];
}
return callback((sourceset.length ? null : 'Favicons source is invalid'), sourceset);
}
},
HTML: {
parse: function (html, callback) {
print('HTML:parse', 'HTML found, parsing and modifying source');
var $ = cheerio.load(html),
link = $('*').is('link'),
attribute = (link ? 'href' : 'content'),
value = $('*').first().attr(attribute);
if (path.extname(value)) {
$('*').first().attr(attribute, relative(value));
}
return callback(null, $.html());
}
},
Files: {
create: function (properties, name, callback) {
print('Files:create', 'Creating file: ' + name);
if (name === 'android-chrome-manifest.json') {
properties.name = options.appName;
_.map(properties.icons, function (icon) {
icon.src = relative(icon.src);
});
properties = JSON.stringify(properties, null, 2);
} else if (name === 'manifest.webapp') {
properties.version = options.version;
properties.name = options.appName;
properties.description = options.appDescription;
properties.developer.name = options.developerName;
properties.developer.url = options.developerURL;
_.map(properties.icons, function (property) {
property = relative(property);
});
properties = JSON.stringify(properties, null, 2);
} else if (name === 'browserconfig.xml') {
_.map(properties[0].children[0].children[0].children, function (property) {
if (property.name === 'TileColor') {
property.text = options.background;
} else {
property.attrs.src = relative(property.attrs.src);
}
});
properties = jsonxml(properties, xmlconfig);
} else if (name === 'yandex-browser-manifest.json') {
properties.version = options.version;
properties.api_version = 1;
properties.layout.logo = relative(properties.layout.logo);
properties.layout.color = options.background;
properties = JSON.stringify(properties, null, 2);
}
return callback(null, { name: name, contents: properties });
}
},
Images: {
create: function (width, height, background, callback) {
print('Image:create', 'Creating empty ' + width + 'x' + height + ' canvas with ' + background + ' background');
var jimp = new Jimp(width, height, background, function (error, canvas) {
return callback(error, canvas, jimp);
});
},
read: function (file, callback) {
print('Image:create', 'Reading file: ' + file);
Jimp.read(file, function (error, image) {
return callback(error, image);
});
},
resize: function (image, minimum, callback) {
print('Images:resize', 'Resizing image to ' + minimum + 'x' + minimum);
image.resize(minimum, Jimp.AUTO);
return callback(null, image);
},
composite: function (canvas, image, height, width, minimum, callback) {
var offsetHeight = (height - minimum > 0 ? (height - minimum) / 2 : 0),
offsetWidth = (width - minimum > 0 ? (width - minimum) / 2 : 0);
print('Images:composite', 'Compositing ' + minimum + 'x' + minimum + ' favicon on ' + width + 'x' + height + ' canvas');
canvas.composite(image, offsetWidth, offsetHeight);
return callback(null, canvas);
},
getBuffer: function (canvas, callback) {
print('Images:getBuffer', 'Collecting image buffer from canvas');
canvas.getBuffer(Jimp.MIME_PNG, function (error, buffer) {
return callback(error, buffer);
});
}
},
RFG: {
configure: function (sourceset, request, callback) {
print('RFG:configure', 'Configuring RFG API request');
var source = _.max(sourceset, image => image.size.width).file;
fs.readFile(source, function (error, file) {
if (error) {
callback(error);
} else {
request.master_picture.content = file.toString('base64');
request.files_location.path = options.path;
if (options.icons.android) {
request.favicon_design.android_chrome.manifest.name = options.appName;
request.favicon_design.android_chrome.manifest.display = options.display;
request.favicon_design.android_chrome.manifest.orientation = options.orientation;
request.favicon_design.android_chrome.manifest.theme_color = options.background;
} else {
delete request.favicon_design.android_chrome;
}
if (options.icons.appleIcon) {
request.favicon_design.ios.background_color = options.background;
} else {
delete request.favicon_design.ios;
}
if (options.icons.appleStartup) {
request.favicon_design.ios.startup_image.background_color = options.background;
} else {
delete request.favicon_design.ios.startup_image;
}
if (options.icons.coast) {
request.favicon_design.coast.background_color = options.background;
} else {
delete request.favicon_design.coast;
}
if (!options.icons.favicons) {
delete request.favicon_design.desktop_browser;
}
if (options.icons.firefox) {
request.favicon_design.firefox_app.background_color = options.background;
request.favicon_design.firefox_app.manifest.app_name = options.appName;
request.favicon_design.firefox_app.manifest.app_description = options.appDescription;
request.favicon_design.firefox_app.manifest.developer_name = options.developerName;
request.favicon_design.firefox_app.manifest.developer_url = options.developerURL;
} else {
delete request.favicon_design.firefox_app;
}
if (options.icons.opengraph) {
request.favicon_design.open_graph.background_color = options.background;
} else {
delete request.favicon_design.open_graph;
}
if (options.icons.windows) {
request.favicon_design.windows.background_color = options.background;
} else {
delete request.favicon_design.windows;
}
if (options.icons.yandex) {
request.favicon_design.yandex_browser.background_color = options.background;
request.favicon_design.yandex_browser.manifest.version = options.version;
} else {
delete request.favicon_design.yandex_browser;
}
return callback(null, request);
}
});
},
request: function (request, callback) {
print('RFG:request', 'Posting a request to the RFG API');
var client = new NRC();
client.post("http://realfavicongenerator.net/api/favicon", {
data: { "favicon_generation": request },
headers: { "Content-Type": "application/json" }
}, function(data, response) {
if (data.favicon_generation_result && response.statusCode === 200) {
return callback(null, {
files: data.favicon_generation_result.favicon.files_urls,
html: data.favicon_generation_result.favicon.html_code
});
} else {
return callback(data.favicon_generation_result.result.error_message);
}
});
},
fetch: function (url, callback) {
var client = new NRC(),
name = path.basename(url),
image = ['.png', '.jpg', '.bmp', '.ico', '.svg'].contains(path.extname(name));
print('RFG:fetch', 'Fetching ' + (image ? 'image' : 'file') + ' from RFG: ' + url);
client.get(url, function(buffer, response) {
if (buffer && response.statusCode === 200) {
return callback(null, {
file: (image ? null : { name: name, contents: buffer }),
image: (image ? { name: name, contents: buffer } : null)
});
} else {
return callback('Could not fetch URL: ' + url);
}
});
}
}
};
};
}());
index.js
+ 130
- 309
View file @ 4d2ed2e9
This diff is collapsed.
package.json
+ 13
- 10
View file @ 4d2ed2e9
{
"name": "favicons",
"version": "3.2.0",
"version": "4.0.0",
"description": "Favicon generator for Node.js",
"main": "index.js",
"repository": {
......@@ -28,17 +28,20 @@
},
"homepage": "https://github.com/haydenbleasel/favicons",
"dependencies": {
"async": "^0.9.0",
"fstream": "^1.0.2",
"merge-defaults": "^0.2.1",
"async": "^1.5.0",
"cheerio": "^0.19.0",
"colors": "^1.1.2",
"image-size": "^0.3.5",
"jimp": "^0.2.13",
"jsontoxml": "0.0.11",
"loadobjects": "^1.1.3",
"metaparser": "^1.0.5",
"minimist": "^1.1.1",
"mkdirp": "^0.5.0",
"node-rest-client": "^1.4.4",
"unzip": "^0.1.11"
"node-rest-client": "^1.5.1",
"tinycolor2": "^1.1.2",
"underscore": "^1.8.3"
},
"devDependencies": {
"through2": "^0.6.3",
"vinyl": "^0.4.6"
"eslint": "^1.9.0",
"mkdirp": "^0.5.1"
}
}
readme.md
+ 41
- 96
View file @ 4d2ed2e9
# Favicons [![Build Status](https://travis-ci.org/haydenbleasel/favicons.svg?branch=master)](https://travis-ci.org/haydenbleasel/favicons)
## Installation
The Node.js RealFaviconGenerator implementation for generating Favicons, originally built for [Google's Web Starter Kit](https://github.com/google/web-starter-kit) and [Catalyst](https://github.com/haydenbleasel/catalyst). Installed through NPM with:
```
npm install favicons --save-dev
npm install favicons
```
## Usage
Require the module and call it, optionally specifying configuration and callback objects i.e.
```js
var favicons = require('favicons');
favicons(configuration, callback);
```
To use Favicons, require the appropriate module and call it, optionally specifying configuration and callback objects. A sample is shown on the right. The full list of options can be found on GitHub.
### Configuration
The Gulp / Grunt wrapper modules have a few extra properties. You can also configure and use Favicons from the terminal with dot syntax.
To keep things organised, the configuration object contains 4 sub-objects: `files`, `icons`, `settings` and `favicon_generation`. An example of usage with the default values is shown below:
Favicons generates it’s icons locally using pure Javascript with no external dependencies. However, due to extensive collaboration with RealFaviconGenerator, you can opt to have your favicons generated using their online API.
```js
{
files: {
src: null, // Path(s) for file to produce the favicons. `string` or `object`
dest: null, // Path for writing the favicons to. `string`
html: null, // Path(s) for HTML file to write or append metadata. `string` or `array`
iconsPath: null, // Path for overriding default icons path. `string`
androidManifest: null, // Path for an existing android_chrome_manifest.json. `string`
browserConfig: null, // Path for an existing browserconfig.xml. `string`
firefoxManifest: null, // Path for an existing manifest.webapp. `string`
yandexManifest: null // Path for an existing yandex-browser-manifest.json. `string`
},
icons: {
android: true, // Create Android homescreen icon. `boolean`
appleIcon: true, // Create Apple touch icons. `boolean`
appleStartup: true, // Create Apple startup images. `boolean`
coast: true, // Create Opera Coast icon. `boolean`
favicons: true, // Create regular favicons. `boolean`
firefox: true, // Create Firefox OS icons. `boolean`
opengraph: true, // Create Facebook OpenGraph. `boolean`
windows: true, // Create Windows 8 tiles. `boolean`
yandex: true // Create Yandex browser icon. `boolean`
},
settings: {
appName: null, // Your application's name. `string`
appDescription: null, // Your application's description. `string`
developer: null, // Your (or your developer's) name. `string`
developerURL: null, // Your (or your developer's) URL. `string`
version: 1.0, // Your application's version number. `number`
background: null, // Background colour for flattened icons. `string`
index: null, // Path for the initial page on the site. `string`
url: null, // URL for your website. `string`
silhouette: false, // Turn the logo into a white silhouette for Windows 8. `boolean`
logging: false // Print logs to console? `boolean`
},
favicon_generation: null, // Complete JSON overwrite for the favicon_generation object. `object`
}
```
#### Custom Overwrites
The `favicon_generation` object is optional and is used to completely overwrite the [RealFaviconGenerator request](http://realfavicongenerator.net/api/non_interactive_api). An example of this would be:
```js
favicon_generation: {
favicon_design: {
ios: {
margin: 0
}
var favicons = require('favicons'),
source = 'test/logo.png', // Path(s) for source images. `string` or array of `{ size: filepath }`
configuration = {
appName: null, // Your application's name. `string`
appDescription: null, // Your application's description. `string`
developerName: null, // Your (or your developer's) name. `string`
developerURL: null, // Your (or your developer's) URL. `string`
background: "#fff", // Background colour for flattened icons. `string`
path: "/", // Path for overriding default icons path. `string`
display: "standalone", // Android display: "browser" or "standalone". `string`
orientation: "portrait", // Android orientation: "portrait" or "landscape". `string`
version: "1.0", // Your application's version number. `number`
logging: false, // Print logs to console? `boolean`
online: false, // Use RealFaviconGenerator to create favicons? `boolean`
icons: {
android: true, // Create Android homescreen icon. `boolean`
appleIcon: true, // Create Apple touch icons. `boolean`
appleStartup: true, // Create Apple startup images. `boolean`
coast: true, // Create Opera Coast icon. `boolean`
favicons: true, // Create regular favicons. `boolean`
firefox: true, // Create Firefox OS icons. `boolean`
opengraph: true, // Create Facebook OpenGraph. `boolean`
windows: true, // Create Windows 8 tiles. `boolean`
yandex: true // Create Yandex browser icon. `boolean`
}
}
settings: {
compression: 1
}
}
```
You can overwrite any options you'd like and they are merged in with the recommended default configuration.
#### Multiple Sources
You can specify custom source images for each platform with the following syntax for `files.src`:
```js
src: {
android: 'images/android.png',
appleIcon: 'images/apple-icon.png',
// ...
}
```
Note: If you choose to specify custom source images for each platform, you will need to specify every platform individually for it to work - there's nothing to default to.
### Callback
Favicons follows the typical error-first callback syntax. The callback accepts two parameters:
```js
function (error, metadata) {
if (error) {
throw error;
}
console.log(metadata, 'Metadata produced during the build process');
}
},
callback = function (error, response) {
console.log(error.status); // HTTP error code (e.g. `200`) or `null`
console.log(error.name); // Error name e.g. "API Error"
console.log(error.message); // Error description e.g. "An unknown error has occurred"
console.log(response.images); // Array of { name: string, contents: <buffer> }
console.log(response.files); // Array of { name: string, contents: <buffer> }
console.log(response.html); // Array of strings (html elements)
};
favicons(source, configuration, callback);
```
### Command Line
You can use favicons from the terminal accessing the nested config options via this dot syntax.
You can also configure and use Favicons from the terminal with dot syntax:
```sh
favicons --files.src='images/image.png' --files.dest='favicons/' --settings.logging
Coming soon: https://github.com/haydenbleasel/favicons/issues/54
```
## Output
......
test.js
+ 47
- 51
View file @ 4d2ed2e9
/*jslint node:true*/
var fs = require('fs'),
fav = require('./index.js'),
through = require('through2'),
File = require('vinyl'),
config = {
files: {
//src: 'test/logo.png',
src: {
"android": 'test/logo.png',
"appleIcon": 'test/logo.png',
"appleStartup": 'test/logo.png',
"coast": 'test/logo.png',
"favicons": 'test/logo.png',
"firefox": 'test/logo.png',
"opengraph": 'test/logo.png',
"windows": 'test/logo.png',
"yandex": 'test/logo.png'
},
dest: 'test/favicons',
html: 'test/test.html',
iconsPath: 'favicons'
},
settings: {
appName: 'Favicons',
appDescription: 'Favicon generator for Node.js',
developer: 'Hayden Bleasel',
developerURL: 'http://haydenbleasel.com',
background: '#27353f',
index: 'test/favicons.html',
url: 'http://haydenbleasel.com',
logging: true
}
};
fav(config, function (error, metadata) {
/*jslint node:true, nomen:true, stupid:true*/
(function () {
'use strict';
console.log(error, metadata);
});
fs.readFile('test/logo.png', function (err, data) {
config = fav.getConfig(config);
config.data.favicon_generation.master_picture = { type: 'inline', content: data.toString('base64') };
fav.generateFaviconStream(config, function(error, result) {
console.log('stream callback: ', result.favicon_generation_result.result);
}).on('entry', function(entry) {
passThrough.write(new File({path: entry.path, contents: entry}));
var favicons = require('./index'),
fs = require('fs'),
mkdirp = require('mkdirp');
favicons('./test/logo.png', {
appName: "Favicons 4.0",
appDescription: "Testing suite for Favicons",
developerName: "Hayden Bleasel",
developerURL: "http://haydenbleasel.com/",
background: "#26353F",
path: "test/images/",
version: "1.0",
logging: true,
online: true
}, function (error, response) {
// error: any error that occurred in the process (string)
if (error) {
throw error;
}
console.log('Images: ' + response.images);
console.log('Files: ' + response.files);
console.log('HTML: ' + response.html);
if (response.images) {
mkdirp.sync('./test/images/');
response.images.forEach(function (image) {
fs.writeFileSync('./test/images/' + image.name, image.contents);
});
}
if (response.files) {
mkdirp.sync('./test/files/');
response.files.forEach(function (file) {
fs.writeFileSync('./test/files/' + file.name, file.contents);
});
}
if (response.html) {
fs.writeFileSync('./test/test.html', response.html.join('\n'));
}
});
});
var passThrough = through.obj({ highWaterMark: 50 }, function(obj, enc, cb) {
console.log(obj);
cb(null, obj);
});
}());
test/test.html deleted 100644 → 0
+ 0
- 9
View file @ 80459d6a
<!doctype html>
<html>
<head>
<title>Testing Document</title>
<meta name="description" content="Testing doc for Favicons" />
</head>
<body>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment