posthtml-inline-favicon is a PostHTML plugin to inline favicons.
Before:
<head>
<link rel="shortcut icon" href="favicon.ico" />
</head>After:
<head>
<link rel="icon" type="image/png" href="data:image/png;base64,..." />
</head>yarn add -D posthtml-inline-favicon
# OR
npm i posthtml-inline-faviconconst fs = require('fs');
const posthtml = require('posthtml');
const { inlineFavicon } = require('posthtml-inline-favicon');
const html = fs.readFileSync('./index.html');
posthtml()
.use(inlineFavicon())
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));By default, the plugin assumes that the file to process is in the same directory as the posthtml script. If not, specify the relative path to the html file in the options:
const fs = require('fs');
const posthtml = require('posthtml');
const { inlineFavicon } = require('posthtml-inline-favicon');
const html = fs.readFileSync('./public/index.html');
posthtml()
.use(inlineFavicon({ path: 'public' }))
.process(html)
.then(result => fs.writeFileSync('./after.html', result.html));See the PostHTML Guidelines.