Create a manifest file
Created by: khawkins98
We could reduce the boilerplate size and better manage global settings by using a central web manifest.
About manifests: https://developer.mozilla.org/en-US/docs/Web/Manifest Validator: https://manifest-validator.appspot.com/ Generator: https://tomitm.github.io/appmanifest/
Sample starting point:
{
"lang": "en",
"background_color": "#70BDBD",
"theme_color": "#70BDBD",
"name": "EMBL-EBI - European Bioinformatics Institute",
"short_name": "EMBL-EBI",
"display": "standalone",
"icons": [
{
"src": "https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/apple-touch-icon-114x114.png",
"type": "image/png",
"sizes": "114x114",
"actualSize": "114x114"
},
{
"src": "https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/apple-touch-icon-72x72.png",
"type": "image/png",
"sizes": "72x72",
"actualSize": "72x72"
},
{
"src": "https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/apple-touch-icon-144x144.png",
"type": "image/png",
"sizes": "144x144",
"actualSize": "144x144"
},
{
"src": "https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.1/images/logos/EMBL-EBI/favicons/apple-touch-icon-57x57.png",
"type": "image/png",
"sizes": null,
"actualSize": "57x57"
}
]
}
And we could then reduce the favicon reference in the <head>
to:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/ebi-default.webmanifest">
<meta name="msapplication-TileColor" content="#70BDBD">
<meta name="theme-color" content="#70BDBD">