Invalid color in webmanifest file

bjarnef commented 5 years ago

It seems the color in the generated site.webmanifest is not a valid color.

The generated json in site.webmanifest looks like this.

{
    "name": "My brand",
    "short_name": "Brand",
    "icons": [
        {
            "src": "/dist/img/favicon/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image/png"
        },
        {
            "src": "/dist/img/favicon/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image/png"
        },
        {
            "src": "/dist/img/favicon/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image/png"
        },
        {
            "src": "/dist/img/favicon/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "/dist/img/favicon/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "/dist/img/favicon/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/dist/img/favicon/android-chrome-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "/dist/img/favicon/android-chrome-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "/dist/img/favicon/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#_c_d9_a34",
    "background_color": "#_c_d9_a34"
}

DerianAndre commented 5 years ago

Your hex color code must be lowercase, try that.

bjarnef commented 5 years ago

@DerianAndre it is already lowercase hex code, but why should that matter, both uppercase and lowercase hex codes are valid in CSS and JavaScript.

bjarnef commented 5 years ago

The problem is that it add underscore in the generated hex codes, eg. #_c_d9_a34 in site.webmanifest.

RealFaviconGenerator / gulp-real-favicon

Invalid color in webmanifest file #21