@gulppress/favicon
v0.0.1-7
Published
> Generate a smart and minimalist favicon setup that fits most modern needs.
Downloads
1
Readme
@gulppress/translate
Generate a smart and minimalist favicon setup that fits most modern needs.
@gulppress/translate is part of the gulppress workflow to build assets for WordPress.
Check out the gulppress documentation before using this package take full advantage of everything it has to offer.
Description
In 2021 there is no need to generate and serve dozens of different favicons sizes.
All you need is just five icons and one JSON file.
This task generates everything you will need for a modern favicon setup from a single SVG file.
It was heavily inspired by Andrey Sitnik and his awesome blog article How to Favicon in 2021
Install
$ npm install --save-dev @gulppress/faviconUsage
In your gulpfile.ts:
import { task } from 'gulp';
import getFaviconTask from '@gulppress/favicon';
task('favicon', getFaviconTask({
src: './assets/favicon.svg',
dest: './dest/favicon',
manifest: {
// You must provide a name
name: 'GulpPress',
// You must provide a short_name
short_name: 'GulpPress',
background_color: '#fcb900',
theme_color: '#fcb900',
display: 'browser',
},
}));This will generate the following 5 icons that you should copy into the root folder of your WordPress installation (location of the wp-config.php file).
favicon.icoicon.svgicon-192.pngicon-512.pngapple-touch-icon.png
It will also generate the followign manifest.json file, that you should also copy to the same folder.
{
"name": "GulpPress",
"short_name": "GulpPress",
"background_color": "#fcb900",
"theme_color": "#fcb900",
"display": "browser",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Finally it will generate a favicon.html file whose content you should print in the <head> tag. Here's an example implementation that you can place in your functions.php file:
// Remove the default icon
add_filter( 'get_site_icon_url', '__return_false' );
// Show our custom icons in the frontend
add_action( 'wp_head', 'custom_favicon_html', 100 );
// Show our custom icons in the dashboard as well
add_action( 'admin_head', 'custom_favicon_html', 100 );
function custom_favicon_html() {
?>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">
<?php
}API
src
Type: string | string[]
A glob string or an array of glob strings.
Gets be passed to gulp.src().
dest
Type: string | string[]
The path of the output directory where files will be written.
Gets passed to gulp.dest().
manifest
Type: object
Type: string
The name member is a string that represents the name of the web application as it is usually displayed to the user.
Type: string
The short_name member is a string that represents the name of the web application displayed to the user if there is not enough space to display name.
Type: string
Default: #ffffff
The background_color member defines a placeholder background color for the application page to display before its stylesheet is loaded. This value is used by the user agent to draw the background color of a shortcut when the manifest is available before the stylesheet has loaded.
Type: string
Default: #ffffff
The theme_color member is a string that defines the default theme color for the application. This sometimes affects how the OS displays the site (e.g., on Android's task switcher, the theme color surrounds the site).
Type: fullscreen | standalone | minimal-ui | browser
Default: 'browser'
The display member is a string that determines the developers’ preferred display mode for the website.
All other options
Please check out the type definitions for all other options.
Related
- Web app manifests on MDN Web Docs
- Official w3c web app manifest specification
License
MIT © Woda