非常清楚揪甘心... http://realfavicongenerator.net/favicon_result?file_id=3df8a2162542dfec8c82d7c36fd7aedcefcb1c51&technology=gulp#.WRscAxN96Ho

think: 需先製作你的圖檔，然後到網站上設定參數生成 favicon，打包下載回本機。使用 gulp 將頁面注入 favicon 的動作自動化，之後不需手動頁頁加。so 若圖檔有改變，就要從新到網站生成

以下說明假設您已有一個專案和 Gulp 文件。

安裝 gulp-real-favicon：

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

在 gulpfile.js 中插入以下代碼 ：

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

// favicon markups 檔案存放位置
var FAVICON_DATA_FILE = 'faviconData.json';

// 生成 icons. 這個任務會花一點時間來完成.
// 你應該在最後步驟才執行生成 icon. 之後,
// 在 RealFaviconGenerator 每次更新 package 的時候執行一次。
// (看下面的 check-for-favicon-update 任務).
gulp.task('generate-favicon', function(done) {
    realFavicon.generateFavicon({
        masterPicture: 'TODO: Path to your master picture',
        dest: 'TODO: Path to the directory where to store the 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
                }
            },
            safariPinnedTab: {
                pictureAspect: 'silhouette',
                themeColor: '#5bbad5'
            }
        },
        settings: {
            scalingAlgorithm: 'Mitchell',
            errorOnImageTooSmall: false
        },
        markupFile: FAVICON_DATA_FILE
    }, function() {
        done();
    });
});

// Inject（注入）favicon markups 到你的 HTML 頁面中. 
// 你應該執行這個任務在任何時候你定義一個頁面時. 
// 你可以按原樣保留這個任務或重構您現有的 HTML pipeline。
gulp.task('inject-favicon-markups', function() {
    return gulp.src([ 'TODO: List of the HTML files where to inject favicon markups' ])
        .pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code))
        .pipe(gulp.dest('TODO: Path to the directory where to store the HTML files'));
});

// 保持更新此套件 RealFaviconGenerator 
// (編按: Apple 才剛跟著最新版的 iOS 釋出一個新的 Touch icon).
// 時不時運行這個任務。理想情況下，使其持續整合在你的系統。
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;
        }
    });
});

• 在上面的代碼中，替換 TODO: Path to your master picture 為主圖片的路徑。例如，assets/images/master_picture.png。

• 替換 TODO: Path to the directory where to store the icons 為將生成圖標和相關文件的目錄。例如，dist/images/icons。

• 替換 TODO: List of the HTML files where to inject favicon markups HTML 文件列表。例如，['dist/*.html', 'dist/misc/*.html']。
• 替換 TODO: Path to the directory where to store the HTML files 文件的目錄。例如，dist。

生成你的圖標：

gulp generate-favicon

在您的網頁中註入 HTML 代碼：

gulp inject-favicon-markups