Last active
January 15, 2019 21:13
-
-
Save CharlieHawker/0c39e496c644245a71bb to your computer and use it in GitHub Desktop.
Generate favicons for common sizes automatically from an SVG file using gulp
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 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/')); | |
| }); | |
| }); |
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
| <!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