npm install -g cli-real-favicon
- Create a file named
faviconDescription.json
and populate it with:
{
"masterPicture": "TODO: Path to your master picture",
"iconsPath": "/",
"design": {
"ios": {
"pictureAspect": "noChange",
"assets": {
"ios6AndPriorIcons": false,
"ios7AndLaterIcons": false,
"precomposedIcons": false,
"declareOnlyDefaultIcon": true
}
},
"desktopBrowser": {
"design": "raw"
},
"windows": {
"pictureAspect": "noChange",
"backgroundColor": "#2b5797",
"onConflict": "override",
"assets": {
"windows80Ie10Tile": false,
"windows10Ie11EdgeTiles": {
"small": false,
"medium": true,
"big": false,
"rectangle": false
}
}
},
"androidChrome": {
"pictureAspect": "backgroundAndMargin",
"margin": "17%",
"backgroundColor": "#ffffff",
"themeColor": "#ffffff",
"manifest": {
"display": "standalone",
"orientation": "notSet",
"onConflict": "override",
"declared": true
},
"assets": {
"legacyIcon": false,
"lowResolutionIcons": false
}
},
"safariPinnedTab": {
"pictureAspect": "blackAndWhite",
"threshold": 86.25,
"themeColor": "#db2777"
}
},
"settings": {
"compression": 2,
"scalingAlgorithm": "Mitchell",
"errorOnImageTooSmall": false,
"readmeFile": true,
"htmlCodeFile": true,
"usePathAsIs": false
},
"versioning": {
"paramName": "v",
"paramValue": "1"
}
}
Generate your icons:
mkdir outputDir && real-favicon generate faviconDescription.json faviconData.json outputDir
Inject HTML:
real-favicon inject faviconData.json outputDir htmlFiles/*.html
Refresh if needed:
real-favicon check-for-update --fail-on-update faviconData.json