Automatically generate favicons #470

addyosmani · 2014-10-15T16:45:16Z

Let's add the automated favicon generation support discussed in #442 🍨. We'll be using https://github.com/haydenbleasel/favicons to do the trick.

By default, let's use a single image, but also recommend providing three unique ones instead in comments. We can also describe what each asset is used for and optionally add recommendations around treatment.

gauntface · 2014-10-20T09:04:12Z

Is the ImageMagick requirement going to be a problem?

gauntface · 2014-10-20T09:36:38Z

@haydenbleasel Is there any way to define icons for different platforms? i.e. a different icon for Android vs iOS

haydenbleasel · 2014-10-20T09:55:55Z

@gauntface Unfortunately not, but for good reason. From #442:

I've taken the route of multiple source image sizes suggested by @mathiasbynens and @paulirish rather than the per-platform route proposed by @gauntface as each platform has sizes that can range from around 16px to 310px. Therefore I've had each platform select a source image depending on the size I'm about to convert them to.

gauntface · 2014-10-20T10:17:54Z

@haydenbleasel Ah ok. Didn't see that was the trend people wanted - single icon by default - with multiple icons as an alternative with comments. (Shame that the multiple sources isn't supported as I basically have to opt for suitable for a specific platform).

I'm trying to set up the index.html output but it doesn't seem to be working - any ideas what I might be doing wrong?

gulp.task('favicon', function() {
  favicons({
    // I/O
    source: 'app/images/favicons/favicon-1024x1024.png',
    dest: 'dist',

    // Icon Types
    android: true,
    apple: true,
    coast: true,
    favicons: true,
    firefox: true,
    opengraph: false,
    windows: true,

    // Miscellaneous
    html: 'dist/index.html',
    background: 'transparent',
    tileBlackWhite: false,
    manifest: null,
    trueColor: false,
    logging: true
  });
});

Also something I hadn't considered when we first discussed any of this - I'd love to have favicons in a specific folder, but have a favicon.ico always added to the root as a last resort for browsers. At the moment I can presumably only have favicons either all in root or all in a specific folder.

haydenbleasel · 2014-10-20T10:21:25Z

Might be a callback thing - Favicons is currently just a Node module so we need to handle callbacks with Gulp e.g.

gulp.task('favicons', function (cb) {
    return favicons({
        source: 'app/images/favicons/favicon-1024x1024.png',
        dest: 'dist/',
        callback: function () {
            cb();
        }
    });
});

Note the cb() and task parameter.

gauntface · 2014-10-20T10:29:49Z

@haydenbleasel I've just tried that out and I'm still not getting anything added.

Could it be something around the HTML being minified?

gulp.task('favicon', function(cb) {
  favicons({
    // I/O
    source: 'app/images/favicons/favicon-1024x1024.png',
    dest: 'dist/',
    html: '/dist/index.html',
    opengraph: false,
    callback: function() {
      cb();
    }
  });
});

haydenbleasel · 2014-10-20T10:34:07Z

Add logging: true property and post results. I think I might know what it is :/

gauntface · 2014-10-20T10:50:41Z

Just an FYI: I love the logging flag.

$ gulp favicon
[11:49:50] Warning: gulp version mismatch:
[11:49:50] Global gulp is 3.8.8
[11:49:50] Local gulp is 3.8.7
{ [Error: ENOENT, no such file or directory '/Users/mattgaunt/Programming/Code/web-starter-kit-master/tasks']
  errno: 34,
  code: 'ENOENT',
  path: '/Users/mattgaunt/Programming/Code/web-starter-kit-master/tasks',
  syscall: 'readdir' }
[11:49:50] Using gulpfile ~/Programming/Code/web-starter-kit-master/gulpfile.js
[11:49:50] Starting 'favicon'...
Created 16x16.png
Created favicon-16x16.png
Created favicon-32x32.png
Created 32x32.png
Created 48x48.png
Created favicon-96x96.png
Created favicon-160x160.png
Created favicon.ico
Created apple-touch-icon.png
Created favicon-196x196.png
Created apple-touch-icon-60x60.png
Created apple-touch-icon-72x72.png
Created apple-touch-icon-76x76.png
Created firefox-icon-16x16.png
Created firefox-icon-32x32.png
Created apple-touch-icon-144x144.png
Created firefox-icon-30x30.png
Created firefox-icon-60x60.png
Created firefox-icon-64x64.png
Created windows-tile-144x144.png
Created windows-tile-70x70.png
Created windows-tile-150x150.png
Created firefox-icon-128x128.png
Created apple-touch-icon-152x152.png
Created apple-touch-icon-180x180.png
Created firefox-icon-90x90.png
Created firefox-icon-48x48.png
Created firefox-icon-120x120.png
Created homescreen-192x192.png
Created apple-touch-icon-144x144.png
Created apple-touch-icon-120x120.png
Created coast-icon-228x228.png
Created firefox-icon-256x256.png
Created windows-tile-310x310.png

haydenbleasel · 2014-10-20T11:45:25Z

Yeah so all I can gather from that so far is that you should update the local Gulp (just in case) and this seems to be an issue:

[Error: ENOENT, no such file or directory '/Users/mattgaunt/Programming/Code/web-starter-kit-master/tasks']

I don't actually know what's happening there without context - if you email me your Gulpfile I can check it out thoroughly?

gauntface · 2014-10-20T13:09:47Z

I've googled that issue and it seems to be around Sass. We are in the middle of changing to Libsass so this should get fixed with that change.

I've updated Gulp and still the same issue.

All of this is going on in the favicon-task branch. Gulp File here: https://github.com/google/web-starter-kit/blob/favicon-task/gulpfile.js

At the moment I'm just running the commands 'gulp' and 'gulp favicon' manually to try and get this working.

addyosmani · 2014-10-20T13:12:09Z

@gauntface are you working against latest master (which has libsass landed)? Might be able to help us figure out if this is Sass related or something else.

gauntface · 2014-10-20T13:12:56Z

No I'm working on Material-sprint

addyosmani · 2014-10-20T13:15:03Z

Changes for libsass in case you need them: 5b860b2 (followed by an npm install of course) :)

gauntface · 2014-10-20T13:34:40Z

Now on this branch (https://github.com/google/web-starter-kit/tree/favicon-task-master) same log.

$ gulp favicon
[14:32:09] Using gulpfile ~/Programming/Code/web-starter-kit-master/gulpfile.js
[14:32:09] Starting 'favicon'...
[14:32:09] Finished 'favicon' after 807 μs
Created favicon-16x16.png
Created 16x16.png
Created favicon-160x160.png
Created 32x32.png
Created windows-tile-70x70.png
Created apple-touch-icon-152x152.png
Created apple-touch-icon.png
Created 48x48.png
Created favicon-32x32.png
Created apple-touch-icon-60x60.png
Created apple-touch-icon-144x144.png
Created favicon.ico
Created favicon-196x196.png
Created apple-touch-icon-144x144.png
Created favicon-96x96.png
Created homescreen-192x192.png
Created windows-tile-144x144.png
Created apple-touch-icon-180x180.png
Created apple-touch-icon-72x72.png
Created apple-touch-icon-120x120.png
Created apple-touch-icon-76x76.png
Created windows-tile-150x150.png
Created coast-icon-228x228.png
Created firefox-icon-16x16.png
Created firefox-icon-30x30.png
Created firefox-icon-60x60.png
Created firefox-icon-32x32.png
Created firefox-icon-120x120.png
Created firefox-icon-128x128.png
Created firefox-icon-64x64.png
Created firefox-icon-48x48.png
Created firefox-icon-90x90.png
Created windows-tile-310x310.png
Created firefox-icon-256x256.png

addyosmani · 2014-11-03T11:00:47Z

@gauntface is that log reflected a successful build or are you still running into errors?

gauntface · 2014-11-03T13:36:01Z

@addyosmani Nope still work to be done here.

I'm getting an errorless build, BUT the index.html file isn't getting any of the icons. I'm assuming I'm using the plugin wrong.

@haydenbleasel any ideas?

At the moment I'm just testing by running 'gulp' and then 'gulp favicon', my favicon task is:

gulp.task('favicon', function() {
  favicons({
    // I/O
    source: 'app/images/favicons/favicon-1024x1024.png',
    dest: 'dist',

    // Icon Types
    android: true,
    apple: true,
    coast: true,
    favicons: true,
    firefox: true,
    opengraph: false,
    windows: true,

    // Miscellaneous
    html: 'dist/index.html',
    background: 'transparent',
    tileBlackWhite: false,
    manifest: null,
    trueColor: false,
    logging: true
  });
});

The output from the command line is:

Created favicon-16x16.png
Created favicon-32x32.png
Created windows-tile-144x144.png
Created 32x32.png
Created firefox-icon-128x128.png
Created windows-tile-150x150.png
Created favicon-96x96.png
Created apple-touch-icon-144x144.png
Created firefox-icon-16x16.png
Created firefox-icon-30x30.png
Created favicon-160x160.png
Created apple-touch-icon-76x76.png
Created apple-touch-icon-60x60.png
Created 16x16.png
Created firefox-icon-32x32.png
Created firefox-icon-48x48.png
Created windows-tile-70x70.png
Created apple-touch-icon-72x72.png
Created firefox-icon-60x60.png
Created apple-touch-icon-144x144.png
Created apple-touch-icon-152x152.png
Created homescreen-192x192.png
Created apple-touch-icon-120x120.png
Created 48x48.png
Created apple-touch-icon-180x180.png
Created firefox-icon-120x120.png
Created firefox-icon-90x90.png
Created firefox-icon-64x64.png
Created apple-touch-icon.png
Created favicon-196x196.png
Created coast-icon-228x228.png
Created firefox-icon-256x256.png
Created favicon.ico
Created windows-tile-310x310.png

Is there anything in particular I need to do to get the html output into the index.html file (i.e. any special comments)?

haydenbleasel · 2014-11-03T14:33:37Z

Found the issue. I've stupidly put if statements inside functions and didn't specify an alternative callback. The issue was occurring because you opted out of an OpenGraph image and the code is basically:

if (opengraph) {
  makeIcon(function() {
    return callback;
  }
}
// Alternative callback is meant to be here.

@gauntface Fix is up, grab the latest version and try it out. Sorry about the trouble.

gauntface · 2014-11-03T14:43:51Z

Classic me being the pain in the butt. Thanks for looking into this @haydenbleasel.

haydenbleasel · 2014-11-21T00:41:10Z

Forgot to answer a previous question:

@gauntface: Is the ImageMagick requirement going to be a problem?

With the new Favicons, there's going to be a larger selection of icon types - the majority of which are produced by RFG. Since his server does all the conversions, you won't need ImageMagick. However, I'm adding some new stuff that aren't technically icons e.g. Apple Launch Images that will require ImageMagick as they're done on Favicons. So you can pretty much just AppleLaunch: false and you won't need ImageMagick!

haydenbleasel · 2014-12-11T11:30:13Z

@addyosmani @gauntface It's all done! The new readme is a bit of a mouthful but pretty basic. Philippe ended up going with platform-based icons so everything's coming up Matthew lol.

addyosmani · 2014-12-11T12:46:03Z

Yay! Thanks @haydenbleasel!

haydenbleasel · 2015-12-11T22:37:50Z

@addyosmani Favicons is in a good place now. Has everything you need - better configuration, local generation, pure Javascript, etc.

phbernard · 2016-01-20T22:20:38Z

This is surely a bit out of topic, but I wanted to let you know that I've just added GWSK support to RealFaviconGenerator. To use it you basically:

Go to RFG, upload your picture, craft your icons...
On the result page, click the GWSK tab. Here, you get step-by-step instructions to setup the icons you've just created in your GWSP project.

This first shot patches the existing manifest.json and plays nicely with the HTML pipeline.

It's not really a new development, more a rework of what has been already done for Grunt, RoR...

Right now this solution is 100% RFG, making it an independent initiative. But I would love to make @haydenbleasel's favicons and RFG work together (a long due TODO) so users could switch from local to remove generation with a single switch.

Alright, you can go back to work :)

Puigcerber · 2016-03-13T11:13:07Z

Hi @phbernard! I see WSK has a manifest.webapp and icon-128x128.png for Firefox OS, plus the chrome-touch-icon-192x192.png for Chrome on Android and ms-touch-icon-144x144-precomposed.png for Win8 that are not currently generated by RFG. Are these actual or shouldn't be there? Cheers.

gauntface · 2018-01-09T19:36:46Z

🐛 Bankruptcy: Closing due to inactivity.

addyosmani changed the title ~~Automatically generate favicons as part of build~~ Automatically generate favicons Oct 15, 2014

addyosmani assigned gauntface Oct 15, 2014

addyosmani added the P1 label Oct 15, 2014

addyosmani modified the milestone: 0.6.0 Oct 15, 2014

addyosmani removed this from the 0.6.0 milestone Apr 27, 2015

haydenbleasel mentioned this issue Nov 3, 2015

Favicons 4 itgalaxy/favicons#51

Closed

19 tasks

phbernard mentioned this issue Jan 20, 2016

Auto-Generating Favicons #599

Closed

gauntface closed this as completed Jan 9, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Automatically generate favicons #470

Automatically generate favicons #470

addyosmani commented Oct 15, 2014

gauntface commented Oct 20, 2014

gauntface commented Oct 20, 2014

haydenbleasel commented Oct 20, 2014

gauntface commented Oct 20, 2014

haydenbleasel commented Oct 20, 2014

gauntface commented Oct 20, 2014

haydenbleasel commented Oct 20, 2014

gauntface commented Oct 20, 2014

haydenbleasel commented Oct 20, 2014

gauntface commented Oct 20, 2014

addyosmani commented Oct 20, 2014

gauntface commented Oct 20, 2014

addyosmani commented Oct 20, 2014

gauntface commented Oct 20, 2014

addyosmani commented Nov 3, 2014

gauntface commented Nov 3, 2014

haydenbleasel commented Nov 3, 2014

gauntface commented Nov 3, 2014

haydenbleasel commented Nov 21, 2014

haydenbleasel commented Dec 11, 2014

addyosmani commented Dec 11, 2014

haydenbleasel commented Dec 11, 2015

phbernard commented Jan 20, 2016

Puigcerber commented Mar 13, 2016

gauntface commented Jan 9, 2018

Automatically generate favicons #470

Automatically generate favicons #470

Comments

addyosmani commented Oct 15, 2014

gauntface commented Oct 20, 2014

gauntface commented Oct 20, 2014

haydenbleasel commented Oct 20, 2014

gauntface commented Oct 20, 2014

haydenbleasel commented Oct 20, 2014

gauntface commented Oct 20, 2014

haydenbleasel commented Oct 20, 2014

gauntface commented Oct 20, 2014

haydenbleasel commented Oct 20, 2014

gauntface commented Oct 20, 2014

addyosmani commented Oct 20, 2014

gauntface commented Oct 20, 2014

addyosmani commented Oct 20, 2014

gauntface commented Oct 20, 2014

addyosmani commented Nov 3, 2014

gauntface commented Nov 3, 2014

haydenbleasel commented Nov 3, 2014

gauntface commented Nov 3, 2014

haydenbleasel commented Nov 21, 2014

haydenbleasel commented Dec 11, 2014

addyosmani commented Dec 11, 2014

haydenbleasel commented Dec 11, 2015

phbernard commented Jan 20, 2016

Puigcerber commented Mar 13, 2016

gauntface commented Jan 9, 2018