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
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)
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
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?
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.
Basically if the source image is smaller than one of the specified sizes then skip that resize.
The port / rewrite of grunt-favicons left a lot of synchronous functionality. This will need to be rewritten.
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.
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
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
What the title says... ;)
RFG suggests a circular background with a gloss effect for Firefox OS. There should be a way to do this with JIMP.
Callback: function to execute upon completion function (params include 'response' and 'html')
Is not good enough. What is respone
and html
?
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
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.
How can I make my icons keep their transparent background? There doesn't seem to be a way.
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?
@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!
My single quotes are being replaced by '
:(
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)
A callback option should be accepted to allow gulp integration
gulp.task('favicon', function(callback) {
favicon({
...
callback: callback
});
});
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.
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.
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.
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?
Originally opened by @vn38minhtran
They settled on using only one apple-touch-image because the majority of iOS devices are on 7+
Might be good to follow them
Is it possible to change where the html gets injected?
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....
Merge metaimage-generator into this module and specify an option e.g.
favicons({
favicons: true,
metaimages: true
});
Regarding the real needing of favicon side of a website, a lot of other files have to be generated.
Reference: http://realfavicongenerator.net/faq
Originally opened by @gauntface:
(Not sure if these still apply).
This needs to be integrated locally and into RFG API.
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)).
node-imagemagick provides a nice wrapper but it's deprecated. Using gm instead.
Unit testing is being devised at the moment by @phbernard.
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.
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? :)
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.
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.
SVG support can be easily implemented if we find a pure-JS Node library that handles SVG to PNG conversion with no external dependencies.
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?
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) {});
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.
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.
Duplicate issue :S
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.
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.