How can I make my icons keep their transparent background? There doesn't seem to be a way.

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:

• Move the Icon types section into a sub-object named iconTypes.
• Rename 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.
• The first argument of the callback should be an error object. As per node convention.

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 port / rewrite of grunt-favicons left a lot of synchronous functionality. This will need to be rewritten.

When I run this source png

I get this .ico file which has a white pixel in the top left corner of the 16x16 version. None of the other icons have it, just the ico

Git hub doesn't let me attach .ico files unfortunately. I can provide a zip file of the files if needed.

Duplicate issue :S

What the title says... ;)

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)

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.

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.

Callback: function to execute upon completion function (params include 'response' and 'html')

Is not good enough. What is respone and html?

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? :)

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.

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.

• Any ideas of how to debug this easier?
• Any obvious issues where I'm going wrong?
• Is it possible to give this more than one html file?

Thanks,
Matt

node-imagemagick provides a nice wrapper but it's deprecated. Using gm instead.

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.

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.

Is it possible to change where the html gets injected?

They settled on using only one apple-touch-image because the majority of iOS devices are on 7+

Might be good to follow them

See h5bp/html5-boilerplate@345925f

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.

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

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?

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

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.

Like #58, 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.

<link rel="mask-icon" href="website_icon.svg" color="red">

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 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:

• Generate favicons locally (#48, #44)
• Generate files locally
• Make online (RFG) generation optional, sort out RFG API integration issues (zlib error #45, unzip issue #47, custom overwrites #49, 400 errors #36, better API object #37. See rfg-api for code)
• Select image processor: ImageMagick, GM, Sharp, JIMP, Pica
• Simplify the configuration
• Stop writing files, just return HTML and Images into a buffer and let users sort it out (see: #46)
• Consistent (object) error handling
• Create website (http://favicons.io/)
• Solve WSK issues (google/web-starter-kit#470, google/web-starter-kit#599):
  • At the moment, Chrome Stable, iOS and Windows Phone have issues.
  • We can only use it with one html file at a time (gulp-favicons)
  • Supporting serve and serve:dist requires the use of .tmp for html files.
  • Requires imagemagik and graphicsmagik from brew
• Solve openjck's issue (openjck/openjck.com#1)
• Collaborate with dependents (svg2favicons, enb-favicons, broccoli-favicon, favidenticon)
• Add SVG support i.e. adaptdk/svg2favicons#1 (no pure-js svg-to-png Node.js module available, also applies to that new El Capitan SVG thing...)
• Better logging feature
• Create a Grunt version (naming conflict: https://github.com/gleero/grunt-favicons) (Gleero won't respond)
• Consistent Readme / Website documentation

If you'd like to collaborate physically, check out the favicons-4 branch.

Merge metaimage-generator into this module and specify an option e.g.

favicons({
  favicons: true,
  metaimages: true
});

Originally opened by @vn38minhtran

• Missing apple-touch-startup-image-1024x748.png
• Missing apple-touch-startup-image-2048x1496.png

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.

RFG suggests a circular background with a gloss effect for Firefox OS. There should be a way to do this with JIMP.

Basically if the source image is smaller than one of the specified sizes then skip that resize.

• meta(name='apple-mobile-web-app-capable', content='yes')
• meta(name='apple-mobile-web-app-status-bar-style', content='black-translucent')
• meta(name='format-detection', content='telephone=yes')
• meta(name='mobile-web-app-capable', content='yes')
• meta(property='twitter:image', content='')

A callback option should be accepted to allow gulp integration

gulp.task('favicon', function(callback) {
    favicon({
      ...
      callback: callback
    });
});

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?

Unit testing is being devised at the moment by @phbernard.

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....

@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)).

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?

My single quotes are being replaced by ' :(

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:

• On Chrome stable, because there is no there is no icon supplied. The manifest is only picked up in Chrome Beta.
• Also had some issues with iOS 8 (the app icon and start up screen weren't getting used)

(Not sure if these still apply).

CLI access was merged in #39 by @willhoag but we've totally rewritten the configuration since then so it needs to be re-implemented.

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.

This needs to be integrated locally and into RFG API.

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.