We now have a supply picture file, e.g., 1024x1024px, and we wish to generate favicons of various sizes for a lot of platforms, matching web application manifest. The webmanifest file with favicons needs to be generated mechanically too.
For Webpack we will use the highly effective html-bundler-webpack-plugin.
This bundler plugin renders a HTML template and may generate favicons mechanically. Below the hood is used the Favicons Node.js module.
This module generates favicons and their related information for a lot of platforms akin to android, apple, home windows.
Set up modules:
npm i -D html-bundler-webpack-plugin favicons
Non-obligatory, you’ll be able to set up CSS and SASS loaders in the event you use them:
npm i -D css-loader sass-loader
For instance, we’ve got a easy HTML file, the place we will specify supply information of kinds, scripts and pictures:
<!DOCTYPE html>
<html>
<head>
<!-- supply favicon file relative to this HTML file -->
<hyperlink href="https://style-tricks.com/webdiscus/./myFavicon.png" rel="icon" />
<!-- SCSS file relative to this HTML file -->
<hyperlink href="./kinds.scss" rel="stylesheet" />
<!-- supply script file relative to this HTML file -->
<script src="./primary.js" defer="defer"></script>
</head>
<physique>
<h1>Hey World!</h1>
</physique>
</html>
Create minimalistic Webpack config:
const path = require('path');
// bundler plugin to render html
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
// favicon plugin to generate icons
const { FaviconsBundlerPlugin } = require('html-bundler-webpack-plugin/plugins');
module.exports = {
mode: 'manufacturing',
output: {
path: path.be a part of(__dirname, 'dist/'),
},
plugins: [
new HtmlBundlerPlugin({
entry: {
// define templates here
index: './src/views/home.html', // => dist/index.html
},
js: {
// output filename of JS
filename: '[name].[contenthash:8].js',
},
css: {
// output filename of CSS
filename: '[name].[contenthash:8].css',
},
}),
new FaviconsBundlerPlugin({
enabled: 'auto', // true, false, auto - generate favicons in manufacturing mode solely
faviconOptions: {
path: '/img/favicons', // output path
appName: 'My App',
icons: {
android: true, // Create Android homescreen icon.
appleIcon: true, // Create Apple contact icons.
appleStartup: false, // Create Apple startup photographs.
favicons: true, // Create common favicons.
home windows: false, // Create Home windows 8 tile icons.
yandex: false, // Create Yandex browser icon.
},
},
}),
],
module: {
guidelines: [
{
test: /.(s?css)$/,
use: ['css-loader', 'sass-loader'],
},
jpe?g,
],
},
};
See full favicons choices here.
The generated HTML accommodates output filenames of CSS and JS, however the authentic tag <hyperlink href="https://style-tricks.com/webdiscus/./myFavicon.png" rel="icon" /> is changed with generated favicon and meta tags.
The generated dist/index.html:
<!DOCTYPE html>
<html>
<head>
<!-- authentic tag is changed with tags generated by favicons module -->
<hyperlink rel="apple-touch-icon" sizes="1024x1024" href="/img/favicons/apple-touch-icon-1024x1024.png">
<hyperlink rel="apple-touch-icon" sizes="114x114" href="/img/favicons/apple-touch-icon-114x114.png">
<hyperlink rel="apple-touch-icon" sizes="120x120" href="/img/favicons/apple-touch-icon-120x120.png">
<hyperlink rel="apple-touch-icon" sizes="144x144" href="/img/favicons/apple-touch-icon-144x144.png">
<hyperlink rel="apple-touch-icon" sizes="152x152" href="/img/favicons/apple-touch-icon-152x152.png">
<hyperlink rel="apple-touch-icon" sizes="167x167" href="/img/favicons/apple-touch-icon-167x167.png">
<hyperlink rel="apple-touch-icon" sizes="180x180" href="/img/favicons/apple-touch-icon-180x180.png">
<hyperlink rel="apple-touch-icon" sizes="57x57" href="/img/favicons/apple-touch-icon-57x57.png">
<hyperlink rel="apple-touch-icon" sizes="60x60" href="/img/favicons/apple-touch-icon-60x60.png">
<hyperlink rel="apple-touch-icon" sizes="72x72" href="/img/favicons/apple-touch-icon-72x72.png">
<hyperlink rel="apple-touch-icon" sizes="76x76" href="/img/favicons/apple-touch-icon-76x76.png">
<hyperlink rel="icon" kind="picture/png" sizes="16x16" href="/img/favicons/favicon-16x16.png">
<hyperlink rel="icon" kind="picture/png" sizes="32x32" href="/img/favicons/favicon-32x32.png">
<hyperlink rel="icon" kind="picture/png" sizes="48x48" href="/img/favicons/favicon-48x48.png">
<hyperlink rel="icon" kind="picture/x-icon" href="/img/favicons/favicon.ico">
<hyperlink rel="manifest" href="/img/favicons/manifest.webmanifest">
<meta identify="apple-mobile-web-app-capable" content material="sure">
<meta identify="apple-mobile-web-app-status-bar-style" content material="black-translucent">
<meta identify="apple-mobile-web-app-title" content material="My App">
<meta identify="application-name" content material="My App">
<meta identify="mobile-web-app-capable" content material="sure">
<meta identify="theme-color" content material="#fff">
<hyperlink href="css/kinds.05e4dd86.css" rel="stylesheet" />
<script src="js/primary.f4b855d8.js" defer="defer"></script>
</head>
<physique>
<h1>Hey World!</h1>
</physique>
</html>
The generated dist/img/favicons/manifest.webmanifest will likely be appears to be like like:
{
"identify": "My App",
"short_name": "My App",
"description": null,
"dir": "auto",
"lang": "en-US",
"show": "standalone",
"orientation": "any",
"start_url": "/?homescreen=1",
"background_color": "#fff",
"theme_color": "#fff",
"icons": [
{
"src": "/img/favicons/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/favicons/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/favicons/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/favicons/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/favicons/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/favicons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/favicons/android-chrome-256x256.png",
"sizes": "256x256",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/favicons/android-chrome-384x384.png",
"sizes": "384x384",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/favicons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
}
]
}
