Skip to content

Instantly share code, notes, and snippets.

@andrewmcodes
Created April 7, 2021 04:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save andrewmcodes/108d716fccbbb3af72b8e920814b88a7 to your computer and use it in GitHub Desktop.
Save andrewmcodes/108d716fccbbb3af72b8e920814b88a7 to your computer and use it in GitHub Desktop.
Install favicon cli
  1. npm install -g cli-real-favicon
  2. 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment