Integrate realfavicongenerator.net

[soniktrooth]

https://realfavicongenerator.net has a node module that can generate favicons from a single source file on build. We should integrate this so we can add an icon svg and never have to think about them again.

Related: https://trello.com/c/q7K9l4vU/61-integrate-realfavicongenerator-into-kalastatic https://github.com/kalamuna/kalastatic_dot_module/issues/61

[soniktrooth]

How to

Install cli-real-favicon: npm install -g cli-real-favicon

Create a file named faviconDescription.json and populate it with:

{
    "masterPicture": "TODO: Path to your master picture",
    "iconsPath": "images/favicon",
    "design": {
        "ios": {
            "pictureAspect": "backgroundAndMargin",
            "backgroundColor": "#ffffff",
            "margin": "14%",
            "assets": {
                "ios6AndPriorIcons": false,
                "ios7AndLaterIcons": false,
                "precomposedIcons": false,
                "declareOnlyDefaultIcon": true
            }
        },
        "desktopBrowser": {},
        "windows": {
            "pictureAspect": "noChange",
            "backgroundColor": "#ffffff",
            "onConflict": "override",
            "assets": {
                "windows80Ie10Tile": false,
                "windows10Ie11EdgeTiles": {
                    "small": false,
                    "medium": true,
                    "big": false,
                    "rectangle": false
                }
            }
        },
        "androidChrome": {
            "pictureAspect": "shadow",
            "themeColor": "#ffffff",
            "manifest": {
                "name": "Kalastatic",
                "display": "standalone",
                "orientation": "notSet",
                "onConflict": "override",
                "declared": true
            },
            "assets": {
                "legacyIcon": false,
                "lowResolutionIcons": false
            }
        },
        "safariPinnedTab": {
            "pictureAspect": "silhouette",
            "themeColor": "#ffffff"
        }
    },
    "settings": {
        "scalingAlgorithm": "Mitchell",
        "errorOnImageTooSmall": false
    }
}

In the code above, replace TODO: Path to your master picture with the path of your master picture. For example, assets/images/master_picture.png.

Generate your icons: mkdir outputDir real-favicon generate faviconDescription.json faviconData.json outputDir

Inject the HTML code in your pages: real-favicon inject faviconData.json outputDir htmlFiles/*.html

Check for updates (to be run from time to time, ideally by your continuous integration system): real-favicon check-for-update --fail-on-update faviconData.json

[RobLoach]

Before Metalsmith runs, trigger real-favicon generator through cli-real-favicon.