Skip to content

Instantly share code, notes, and snippets.

@CharlieHawker

CharlieHawker/gulp-favicons.js

Last active January 15, 2019 21:13
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CharlieHawker/0c39e496c644245a71bb to your computer and use it in GitHub Desktop.
Save CharlieHawker/0c39e496c644245a71bb to your computer and use it in GitHub Desktop.
Download ZIP
Generate favicons for common sizes automatically from an SVG file using gulp
Raw
gulp-favicons.js
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
rimraf = require('gulp-rimraf'),
imageResize = require('gulp-image-resize');
gulp.task('clean:favicons', function() {
return gulp.src('dist/favicon*')
.pipe(rimraf());
});
gulp.task('process-favicons', ['clean:favicons'], function() {
var faviconSizes = [{ size: 64, format: 'ico' }];
[32,48,57,64,72,114,120,144,152].forEach(function(s) {
faviconSizes.push({ size: s, format: 'png'});
});
return faviconSizes.forEach(function(size) {
gulp.src('src/favicon.svg')
.pipe(plumber({ errorHandler: plumberErrorHandler }))
.pipe(imageResize({
width: size.size,
height: size.size,
format: size.format,
upscale: true,
imageMagick: true
}))
.pipe(imagemin())
.pipe(rename(function(path) {
if ( size.format !== 'ico' )
path.basename += '-' + size.size,
path.extname = '.' + size.format
}))
.pipe(gulp.dest('dist/'));
});
});
Raw
head.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="X-UA-Compatible" content="IE=edge,chrome=1" />
...
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/favicon-152.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/favicon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/favicon-120.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/favicon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/favicon-72.png">
<link rel="apple-touch-icon-precomposed" href="/favicon-57.png">
<link rel="icon" href="/favicon-48.png" sizes="32x32">
<link rel="icon" href="/favicon-57.png" sizes="57x57">
<link rel="icon" href="/favicon-64.png" sizes="64x64">
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment