Favicon generator for Gulp

Wire favicon copying and optimization into your Gulp build pipeline.

Gulp build pipeline

Generate your favicon package first, then follow the steps below to integrate with Gulp.

Installation steps

1
Generate your favicon package and unzip into a source folder (e.g. src/favicons/).
2
Install gulp-if needed: npm install --save-dev gulp.
3
Add a copy task that moves favicons to your dist/ output directory.
4
Run the favicon task before or as part of your default build series.
5
Verify dist/favicon.ico exists after gulp build.

Code & configuration

Copy and adapt for your Gulp project

const { src, dest, series } = require("gulp");

function favicons() {
  return src("src/favicons/*")
    .pipe(dest("dist"));
}

exports.favicons = favicons;
exports.build = series(favicons, /* other tasks */);

Pro tips

Combine with gulp-rev for cache-busting if you fingerprint other assets.
Keep favicon filenames stable — browsers cache them aggressively.

Files to deploy

favicon.ico

favicon.svg

favicon-96x96.png

apple-touch-icon.png

android-chrome-192x192.png

android-chrome-512x512.png

site.webmanifest