favicons
favicons copied to clipboard
itgalaxy
No files being created?
So I'm running this:
var gulp = require('gulp'),
favicons = require('gulp-favicons'),
gutil = require('gulp-util');
gulp.task('default', function () {
return gulp
.src('./src/assets/img/logo-400x400.png')
.pipe(favicons({
appName: null,
appDescription: null,
developerName: null,
developerURL: null,
background: '#fff',
path: 'favicons/',
url: null,
display: 'standalone',
orientation: 'portrait',
start_url: '/?homescreen=1',
version: 1.0,
logging: false,
online: false,
html: 'index.html',
pipeHTML: true,
replace: true
}))
.on('error', gutil.log)
.pipe(gulp.dest('./'));
});
It runs with no errors, output, etc.
find . -name *.png
No results, where are the files?
@websanova Need more information. Node version, gulp-favicons version, etc.
Hello, I ran into a similar problem today. My gulp task, just stopped. I DID get an error, though:
[TypeError: Buffer.alloc is not a function]
gulp-favicons worked fine for other projects, with the exact same task and using the same versions:
node 5.6.0
gulp 3.9.1
gulp-favicons 2.2.7
gulp-util 3.0.7
I'm not sure if this has something to do with gulp-favicons, though.
I fixed it by updating to node v6.9.1.
Thought I would come back to this after a few months to see if there are any updates. Now I'm on node v6.9.4. Still nodda. No errors, no files, no nothing.
find / -name android-chrome-192x192.png
Is there anyway to debug this?
I had the same problem when calling the default gulp task, which in turn called my generate-favicon task. Like this:
gulp.task('default', ['cleanup', 'fonts', 'css', 'js', 'img', 'generate-favicon']);
Running it like this throws no errors and generates no files. The task is also done in something like 90ms so I think the task isn't actually doing anything.
But when I call my generate-favicon directly from the command line it works without any problems:
gulp generate-favicon
It runs with no errors, output, etc.
I encountered exactly the same behaviour today. Then I realized that the path specified as argument for .src() was wrong. Once I fixed it, the task ran successfully, with rich output (as requested in the options), and produced the expected files. Looks like it fails silently on invalid input.
Is code of the gulp wrapper available somewhere? I thought I would try to dig into this issue, but I can't find it.
@igneus the stream API is implemented here https://github.com/evilebottnawi/favicons/blob/master/src/index.js#L134
I have the exact same problem. I just npm install --save-dev favicons, then wrote this script:
var favicons = require('favicons'),
source = './app/assets/img/logo.svg', // Source image(s). `string`, `buffer` or array of `string`
configuration = {
path: "/", // Path for overriding default icons path. `string`
appName: null, // Your application's name. `string`
appShortName: null, // Your application's short_name. `string`. Optional. If not set, appName will be used
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`
dir: "auto", // Primary text direction for name, short_name, and description
lang: "en-US", // Primary language for name and short_name
background: "#fff", // Background colour for flattened icons. `string`
theme_color: "#fff", // Theme color user for example in Android's task switcher. `string`
appleStatusBarStyle: "black-translucent", // Style for Apple status bar: "black-translucent", "default", "black". `string`
display: "standalone", // Preferred display mode: "fullscreen", "standalone", "minimal-ui" or "browser". `string`
orientation: "any", // Default orientation: "any", "natural", "portrait" or "landscape". `string`
scope: "/", // set of URLs that the browser considers within your app
start_url: "/?homescreen=1", // Start URL when launching the application from a device. `string`
version: "1.0", // Your application's version string. `string`
logging: false, // Print logs to console? `boolean`
pixel_art: false, // Keeps pixels "sharp" when scaling up, for pixel art. Only supported in offline mode.
loadManifestWithCredentials: false, // Browsers don't send cookies when fetching a manifest, enable this to fix that. `boolean`
icons: {
android: true, // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleIcon: false, // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleStartup: false, // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
coast: false, // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
favicons: true, // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
firefox: true, // Create Firefox OS icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
windows: true, // Create Windows 8 tile icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
yandex: false
}
},
callback = function (error, response) {
if (error) {
console.log(error.message); // Error description e.g. "An unknown error has occurred"
return;
}
console.log(response.images); // Array of { name: string, contents: <buffer> }
console.log(response.files); // Array of { name: string, contents: <string> }
console.log(response.html); // Array of strings (html elements)
};
favicons(source, configuration, callback);
I then tried it with:
$ node test.js
[ { name: 'favicon-16x16.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 10 00 00 00 10 08 06 00 00 00 1f f3 ff 61 00 00 02 e9 49 44 41 54 78 01 75 c1 4b 4c 1c 65 00 ... > },
{ name: 'favicon-32x32.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 20 00 00 00 20 08 06 00 00 00 73 7a 7a f4 00 00 08 26 49 44 41 54 78 01 9d c1 0b 6c dc 75 01 ... > },
{ name: 'favicon.ico',
contents:
<Buffer 00 00 01 00 05 00 10 10 00 00 01 00 20 00 28 04 00 00 56 00 00 00 18 18 00 00 01 00 20 00 28 09 00 00 7e 04 00 00 20 20 00 00 01 00 20 00 28 10 00 00 ... > },
{ name: 'android-chrome-36x36.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 24 00 00 00 24 08 06 00 00 00 e1 00 98 98 00 00 09 e9 49 44 41 54 78 01 a5 c1 79 6c 5c f5 81 ... > },
{ name: 'android-chrome-48x48.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 30 00 00 00 30 08 06 00 00 00 57 02 f9 87 00 00 0f 3d 49 44 41 54 78 01 b5 c1 09 74 94 85 81 ... > },
{ name: 'android-chrome-72x72.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 48 00 00 00 48 08 06 00 00 00 55 ed b3 47 00 00 1c 34 49 44 41 54 78 01 cd c1 09 78 94 85 c1 ... > },
{ name: 'android-chrome-96x96.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 60 00 00 00 60 08 06 00 00 00 e2 98 77 38 00 00 2b 1d 49 44 41 54 78 01 d5 c1 07 7c 55 f5 e1 ... > },
{ name: 'android-chrome-144x144.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 90 00 00 00 90 08 06 00 00 00 e7 46 e2 b8 00 00 4a 94 49 44 41 54 78 01 ec c1 07 60 55 f5 c1 ... > },
{ name: 'android-chrome-192x192.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 c0 00 00 00 c0 08 06 00 00 00 52 dc 6c 07 00 00 6a 8c 49 44 41 54 78 01 ec c1 07 60 55 f5 c1 ... > },
{ name: 'android-chrome-256x256.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 01 00 00 00 01 00 08 06 00 00 00 5c 72 a8 66 00 00 95 81 49 44 41 54 78 01 ec c1 07 60 95 f5 a1 ... > },
{ name: 'android-chrome-384x384.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 01 80 00 00 01 80 08 06 00 00 00 a4 c7 b5 bf 00 00 ea 3b 49 44 41 54 78 01 ec c1 09 60 54 e5 a1 ... > },
{ name: 'android-chrome-512x512.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 00 00 00 02 00 08 06 00 00 00 f4 78 d4 fa 00 01 3f df 49 44 41 54 78 01 ec c1 07 60 95 e5 a1 ... > },
{ name: 'firefox_app_60x60.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 3c 00 00 00 3c 08 06 00 00 00 3a fc d9 72 00 00 18 1c 49 44 41 54 78 01 bd c1 09 60 96 f5 9d ... > },
{ name: 'firefox_app_128x128.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 80 00 00 00 80 08 06 00 00 00 c3 3e 61 cb 00 00 49 6f 49 44 41 54 78 01 e4 c1 07 60 55 f5 dd ... > },
{ name: 'firefox_app_512x512.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 00 00 00 02 00 08 06 00 00 00 f4 78 d4 fa 00 01 83 5a 49 44 41 54 78 01 ec c1 07 60 95 f5 d9 ... > },
{ name: 'mstile-70x70.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 80 00 00 00 80 08 06 00 00 00 c3 3e 61 cb 00 00 40 7d 49 44 41 54 78 01 e4 c1 07 60 54 65 a2 ... > },
{ name: 'mstile-144x144.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 00 90 00 00 00 90 08 06 00 00 00 e7 46 e2 b8 00 00 4a 94 49 44 41 54 78 01 ec c1 07 60 55 f5 c1 ... > },
{ name: 'mstile-150x150.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 01 0e 00 00 01 0e 08 06 00 00 00 78 b1 f9 a5 00 00 9e dc 49 44 41 54 78 01 ec c1 07 60 94 f5 c1 ... > },
{ name: 'mstile-310x150.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 2e 00 00 01 0e 08 06 00 00 00 ae 0e 9c 74 00 00 a2 ed 49 44 41 54 78 01 ec c1 09 60 94 e5 81 ... > },
{ name: 'mstile-310x310.png',
contents:
<Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 2e 00 00 02 2e 08 06 00 00 00 98 4a 83 df 00 01 5e 8e 49 44 41 54 78 01 ec c1 09 60 54 e5 bd ... > } ]
[ { name: 'manifest.json',
contents:
'{\n "name": null,\n "short_name": null,\n "description": null,\n "dir": "auto",\n "lang": "en-US",\n "display": "standalone",\n "orientation": "any",\n "scope": "/",\n "start_url": "/?homescreen=1",\n "background_color": "#fff",\n "theme_color": "#fff",\n "icons": [\n {\n "src": "/android-chrome-36x36.png",\n "sizes": "36x36",\n "type": "image/png"\n },\n {\n "src": "/android-chrome-48x48.png",\n "sizes": "48x48",\n "type": "image/png"\n },\n {\n "src": "/android-chrome-72x72.png",\n "sizes": "72x72",\n "type": "image/png"\n },\n {\n "src": "/android-chrome-96x96.png",\n "sizes": "96x96",\n
"type": "image/png"\n },\n {\n "src": "/android-chrome-144x144.png",\n "sizes": "144x144",\n "type": "image/png"\n },\n {\n "src": "/android-chrome-192x192.png",\n "sizes": "192x192",\n "type": "image/png"\n },\n {\n "src": "/android-chrome-256x256.png",\n "sizes": "256x256",\n "type": "image/png"\n },\n {\n "src": "/android-chrome-384x384.png",\n "sizes": "384x384",\n "type": "image/png"\n },\n {\n "src": "/android-chrome-512x512.png",\n "sizes": "512x512",\n "type": "image/png"\n }\n ]\n}' },
{ name: 'manifest.webapp',
contents:
'{\n "version": "1.0",\n "name": null,\n "description": null,\n "icons": {\n "60": "/firefox_app_60x60.png",\n "128": "/firefox_app_128x128.png",\n "512": "/firefox_app_512x512.png"\n },\n "developer": {\n "name": null,\n "url": null\n }\n}' },
{ name: 'browserconfig.xml',
contents:
'<?xml version="1.0" encoding="utf-8"?>\n<browserconfig>\n <msapplication>\n <tile>\n <square70x70logo src="/mstile-70x70.png"/>\n <square150x150logo src="/mstile-150x150.png"/>\n <wide310x150logo src="/mstile-310x150.png"/>\n <square310x310logo src="/mstile-310x310.png"/>\n <TileColor>#fff</TileColor>\n\n </tile>\n\n </msapplication>\n\n</browserconfig>\n' } ]
[ '<link rel="shortcut icon" href="/favicon.ico">',
'<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">',
'<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">',
'<link rel="manifest" href="/manifest.json">',
'<meta name="mobile-web-app-capable" content="yes">',
'<meta name="theme-color" content="#fff">',
'<meta name="application-name">',
'<meta name="msapplication-TileColor" content="#fff">',
'<meta name="msapplication-TileImage" content="/mstile-144x144.png">',
'<meta name="msapplication-config" content="/browserconfig.xml">' ]
But no files are generated.
$ node --version
v10.13.0
$ npm --version
6.4.1
$ uname -a
Linux ... 4.4.0-17134-Microsoft #345-Microsoft Wed Sep 19 17:47:00 PST 2018 x86_64 x86_64 x86_64 GNU/Linux
$ grep favicon package.json
"favicons": "^5.3.0",
Actually response.images and response.files are the files you're looking for, if you need to save them to disk, you may use node fs for example.
Since IMHO actually generating files out of the input image is something that 90% of this package's users are trying to do, it would be handy to have a hint about this in the README :)
So here's how I managed to save the files using fs:
var fs = require ("fs");
// stuff from README, but add this in the callback function:
const callback = (error, response) => {
// ...
response.images.map (image => {
fs.writeFileSync (`./favicons/${image.name}`, image.contents)
})
// ...
};
Cheers
Since IMHO actually generating files out of the input image is something that 90% of this package's users are trying to do, it would be handy to have a hint about this in the README :)
So here's how I managed to save the files using
fs:var fs = require ("fs"); // stuff from README, but add this in the callback function: const callback = (error, response) => { // ... response.images.map (image => { fs.writeFileSync (`./favicons/${image.name}`, image.contents) }) // ... };Cheers
It's still not working for me.
