Добавил генератор favicon

README.md

@@ -20,6 +20,10 @@
       <td><code>npm start ЗАДАЧА</code></td>
       <td>Запустить задачу с названием ЗАДАЧА (список задач в <code>gulpfile.js</code>)</td>
     </tr>
+    <tr>
+      <td><code>npm start check:favicons:update</code></td>
+      <td>Проверка актуальности данных <a href="https://realfavicongenerator.net/">генератора favicon</a> (при старте автоматизации генерирует favicon из <code>./src/img/favicon-lg.png</code> (должна быть 260×260 или больше) и доп. файлы, всё пишет в <code>./build/img</code>)</td>
+    </tr>
     <tr>
       <td><code>npm run build</code></td>
       <td>Сборка проекта без карт кода (сжатый вид, как результат работы)</td>

faviconData.json

+{"result":{"status":"success"},"favicon":{"package_url":"https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/favicons.zip","files_urls":["https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/android-chrome-192x192.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/android-chrome-256x256.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/apple-touch-icon.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/browserconfig.xml","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/favicon-16x16.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/favicon-32x32.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/favicon.ico","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/manifest.json","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-144x144.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-150x150.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-310x150.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-310x310.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/mstile-70x70.png","https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/package_files/safari-pinned-tab.svg"],"html_code":"<link rel=\"apple-touch-icon\" sizes=\"180x180\" href=\"/img/apple-touch-icon.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/img/favicon-32x32.png\">\n<link rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/img/favicon-16x16.png\">\n<link rel=\"manifest\" href=\"/img/manifest.json\">\n<link rel=\"mask-icon\" href=\"/img/safari-pinned-tab.svg\" color=\"#ffffff\">\n<link rel=\"shortcut icon\" href=\"/img/favicon.ico\">\n<meta name=\"msapplication-TileColor\" content=\"#ffffff\">\n<meta name=\"msapplication-TileImage\" content=\"/img/mstile-144x144.png\">\n<meta name=\"msapplication-config\" content=\"/img/browserconfig.xml\">\n<meta name=\"theme-color\" content=\"#ffffff\">","compression":"false","overlapping_markups":["link[rel=\"apple-touch-icon\"]","link[rel=\"shortcut\"]","link[rel=\"shortcut icon\"]","link[rel=\"icon\",sizes=\"16x16\"]","link[rel=\"icon\",sizes=\"32x32\"]","meta[name=\"msapplication-TileColor\"]","meta[name=\"msapplication-TileImage\"]","meta[name=\"msapplication-config\"]","link[rel=\"manifest\"]","meta[name=\"theme-color\"]","link[rel=\"mask-icon\"]"]},"files_location":{"type":"path","path":"/img"},"preview_picture_url":"https://realfavicongenerator.net/files/897613615b53f4fadbb9e3e1b402e247406e2b7c/favicon_preview.png","version":"0.15"}
\ No newline at end of file

gulpfile.js

@@ -5,6 +5,7 @@ const fs = require('fs');
 const gulp = require('gulp');
 const gulpSequence = require('gulp-sequence');
 const browserSync = require('browser-sync').create();
+const realFavicon = require ('gulp-real-favicon');
 
 const postcss = require('gulp-postcss');
 const autoprefixer = require("autoprefixer");
@@ -30,6 +31,9 @@ let dirs = projectConfig.dirs;
 let lists = getFilesList(projectConfig);
 // console.log(lists);
 
+// файл с настройками фавиконок
+const faviconData = './faviconData.json';
+
 // Формирование и запись диспетчера подключений (style.scss), который компилируется в style.min.css
 let styleImports = '/*!*\n * ВНИМАНИЕ! Этот файл генерируется автоматически.\n * Не пишите сюда ничего вручную, все такие правки будут потеряны.\n * Читайте ./README.md для понимания.\n */\n\n';
 lists.css.forEach(function(blockPath) {
@@ -199,6 +203,78 @@ gulp.task('copy:fonts', function () {
     .pipe(gulp.dest(dirs.buildPath + '/fonts'));
 });
 
+// Генератор фавиконок
+gulp.task('favicons', function(done) {
+  realFavicon.generateFavicon({
+    masterPicture: dirs.srcPath + '/img/favicon-lg.png',
+    dest: dirs.buildPath + '/img',
+    iconsPath: '/img',
+    design: {
+      ios: {
+        pictureAspect: 'backgroundAndMargin',
+        backgroundColor: '#ffffff',
+        margin: '14%',
+        assets: {
+          ios6AndPriorIcons: false,
+          ios7AndLaterIcons: false,
+          precomposedIcons: false,
+          declareOnlyDefaultIcon: true
+        }
+      },
+      desktopBrowser: {},
+      windows: {
+        pictureAspect: 'noChange',
+        backgroundColor: '#ffffff',
+        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
+        }
+      },
+      safariPinnedTab: {
+        pictureAspect: 'silhouette',
+        themeColor: '#ffffff'
+      }
+    },
+    settings: {
+      scalingAlgorithm: 'Mitchell',
+      errorOnImageTooSmall: false
+    },
+    markupFile: faviconData
+  }, function() {
+    done();
+  });
+});
+
+// Ручная проверка актуальности данных для favicon. Запускать перед стартом нового проекта.
+gulp.task('check:favicons:update', function(done) {
+  var currentVersion = JSON.parse(fs.readFileSync(faviconData)).version;
+  realFavicon.checkForUpdates(currentVersion, function(err) {
+    if (err) {
+      throw err;
+    }
+  });
+});
+
 // Сборка SVG-спрайта для блока sprite-svg
 let spriteSvgPath = dirs.srcPath + dirs.blocksDirName + '/sprite-svg/svg/';
 gulp.task('sprite:svg', function (callback) {
@@ -306,6 +382,7 @@ gulp.task('html', function() {
       basepath: '@file',
       indent: true,
     }))
+    .pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(faviconData)).favicon.html_code))
     .pipe(replace(/\n\s*<!--DEV[\s\S]+?-->/gm, ''))
     .pipe(gulp.dest(dirs.buildPath));
 });
@@ -367,8 +444,8 @@ gulp.task('img:opt', function (callback) {
 // Сборка всего
 gulp.task('build', function (callback) {
   gulpSequence(
-    'clean',
-    ['sprite:svg', 'sprite:png'],
+    ['clean'],
+    ['sprite:svg', 'sprite:png', 'favicons'],
     ['style', 'style:single', 'js', 'copy:css', 'copy:img', 'copy:js', 'copy:fonts'],
     'html',
     callback

package.json

@@ -40,6 +40,7 @@
     "gulp-notify": "^3.0.0",
     "gulp-plumber": "^1.1.0",
     "gulp-postcss": "^7.0.0",
+    "gulp-real-favicon": "^0.2.2",
     "gulp-rename": "^1.2.2",
     "gulp-replace": "^0.6.1",
     "gulp-sass": "^3.1.0",

src/_include/page_head.html

@@ -14,12 +14,4 @@
   @@include('../blocks/is-mobile/is-mobile--to-head.js')
 </script>
 
-<link rel="icon" href="img/favicon.ico" type="image/x-icon">
-<!--DEV Такой комментарий не попадет в собранный HTML
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="manifest" href="/manifest.json">
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-<meta name="theme-color" content="#ffffff"> 
--->
+<!--DEV Перед </head> при сборке будут вставлены ссылки на favicon и служебные файлы -->