/ DEV

Генерация фавиконок при помощи Gulp

На разных платформах используются иконки разных размеров, да еще и с разными требованиями, поэтому не получится использовать одну и ту же картинку повсюду. Чтобы нарезать все иконки по отдельности руками уйдет слишком много времени и, само собой, есть плагин для Gulp, решающий эту проблему. Если вы не знаете, что это вообще такое, сначала рекомендую прочитать этот пост.

Итак, установим плагин gulp-real-favicon:

npm install gulp-real-favicon --save-dev

Добавим в gulpfile.js

var realFavicon = require ('gulp-real-favicon');
var fs = require('fs');

var FAVICON_DATA_FILE = 'faviconData.json';

gulp.task('generate-favicon', function(done) {
  realFavicon.generateFavicon({
    masterPicture: 'app/images/master_picture.png',
    dest: 'dist/images/icons',
    iconsPath: '/',
    design: {
      ios: {
        pictureAspect: 'noChange',
        assets: {
          ios6AndPriorIcons: false,
          ios7AndLaterIcons: false,
          precomposedIcons: false,
          declareOnlyDefaultIcon: true
        }
      },
      desktopBrowser: {},
      windows: {
        pictureAspect: 'noChange',
        backgroundColor: '#da532c',
        onConflict: 'override',
        assets: {
          windows80Ie10Tile: false,
          windows10Ie11EdgeTiles: {
            small: false,
            medium: true,
            big: false,
            rectangle: false
          }
        }
      },
      androidChrome: {
        pictureAspect: 'noChange',
        themeColor: '#ffffff',
        manifest: {
          display: 'standalone',
          orientation: 'notSet',
          onConflict: 'override',
          declared: true
        },
        assets: {
          legacyIcon: false,
          lowResolutionIcons: false
        }
      }
    },
    settings: {
      scalingAlgorithm: 'Mitchell',
      errorOnImageTooSmall: false,
      readmeFile: false,
      htmlCodeFile: false,
      usePathAsIs: false
    },
    markupFile: FAVICON_DATA_FILE
  }, function() {
    done();
  });
});

gulp.task('inject-favicon-markups', function() {
  return gulp.src(['dist/*.html', 'dist/dir/*.html'])
  .pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code))
  .pipe(gulp.dest('dist'));
});

gulp.task('check-for-favicon-update', function(done) {
  var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
  realFavicon.checkForUpdates(currentVersion, function(err) {
    if (err) {
      throw err;
    }
  });
});

Заменяем цвета и пути в тасках generate-favicon и inject-favicon-markups на свои. Генерируем изображения:

gulp generate-favicon

добавляем пути к иконкам в html файлы:

gulp inject-favicon-markups