Created
May 4, 2022 21:11
-
-
Save pmcfernandes/779efd95084937c7232fa49633a98aed to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var realFavicon = require ('gulp-real-favicon'); | |
var fs = require('fs'); | |
// File where the favicon markups are stored | |
var FAVICON_DATA_FILE = 'faviconData.json'; | |
// Generate the icons. This task takes a few seconds to complete. | |
// You should run it at least once to create the icons. Then, | |
// you should run it whenever RealFaviconGenerator updates its | |
// package (see the check-for-favicon-update task below). | |
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: { | |
design: 'raw' | |
}, | |
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(); | |
}); | |
}); | |
// Inject the favicon markups in your HTML pages. You should run | |
// this task whenever you modify a page. You can keep this task | |
// as is or refactor your existing 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')); | |
}); | |
// Check for updates on RealFaviconGenerator (think: Apple has just | |
// released a new Touch icon along with the latest version of iOS). | |
// Run this task from time to time. Ideally, make it part of your | |
// continuous integration system. | |
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; | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add package:
npm install gulp-real-favicon --save-dev
Run package:
Generate your icons: gulp generate-favicon
Inject the HTML code in your pages: gulp inject-favicon-markups