itgalaxy / favicons Goto Github PK
View Code? Open in Web Editor NEWFavicons generator for Node.js
License: MIT License
Favicons generator for Node.js
License: MIT License
According to their docs we need an api_key, but I don't see an api_key config option. I'm not sure if this is the issue here exactly, but the error above is what's being returned.
To reflect functionality provided by the RFG API, we'd need #53 or a library like potrace that traces rasterised image types to vectors. Pure-JS only, as usual.
The option object is not very readable:
favicons({
// I/O
source: 'logo.png',
dest: 'images',
// Icon Types
android: true,
apple: true,
coast: true,
favicons: true,
firefox: true,
opengraph: true,
windows: true,
// Miscellaneous
html: null,
background: '#1d1d1d',
tileBlackWhite: false,
manifest: null,
trueColor: false,
url: null,
logging: false,
callback: null
});
I suggest you do the following changes:
Icon types
section into a sub-object named iconTypes
.source
to src
as dest
is already abbreviated and src
is more common.callback
should just be the last argument in the function call and not in the options object.You will then end up with the following:
favicons({
src: 'logo.png',
dest: 'images',
iconTypes: {
android: true,
apple: true,
coast: true,
favicons: true,
firefox: true,
opengraph: true,
windows: true
},
html: null,
background: '#1d1d1d',
tileBlackWhite: false,
manifest: null,
trueColor: false,
url: null,
logging: false
}, function (err, response, html) {});
@jessaustin Sorry to be a pain, but we were in the middle of phasing out rfg-api
and real-favicon
repositories to keep things simple. This means your PR is gone, but it can quickly be rewritten for this repo - same code more or less. Sorry about that!
https://github.com/RealFaviconGenerator/real-favicon has been deleted, which preventing 2.x from being installed. See:
❯ npm i favicons@2
npm ERR! git clone --template=/Users/tom/.npm/_git-remotes/_templates --mirror git://github.com/RealFaviconGenerator/real-favicon.git /Users/tom/.npm/_git-remotes/git-github-com-RealFaviconGenerator-real-favicon-git-94309738: Cloning into bare repository '/Users/tom/.npm/_git-remotes/git-github-com-RealFaviconGenerator-real-favicon-git-94309738'...
npm ERR! git clone --template=/Users/tom/.npm/_git-remotes/_templates --mirror git://github.com/RealFaviconGenerator/real-favicon.git /Users/tom/.npm/_git-remotes/git-github-com-RealFaviconGenerator-real-favicon-git-94309738: fatal: remote error:
npm ERR! git clone --template=/Users/tom/.npm/_git-remotes/_templates --mirror git://github.com/RealFaviconGenerator/real-favicon.git /Users/tom/.npm/_git-remotes/git-github-com-RealFaviconGenerator-real-favicon-git-94309738: Repository not found.
npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i" "favicons@2"
npm ERR! node v0.12.7
npm ERR! npm v2.11.3
npm ERR! code 128
npm ERR! Command failed: git clone --template=/Users/tom/.npm/_git-remotes/_templates --mirror git://github.com/RealFaviconGenerator/real-favicon.git /Users/tom/.npm/_git-remotes/git-github-com-RealFaviconGenerator-real-favicon-git-94309738
npm ERR! Cloning into bare repository '/Users/tom/.npm/_git-remotes/git-github-com-RealFaviconGenerator-real-favicon-git-94309738'...
npm ERR! fatal: remote error:
npm ERR! Repository not found.
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! <https://github.com/npm/npm/issues>
(I'd like to try v2.x as we cannot rely on a web service (#44)).
They settled on using only one apple-touch-image because the majority of iOS devices are on 7+
Might be good to follow them
Hello,
you are generating the file manifest.json
but in the generated HTML you reference android-chrome-manifest.json
guess one of this two names is wrong? :)
Basically if the source image is smaller than one of the specified sizes then skip that resize.
What the title says... ;)
Hi Hayden!
I've got an error in my configuration an I'd like to share it with you. Maybe you have a solution?
The generator works but I keep getting the following error message:
/Users/user/Projects/project/node_modules/favicons/index.js:152
return callback(metadata);
^
TypeError: undefined is not a function
at Object.rfg.callback (/Users/user/Projects/project/node_modules/favicons/index.js:152:24)
at /Users/user/Projects/project/node_modules/favicons/node_modules/real-favicon/index.js:121:57
at /Users/user/Projects/project/node_modules/favicons/node_modules/real-favicon/index.js:116:28
at done (/Users/user/Projects/project/node_modules/favicons/node_modules/real-favicon/node_modules/async/lib/async.js:135:19)
at /Users/user/Projects/project/node_modules/favicons/node_modules/real-favicon/node_modules/async/lib/async.js:32:16
at /Users/user/Projects/project/node_modules/favicons/node_modules/real-favicon/index.js:113:25
at /Users/user/Projects/project/node_modules/favicons/node_modules/real-favicon/index.js:32:25
at /Users/user/Projects/project/node_modules/gulp-replace/node_modules/istextorbinary/node_modules/safefs/node_modules/graceful-fs/graceful-fs.js:104:5
at Object.oncomplete (fs.js:107:15)
That's my configuration:
gulp.task('favicons', function () {
favicons({
files: {
src: 'src/assets/images/favicon-src.png',
dest: 'dist/assets/images/favicons',
html: 'dist/favicons.html'
},
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: true,
favicons: true,
firefox: true,
opengraph: true,
windows: true,
yandex: true
},
settings: {
appName: 'test.com',
appDescription: 'Personal Website of Name',
developer: 'Name',
developerURL: 'http://test.com/',
version: 0.1,
background: '#ffffff',
index: 'dist/index.html',
url: 'http://test.com/',
silhouette: true,
logging: false
}
});
});
What am I doing wrong? What can I do?
This needs to be integrated locally and into RFG API.
You thank some people in the readme for their input on multiple sizes. Has this actually made it into the production system? If so, could you document support for it?
I'm just trying to add in the new version of this task into WSK and I'm having a few issues:
At the moment the task is:
gulp.task('favicon', function () {
favicons({
files: {
src: 'app/images/favicons/favicon-1024x1024.png', // Path for file to produce the favicons. `string` or `object`
dest: 'dist/', // Path for writing the favicons to. `string`
html: 'dist/index.html', // Path for HTML file to write metadata. `string`
iconsPath: null, // Path for overriding default icons path. `string`
androidManifest: 'dist/manifest.json', // Path for an existing android_chrome_manifest.json. `string`
browserConfig: null, // Path for an existing browserconfig.xml. `string`
firefoxManifest: 'dist/manifest.webapp', // 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: 'Web Starter Kit', // Your application's name. `string`
appDescription: 'Web Starter Kit', // Your application's description. `string`
developer: null, // Your (or your developer's) name. `string`
developerURL: null, // Your (or your developer's) URL. `string`
background: '#3372DF', // Background colour for flattened icons. `string`
index: null, // Path for the initial page on the site. `string`
url: null, // URL for your website. `string`
logging: true // Print logs to console?
}
});
});
The log for this is minimal:
$ gulp favicon
[14:33:39] Using gulpfile ~/Programming/Code/web-starter-kit/gulpfile.js
[14:33:39] Starting 'favicon'...
[14:33:39] Finished 'favicon' after 538 μs
Created apple-touch-startup-image-320x460.png
Created apple-touch-startup-image-640x920.png
Created apple-touch-startup-image-640x1096.png
Created apple-touch-startup-image-748x1024.png
Created apple-touch-startup-image-768x1004.png
Created apple-touch-startup-image-1496x2048.png
Created apple-touch-startup-image-1536x2008.png
No images seem to get created anywhere (assuming /dist/app-touch-startup-image-*.png would be the location it would be created.
Thanks,
Matt
A callback option should be accepted to allow gulp integration
gulp.task('favicon', function(callback) {
favicon({
...
callback: callback
});
});
Callback: function to execute upon completion function (params include 'response' and 'html')
Is not good enough. What is respone
and html
?
path.js:360
throw new TypeError('Arguments to path.join must be strings');
^
TypeError: Arguments to path.join must be strings
at path.js:360:15
at Array.filter (native)
at Object.exports.join (path.js:358:36)
at /Users/tom/Projects/src/chrome/ehealth/direct-delivery/node_modules/favicons/index.js:321:76
at /Users/tom/Projects/src/chrome/ehealth/direct-delivery/node_modules/favicons/index.js:88:24
at /Users/tom/Projects/src/chrome/ehealth/direct-delivery/node_modules/favicons/index.js:79:24
at ChildProcess.exithandler (child_process.js:646:7)
at ChildProcess.emit (events.js:98:17)
at maybeClose (child_process.js:756:16)
at Socket.<anonymous> (child_process.js:969:11)
RFG suggests a circular background with a gloss effect for Firefox OS. There should be a way to do this with JIMP.
It appears that the unzip
module is abandoned. When using this module, I periodically get invalid signature
errors, which appear to originate from the unzip
. Looking through the unzip issues shows several other folks with similar issues.
It looks like a fork has fixed at least some of these issues: unzip2
. It might be worth switching over.
It looks like it maintains the same API. I would submit a PR with the change, but it looks like you are monkey-patching the unzip
stream's .emit()
function, so I wanted to check with you first.
SVG support can be easily implemented if we find a pure-JS Node library that handles SVG to PNG conversion with no external dependencies.
Merge metaimage-generator into this module and specify an option e.g.
favicons({
favicons: true,
metaimages: true
});
It would be helpful if, when a new version is released, a git tag is created for that version and published to Github as well. It's helpful if you want to go back through old versions of the code based on what older version your own app/consuming library might be on.
This is a complete rewrite of Favicons to suit the pressing needs of users and fix a lot of bugs. I think I've lost track of the original use case for Favicons over time: "I want to generate a complete suite of favicons and valid HTML with the smallest amount of work possible". Let's create a discussion of what should be in the new version:
If you'd like to collaborate physically, check out the favicons-4
branch.
node-imagemagick provides a nice wrapper but it's deprecated. Using gm instead.
Duplicate issue :S
Running favicons in my images
gulp task outputs the following:
[18:01:04] 'images' errored after 577 ms
[18:01:04] Error: spawn ENOENT
at errnoException (child_process.js:1011:11)
at Process.ChildProcess._handle.onexit (child_process.js:802:34)
Any idea why that's happening?
This module is written in ES6 (yay!), but is released as ES6 as well, rather than compiling to ES5 first. This is problematic for compat purposes: node 0.12.x, widely used in the wild, doesn't support most of the ES6 syntax used by this module. That means that consuming code must include it's own transpilation step.
A better approach would be to compile this ES6 to ES5 during pre-publish, and use a combination of .gitignore
and .npmignore
to ensure that the compiled ES5 files aren't committed to the repo, and the source ES6 files aren't shipped with the npm release.
Regarding the real needing of favicon side of a website, a lot of other files have to be generated.
Reference: http://realfavicongenerator.net/faq
Hi!
I've run into an issue with generating a full path to the icons that contains a string like <?php echo ... ?>
. Those <>
should come across unescaped, but the path written to favicons.php
is coming out as <?php echo ... ?</
.
Just to be clear, I'm not expecting it to run the PHP script. It should simply write it exactly as entered into the iconsPath
option.
Thanks!
Jen
@germanny
In the Node ecosystem, the majority of build system plugins are hosted in their own separate repositories. This makes it easier to discover them (We've had some trouble going back and forth between the module and Gulp file given branching strategies).
Would you consider pushing the Gulp plugin to a gulp-favicons repo?
Note: If you're going to write the HTML metadata to a file, make sure the tags aren't already there or there will be duplicates.
No point in documenting this when you can easily handle it in code. You can detect if the tag already exists and don't insert it.
On windows, default convert is a tool in the system path C:\Windows\system32\convert.EXE
It is needed to be able to specify the path.
Can you also support graphics magick, this seems not to interfere with any windows default tools.
My single quotes are being replaced by '
:(
Just browsing thru the issues and there's mentions of ImageMagick, gm but I don't see anywhere in the source where it supports generating images locally? Is this purely reliant on generating thru RealFaviconGenerator service? Would be nice to support generating the different sizes locally....
from google/web-starter-kit#442 (comment) ...
I've been talking with the creator of the aforementioned realfavicongenerator.net and we might be doing some work together that will make Favicons and RFG more awesome (using his comprehensive API).
What's the status on that? I think it'd be great to combine efforts here.
cc @phbernard
How can I make my icons keep their transparent background? There doesn't seem to be a way.
Mentioned on http://taylor.fausak.me/2012/03/27/ios-web-app-icons-and-startup-images/
Note that landscape images are not actually defined as such — they’re taller than they are wide. When you’re creating your assets, make them as landscape images. Then, when you’re ready to publish, rotate them 90° clockwise.
This rotation is missing in this script. Now the landscape startup images are not recognized as such and not shown.
Nevermind, I see this should be fixed by RealFaviconGenerator.net
Getting the following error when I set a path to generate the Firefox manifest... there are no documentation for this part, so I have no clue to work with it...
/Users/xxxxx/Project/node_modules/favicons/index.js:228
contentFirefox.icons[size] = name;
^
TypeError: Cannot read property 'icons' of undefined
at /Users/xxxxx/Project/node_modules/favicons/index.js:228:39
at /Users/xxxxx/Project/node_modules/favicons/index.js:71:24
at /Users/xxxxx/Project/node_modules/favicons/index.js:62:33
at ChildProcess.exithandler (child_process.js:646:7)
at ChildProcess.emit (events.js:98:17)
at maybeClose (child_process.js:756:16)
at Socket.<anonymous> (child_process.js:969:11)
at Socket.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
Originally opened by @vn38minhtran
The html:
<link rel="icon" type="image/png" sizes="228x228" href="/favicon-228x228.png">
is generated. However there is no file with that name/dimension.
The port / rewrite of grunt-favicons left a lot of synchronous functionality. This will need to be rewritten.
Originally opened by @gauntface:
(Not sure if these still apply).
Hi,
I've a strange issue while running gulp tasks on the CI(Linux machine). It continues to break up in the middle exactly at the favicon generation task. Follows, the error message,
events.js:85
throw er; // Unhandled 'error' event
Error: invalid distance too far back
at Zlib._handle.onerror (zlib.js:366:17)
Seems some problem with Zlib module(http://stackoverflow.com/questions/27039415/error-when-using-zlibinflate-invalid-distance-too-far-back).
Though, I never get such error at my dev(windows machine) environment. Any ideas?
By the way, thanks for the excellent favicon npm module. Its very helpful.
Is it possible to change where the html gets injected?
It would be nice to have the possibility to write metadata links in a file even if there is no 'head' tag.
In this way, the generated file could be directly included as a partial.
Another solution would be to use glob pattern for the html
option to write these metadata links in several files.
The "Custom Overwrites" example from the readme isn't working. In getConfig, params/options are being merged into config selectively, allowing not all, but only a handful of favicon_generation settings to be overwritten.
Unit testing is being devised at the moment by @phbernard.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.